Структура тега html: Элементы html — Википедия – Структура HTML файла

Структура HTML файла

Типичный HTML файл представляет собой текстовый файл с набором тегов. Теги — это особые команды, которые помогают браузеру отображать страницу. Благодаря тегам браузер понимает, в каком месте текст должен быть выделен жирным или курсивом, какой заголовок будет у страницы и как отображать таблицу. Их содержание не будет отображаться на странице браузера. Далее будут рассмотрены примеры содержания HTML файлов. Если вы не знаете, как создать HTML файл, то посмотрите статью «Как создать HTML файл». Существует большое количество тегов, часть из которых мы постараемся разобрать в курсе.

Рассмотрим пример упрощённого HTML файла, страницы сайта:

<!DOCTYPE html>
<html>
   <head>
      Свойства страницы, правила отображения, стили, скрипты, подключаемые файлы
   </head>
   <body>
      Содержание страницы
   </body>
</html>
Всё, что написано латиницей и заключено в скобки
< >
— это теги. Разберём пример по сторкам:

<!DOCTYPE html> — эта строчка говорит о том, что документ является html файлом. Следовательно, браузер сможет показать его как html страницу.

<html> … </html> — это парный тег (у него есть открывающая часть <html> и закрывающая </html>, которые различаются наличием слеша «/«). Внутри него заключено всё тело html документа.

<head> … </head> — всё, что находится внутри этого тега не выводится на экран. Но в нём содержится важная информация, которая поможет браузеру правильно показать страницу. К примеру, в этом теге могут находиться указание кодировки и языка страницы, правила отображения, стили и скрипты.

<body> … </body> — этот тег, внутри которого находится отображаемая область страницы.

Пример html страницы

Теперь разберём усложнённый пример html страницы, в котором будут добавлены несколько дополнительных тегов относительно предыдущего примера:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Про мышей</title>
</head>
<body> Тише, мыши, кот на крыше,<br>
а котята ещё выше.<br>
Кот пошёл за молоком,<br>
а котята кувырком.<br>
Кот пришёл без молока,<br>
а котята ха-ха-ха. </body>
</html>
Относительно предыдущего примера в новом появилось несколько изменений: во второй строке стоит <html lang=»ru»>. У этого тега появился атрибут lang=»ru». Обратите внимание, что атрибут ставится внутри скобок тега < >. Как можно догадаться из названия, он указывает на то, что страница использует русский язык. Современные браузеры практически все могут безошибочно определить язык, поэтому в этом атрибуте нет особой необходимости, но привели его в качестве примера атрибута, которым может обладать тег.

Второе изменение касается содержания тега <head> … </head>. Здесь в первой строчке появилось указание на кодировку текста <meta charset="utf-8">. Тег «meta» называется метатегом.

Если сохранить html файл с одной кодировкой, а в «meta» написать другую, то все буквы в документе будут отображаться браузером как непонятные значки.

В блоке <head> … </head> также появилась строчка <title>Про мышей</title>. Этот тег указывает, какой заголовок будет у страницы браузера (у вкладки).

Внутри тега <body> … </body> появился текст стихотвориения. Каждая строчка этого стиха заканчивается на тег <br>, который говорит браузеру о том, что должна начаться новая строка. Если убрать все теги <br>, то браузер отобразит стихотворение как одну длинную строку без переносов. Обратите внимание, что тег

<br> не имеет закрывающей пары по аналогии с <body> … </body> или <head> … </head>.

Ради практики создайте файл на своём компьютере с любым названием и расширением «.html». К примеру, «page.html». Затем откройте его любым текстовым редактором и вставьте в него код из примера выше. Сохраните файл. Кликните на файл два раза и он откроется в браузере. Теперь измените что-либо в файле, сохраните и перезагрузите страницу в браузере.

Комментарии в HTML коде

Существует способ оставлять комментарии в HTML коде. Они могут быть полезными для разработчика. К примеру, комментарии о том, что необходимо доделать на сайте. Эти комментарии не видны обычным пользователям на странице браузера, но видны в HTML коде. Задать комментарий можно через такую конструкцию: <!— текст_комментария —>. Пример комментариев:
<!DOCTYPE html>
<html>
<head>
<!-- Комментарий в разделе head -->
</head>
<!-- Комментарий между блоками head и body-->
<body>
<!-- Комментарий в теле страницы -->
</body>
</html>
Комментарий может находиться в любой части сайта.

Комментировать можно всё, включая теги. Можно скрывать целые части страниц — ограничений нет.

Структура HTML документа. Основные теги HTML.

Структура HTML документа

В первом выпуске рассылки хотелось бы подробней остановиться о формате и содержании рассылки.

Свою рассылку я начну с рассмотрения основ языка HTML.

Я постараюсь вести рассылку по принципу «от простого к сложному». Вести я ее буду именно в таком формате для того, чтобы человек, который захотел бы изучить основы сайтостроения, смог сразу же, после выпуска рассылки, на практике выполнять изложенный материал.

Но сразу же хочу оговориться, что, в частности, язык HTML – это очень обширный язык, который непрерывно развивается. И поэтому, для того, чтобы овладеть этим языком на высоком уровне, Вы должны тщательно изучить основы (т.е. выпуски моей рассылки). И параллельно с этим практиковаться.

Изучая основы языка HTML, мы будем обращаться к CSS стилям. А значит, мы будем изучать и CSS. Но это чуть позже. Также мы будем обращаться за помощью к javascript.

Сегодняшний вступительный урок, мы начнем с изучения структуры HTML документа и основных тегов HTML.

Структура HTML документа

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Поехали…

Каждый HTML документ начинается со строчки:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.0//EN»>

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.0//EN»>

В общем случае эта строчка говорит браузеру, который открывает нашу страницу, на какие стандарты ему опираться.

Тег <!DOCTYPE …> весьма разнообразен, и от его модификации зависит то, как будет отображаться содержимое на Вашей странице.

Однако, если умело расположить все элементы и блоки на странице и применить стиль, то все будет одинаково хорошо работать во всех браузерах с нужным <!DOCTYPE …>.

Но, пока мы не знаем, ни что такое блоки, ни что такое стили и как эту «абрукадабру» применять, считаю нужным вернуться к подробному рассмотрению <!DOCTYPE …>, когда мы уже будем что-то уметь и сможем реально оценить его работу.

А пока движемся ниже по странице.

Кстати, а почему я начал рассматривать HTML документ с верхней части страницы?

Потому что браузер загружает страницу и «считывает код» сверху вниз, слева направо. (Впрочем, как мы и читаем книги).

Значит, далее следует тег <HTML>. Он говорит браузеру, что страница, которую он открывает, является HTML документом.

Наверное, не совсем понятно слово тег?

Вообще говоря, тег – это инструкция, которая говорит браузеру, что в данном месте документа нужно сделать.

С помощью тегов мы создаем наши страницы. Все теги заключены в так называемые «уголки» (<тег>). И закрывающий </тег> (с косой чертой). Например, <strong> жирный текст </strong>. Указывает, что текст между открывающим и закрывающим тэгом strong будет выделен жирным.

Что такое тег, надеюсь, понятно.

Двигаемся дальше.

Предлагаю набрать что-нибудь своими руками.

Итак, приступим.

Запусти блокнот или wordpad в OC WINOWS. Наберем следующие строчки:

Структура HTML документа

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″ /> <meta name=»author» content=»Ф.И.О.» /> <meta name=»description» content=»описание страницы» /> <meta name=»keywords» content=»слово, слово, слово» /> <meta http-equiv=refresh content=»30;url=www.mysite.ru» /> <title>Заголовок окна браузера</title> </head> <body> </body> </html>

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»

«http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″ />

<meta name=»author» content=»Ф.И.О.» />

<meta name=»description» content=»описание страницы» />

<meta name=»keywords» content=»слово, слово, слово» />

<meta http-equiv=refresh content=»30;url=www.mysite.ru» />

<title>Заголовок окна браузера</title>

</head>

<body>

</body>

</html>

Сохраним файл под каким-либо именем, например start.html. Теперь разберемся что написали.

Между тегами <head> и </head> располагается информация, не отображаемая на странице.

Например, тег

<meta…>, кстати, он закрывающего тега не требует, может указывать кодировку (charset=windows-1251) или сведения об авторе (name=»author» content=»Ф.И.О.») , или слова для поисковой машины, тег <meta http-equiv=refresh content=»30; url=www.mysite.ru»> заставит браузер автоматически через 30 секунд перейти на сайт mysite.ru (пример).

Тег <title> определяет текст в заголовке окна браузера. (Тег закрывающийся).

title

Также в теге <head> могут располагаться скрипты javascript или vbscript, заключенные в теги <script>….</script>.

И стили, заключенные в теги <style>….</style>.

На этом с тегом <head> пожалуй мы закончим.

Далее у нас следует тег <body>.

Это, собственно, тело документа, здесь размещается все то, что мы видим на странице. У тега <body> есть набор параметров, которые мы рассмотрим, но использовать их не рекомендуется.

Итак…

bgcolor — устанавливает цвет фона документа. (<body bgcolor=»black»>)

background — указывает на url-адрес изображения — фона документа.

text — устанавливает цвет текста документа.

link — устанавливает цвет гиперссылок.

vlink= — устанавливает цвет гиперссылок на которых вы уже побывали, используя значение.

alink= — устанавливает цвет гиперссылок при нажатии.

bgproperties=fixed — фоновое изображение прокручиваться не будет. Т.е. текст будет двигаться при нажатии PageDown, а фон — нет.
Данный параметр поддерживается только Internet Explorer.

Эти параметры можно объединять, например, на этой страничке используется:

<BODY bgcolor=»black» text=»white» link=»red» alink=»blue»>

<BODY bgcolor=»black» text=»white» link=»red» alink=»blue»>

Давайте и наберем эту строку в нашем предыдущем примере.

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″ /> <meta name=»author» content=»Ф.И.О.» /> <meta name=»description» content=»описание страницы» /> <meta name=»keywords» content=»слово, слово, сдлово» /> <meta http-equiv=refresh content=»30;url=www.mysite.ru» /> <title>Заголовок окна браузера</title> </head> <BODY bgcolor=»black» text=»white» link=»red» alink=»blue»> Текст, который мы увидим в своем браузере!!! </body> </html>

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»

«http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″ />

<meta name=»author» content=»Ф.И.О.» />

<meta name=»description» content=»описание страницы» />

<meta name=»keywords» content=»слово, слово, сдлово» />

<meta http-equiv=refresh content=»30;url=www.mysite.ru» />

<title>Заголовок окна браузера</title>

</head>

<BODY bgcolor=»black» text=»white» link=»red» alink=»blue»>

Текст, который мы увидим в своем браузере!!!

</body>

</html>

Должен быть белый текст на черном фоне, так как на картинке.

html

На этом, наш сегодняшний выпуск рассылки о структуре HTML-документа, закончен.

Также Вы можете скачать видео-урок себе на компьютер!

Структура HTML документа

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее html

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Структура HTML-документа: основные теги, пример

HTML – это язык разметки сайта. Многие считают его программированием, но это не так. В HTML нет никаких переменных, вычислений, массивов и других элементов, присутствующих в любом языке программирования.

Пользуясь HTML, разработчик может создать только внешний вид сайта. Важно понимать, что ни один сайт не существует без разметки. HTML является базой создания веб-страниц. Весь остальной функционал добавляется различными языками программирования.

Создание html-документа

Создать простую страничку сайта можно в любом редакторе. Подойдет даже «Блокнот». Для начинающего разработчика рекомендуется использовать другие редакторы, у которых есть функции автоподстановки и другие подсказки. Благодаря этому можно создавать готовые таблицы, ссылки, изображения и другие элементы. А в «Блокноте» каждую букву приходится писать вручную.

Как правило, «Блокнот» используют только в тех случаях, когда под рукой нет других инструментов. Сначала создается текстовый документ, а потом сохраняется в формате html. Все страницы сайта должны быть с расширением html.

Язык html является иерархичным. То есть существует специальная структура html-документа. Что это такое? Рассмотрим ниже для наглядности.

Структура html-документа. Пример

Структура всегда одна и та же. Если вы захотите поменять что-то, браузер не сможет это обработать. В результате вы не получите то, что задумали.

структура html документа

На рисунке выше указана структура любого html-файла. Первый пункт указывает на тип файла. Этот тег указывается один раз. Если вы будете использовать специальные редакторы, то вся структура создастся автоматически. Вам нужно будет подправить стандартные значения.

Структура html-документа — основные теги:

Из этих трех тегов состоит каркас всего сайта. Обратите внимание на рисунок. Все эти теги имеют закрывающийся тег со знаком “/”. Если вы пишете от руки, привыкайте ставить сразу оба тега – открывающий и закрывающий.

Выше было сказано, что страницы сайтов имеют расширение .html. То есть если вы создадите текстовый документ, но при этом напишете правильный код, браузер всё равно отобразит вам просто текст. Никакого преобразования кода не будет.

Раздел head

На рисунке под пунктом 3 указан раздел head. В этом разделе указывается служебная информация. Например, можно указать кодировку (пункт 4) и заголовок страницы (пункт 5).

Заголовок должен быть всегда. Без него ни один поисковик не сможет определить название контента (текста) на веб-странице. А это плохо для продвижения сайта. Более того, в браузере наверху не будет указан заголовок страницы. Это неудобство для пользователя.

Структура html-документа такова, что заголовок <title> указывается только в разделе head. Если тег <title> указать в разделе body или после него, то обработчик на него не обратит внимания.

Кроме этого, в разделе head указывается информация для подключения скриптов, файлов стилей, инструкции для поисковых систем или любые другие данные, которые пользователь не должен видеть, но они важны для браузера или программистов.

Подключение стилей

Структура html-документа позволяет подключать стили различными способами. Более того, их можно писать индивидуально в каждом элементе. Но данный способ не рекомендуется, поскольку код становится слишком большим и неудобным.

Поисковые системы рекомендуют все стили выносить в отдельный файл, а в элементах просто использовать различные классы.

Подключается файл следующим образом.

<link rel = “stylesheet” href = “style.css” type = “text/css”>

В атрибуте href указывается путь до файла. Если в пути будет ошибка, то стили не загрузятся. Также обязателен атрибут type, который указывает, что это файл css.

Другим вариантом является определение стилей прямо в разделе head.

стили в html

Но этот вариант также не очень рекомендуется. Эти методы сильно отличаются тем, что файл css может быть одним для всего сайта, и все изменения в нем будут мгновенно применяться ко всем страницам. А если вы используете метод, который указан на рисунке выше, то вам придется вносить изменения во все существующие страницы сайта.

Если создаваемый класс будет использоваться только на одной странице, тогда этот вариант вам подходит.

Подключение скриптов

Скрипты подключаются следующим образом.

<script type=“text/javascript” src=“main.js”></script>

Здесь обязательны два атрибута: type и src. В первом указываем, что это файл Javascript, а второй – где расположен файл. Если вы допустите опечатку, то ничего работать не будет.

Раздел body

Структура html-документа такова, что размещать содержание, которое будет видно пользователю, нужно только в разделе body. Название тега говорит само за себя.

Здесь указывается весь основной код страницы, который может включать неограниченное число элементов. Но чем длиннее код, тем дольше он будет обрабатываться.

Рассмотрим самые основные теги, которые можно использовать в области body. Основных не так много. Все остальные вы будете узнавать по мере роста ваших знаний и практики.

Основные теги

Структура html-документа требует обязательного порядка написания элементов. Теги всегда должны по краям обрамляться скобками <>. Без этого браузер не поймет, что это тег. После открывающейся скобки всегда следует имя элемента (тега). Если вы допустите пробел между < и именем, то браузер посчитает это текстом.

Рассмотрим на примере тега изображения. Обратите внимание, что этот тег не закрывающийся, в отличие от ссылок, абзаца и многих других.

структура html документа что это такое

Порядок атрибутов не имеет значения. Но их написание (оформление) очень важно. Всегда сначала идет имя атрибута, потом знак равенства, затем в кавычках пишется значение атрибута. Значение может быть разным – цифровое или текстовое.

Атрибут src во всех тегах указывает путь файла, который нужно подгружать. Атрибут alt во всех элементах указывает короткое описание. В данном случае загружается фотография bird.jpg с описанием – фотография птицы.

Кроме этого, в теге img, можно было указать размеры, только ширину или высоту, заголовок, выравнивание, класс стиля или рамку.

Рассмотрим другие основные теги, которые указываются в разделе body.

Тег

Назначение

<a>…</a>

Ссылки

<img>

Изображения

<p>…</p>

Абзац

<br>

Перенос текста на новую строку

<strong>…</strong>

Жирный текст

<i>…</i>

курсив

<s>…</s>

Перечеркнутый текст

<u>…</u>

Подчеркнутый текст

<ol></ol>, <ul></ul>

Списки

<table></table>

Таблицы

Как всё это можно представить в голове

Начинающие разработчики не всегда сразу могут представить всё это умозрительно. Посмотрите несколько примеров структуры веб-страниц, и тогда вам точно станет понятно.

создание html документа

Имеет место быть такой вариант:

 структура html документа основные теги

И такой:

структура html документа пример

Использование стилей

Как и говорилось вначале, стили можно подключать как файлом, так и указывать в разделе head. В любом случае описание классов происходит совершенно одинаково.

Например, можно указать стиль для заголовка. Тогда вам нужно написать h2 (поскольку стиль будет для заголовка второго уровня), открыть скобки и писать, какие свойства будут в этом элементе. Если вы знаете базовый английский, то проблем быть не должно. Все свойства названы человеческим языком.

использование стилей css

Если хотите указать этот стиль сразу для нескольких элементов, то напишите их через запятую.

использование нескольких стилей css

Результатом будет красный заголовок.

текстовый документ

Вышеуказанные способы подходят для оформления стандартных элементов. Но также можно создавать и свои классы. Их название должно начинаться с точки, затем пишется любое произвольное имя.

классы css

Использовать их нужно вот так.

использование классов css

Обратите внимание: если вы указали настройки стилей для стандартного элемента, не нужно в дальнейшем писать слово class. Стиль будет применяться по умолчанию. В атрибуте class можно указать только те стили, которые у вас начинаются с точки.

Структура html-документа

Теги

Язык HTML состоит из тегов. Каждый тег является элементом разметки гипертекста, и выполняет свою определенную функцию. Одни теги нужны для создания структуры html-документа, указания различной информации о веб-странице, другие – для форматирования и создания элементов на веб-странице, например, чтобы создать кнопку, необходим тег <button>Кнопка</button>, а чтобы перенести текст на новую строку – тег <br>.

Теги бывают парными, например тег <button>...</button>, и одиночными, например, тег <br>. Парные теги состоят из начального или открывающего тега, и конечного или закрывающего тега. Закрывающий тег записывается со слэшем.

Каркас html-документа

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Название веб-страницы</title>
    </head>
    <body>
        
    </body>
</html>

Тип документа

В первой строке html-документа принято указывать тип документа. Делать это нужно обязательно, потому что существует несколько версий языка html, и у каждой есть свои правила и стандарты. Если браузеру не сообщить о версии HTML, то он не будет знать какому стандарту нужно следовать при отображении веб-страницы, что может привести к ее некорректному отображению.

При вёрстке веб-страниц мы будем использовать пятую версию языка – HTML5. Для этой версии тип документа записывается таким образом: <!doctype html>.

Теги верхнего уровня

Каркас html-документа образуют теги верхнего уровня <html>, <head>и <body>.

Теги <head>и <body>определяеют заголовок и тело html-документа.

Теги заголовка документа

В заголовке документа размещается различная информация о веб-странице: кодировка, название, описание, ключевые слова, пути к файлам со стилями, скриптами и т.д. Эта информация, кроме названия, на веб-странице не отображается.

Кодировка html-документа
<meta charset="utf-8">

Кодировку html-документа указывают при помощи тега <meta>и его атрибута charset.

Атрибуты тегов записываются как пара, состоящая из имени и значения. Значения атрибутов записываются в кавычках. У тега может быть несколько атрибутов, в этом случае они записываются через пробел.

В качестве значения атрибута charset, мы будем использовать кодировку utf-8, так как она включает в себя символы всех языковых групп.

Обратите внимание! Если вы указали в качестве кодировки веб-страницы значение utf-8, то и сохранить html-документ необходимо в этой кодировке.

Название html-документа

Название или заголовок html-документа записывается между тегами <title>. Данный тег является обязательным, а также очень полезным как для пользователей, так и для самой веб-страницы.

Содержимое тега <title>отображается:

  • на вкладках веб-страниц
  • в списке закладок
  • в названии файла при сохранении веб-страницы на жесткий диск;
  • в списке результатов поискового запроса на сайтах популярных поисковых систем (Google, Yandex) первыми отображаются сайты, содержащие слова вашего запроса именно в заголовке.

Теги тела документа

В теле документа можно размещать теги, предназначенные для разметки и форматирования содержимого веб-страницы. Все что будет записано в этом контейнере, отобразится на веб-странице в окне браузера. В следующих уроках мы приступим к изучению таких тегов.


Видео к уроку

Строение тела документа | Учебник HTML5

Строение тела документа.

Описание тела нашего документа готово. Базовая структура определена, но необходимо еще поработать над содержанием. Пока мы изучили только элементы HTML5, помогающие определять разделы макета и указывать их назначение, однако все самое важное находится внутри этих разделов.

Большинство уже рассмотренных элементов нужны для определения структуры HTML-документа, которую смогут распознать любые браузеры и новые устройства. Мы узнали, что с помощью тега <body> объявляется тело видимой части документа, тег <header> включает в себя важную информацию о теле, тег <nav> определяет средства навигации, тег <section> описывает содержимое самого документа, а в теги <aside> и <footer> заключается вспомогательная информация. Но ни один из указанных элементов не объявляет непосредственно содержимое документа. Все они относятся исключительно к описанию структуры документа.

Чем дальше мы углубляемся в разбор документа, тем ближе подходим к определению его содержимого. Информация в документе может включать в себя разные визуальные элементы, такие как заголовки,

тексты, изображения, видео и интерактивные приложения. Нам необходимо различать эти элементы и устанавливать взаимоотношения между ними.

<article>

Приведенный на рис. 1.1 макет представляет собой простую и обобщенную структуру современных веб-сайтов, а также показывает, каким образом основное содержимое документа располагается на экране. Так же, как блог делится на записи, содержимое веб-сайтов чаще всего делится на фрагменты, обладающие схожими характеристиками. Определить каждый из этих фрагментов помогает элемент <article> (статья).

Листинг 1.15. Использование элемента <article>

<! DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»utf-8″>

<meta name=»description» content^^™ пример HTML5″>

<meta name=»keywords» content=»HTML5, CSS3, JavaScript’^ <title>Этот текст — заголовок документа</title>

<link rel=»stylesheet» href=»mystyles. css»>

</head>

<body>

<header>

<h2>Это главный заголовок веб-сайта</h2>

</header>

<nav>

<ul>

<li>домой</li>

<Н>фотографии</Н>

<li>видео</li>

<Н>контакты</Н>

</ul>

</nav>

<section>

<article>

Это текст моей первой статьи </article>

<article>

Этот текст моей второй статьи </article>

</section>

<aside>

<blockquote>Статья номер 1</blockquote>

<blockquote>Статья номер 2</blockquote>

</aside>

<footer>

Copyright &copy; 2010-2011 </footer>

</body>

</html>

Как вы видите в коде листинга 1.15, теги <article> располагаются между тегами <section> — статьи принадлежат разделу, частью которого они являются. Можно сказать, что тег <article> — дочерний элемент тега <section>, так же как все элементы внутри тега <body> являются дочерними элементами тела документа. Как и все дочерние элементы тела документа, теги <article> следуют один за другим, так как они независимы друг от друга, что и показано на рис. 1.4.

повторяем основы-

Как уже говорилось, документ HTML имеет древовидную структуру, корнем которой является элемент <html>. Элемент структуры может быть предком, потомком или братом другого элемента, в зависимости от того, какое место относительно друг друга они занимают в дереве. Например, в обычном HTML-документе элемент <body> является потомком элемента <html> и братом элемента <head>. Для обоих элементов, <body> и <head>, элемент <html> является родителем или предком.

Название элемента <article> никак не ограничивает его применение, то есть не обязательно описывать с помощью него только новостные статьи. Элементы <article> могут описывать любые независимые части содержимого документа: публикации на форуме, статьи в журнале, записи блога, комментарии пользователей и т. п. Данный элемент всего лишь

Группирует связанные друг с другом фрагменты информации, независимо от характера этой информации.

<header> «/header>

<nav> </nav>

Как любая независимая часть документа, содержимое каждого элемента <article> обладает собственной структурой. При определении этой структуры мы можем пользоваться преимуществами, которые дает нам универсальность тегов <header> и <footer>, рассмотренных ранее. Это переносимые теги, и их можно использовать не только в теле документа, но и внутри любого его раздела.

Листинг 1.16. Построение структуры элемента <article>

<! DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»utf-8″>

<link rel=»stylesheet» href=»mystyles. css»>

</head>

<body>

<header>

<h2>Это главный заголовок веб-сайта</h2>

</header>

<nav>

<ul>

<li>домой</li>

<Н>фотографии</Н>

<li>видео</li>

<li>контакты</li>

</ul>

</nav>

<section>

<article>

<header>

h2>Заголовок статьи 1</h2>

</header>

Это текст моей первой статьи <footer>

<р>комментарии (0)</p>

</footer>

</article>

<article>

<header>

h2>Заголовок статьи 2</h2>

</header>

Это текст моей второй статьи <footer>

<р>комментарии (0)</p>

</footer>

</article>

</section>

<aside>

<blockquote>Статья номер 1</blockquote>

<blockquote>Статья номер 2</blockquote>

</aside>

<footer>

Copyright &copy; 2010-2011 </footer>

</body>

</html>

Обе статьи в листинге 1.16 описаны с помощью элемента <article>, и у каждой статьи задана своя структура. Вначале определен тег <header> с заголовком <h2>. Далее идет основное содержимое, то есть текст статьи. Завершает каждую статью тег <footer> с указанием количества комментариев.

<hgroup>

Внутри каждого элемента <header> — в начале тела документа и в начале каждой статьи — мы использовали тег <h2> для описания заголовка. В принципе, тега <h2> достаточно для создания заголовка части документа. Но иногда нам нужно добавить подзаголовок или другую вспомогательную информацию, чтобы пояснить назначение веб-страницы или какого-то ее раздела. Очень удобно, что элемент <header> может содержать другие элементы, например: оглавление, формы поиска, короткие текстовые фрагменты и логотипы.

Для создания заголовков мы можем использовать теги <h>: <h2>, <h3>, <h4>, <h5>, <h5> и <h6>. Однако для ускорения обработки документа и для того, чтобы во время его интерпретации не создавались множественные разделы и подразделы, эти теги необходимо группировать. Для этого в HTML5 используется элемент <hgroup>.

Листинг 1.17. Использование элемента <hgroup>

<! DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»utf-8″>

<meta name=»description» content=»Это пример HTML5″>

<link rel=»stylesheet» href=»mystyles. css»> </head>

<body>

<header>

<h2>Это главный заголовок веб-сайта</h2> </header>

<nav>

<ul>

<li>домой</li>

<Н>фотографии</Н>

<li>видео</li>

<li>контакты</li>

</ul>

</nav>

<section>

<article>

<header>

<hgroup>

<h2>Заголовок статьи 1</h2> <h3>подзаголовок статьи 1</h3> </hgroup>

<p>опубликовано 10.12.2011</p> </header>

Это текст моей первой статьи <footer>

<p>комментарии (0)</p>

</footer>

</article>

<article>

<header>

<hgroup>

<1п1>Заголовок статьи 2</h2> <h3>подзаголовок статьи 2</h3> </hgroup>

<p>опубликовано 15.12.2011</p> </header>

Это текст моей второй статьи <footer>

<p>комментарии (0)</p>

</footer>

</article>

</section>

<aside>

<blockquote>Статья номер 1</blockquote>

<blockquote>Статья номер 2</blockquote>

</aside>

<footer>

Copyright &copy; 2010-2011 </footer>

</body>

</html>

Необходимо соблюдать иерархию тегов <h>, то есть сначала должен быть объявлен тег <h2>, затем для подзаголовка тег <h3> и т. д. Но в отличие от предыдущих версий HTML, в HTML5 теги <h> можно использовать в каждом разделе и заново строить такую иерархию. В листинге 1.17 мы добавили подзаголовок и метаданные в каждую статью и сгруппировали заголовок и подзаголовок с помощью <hgroup>. Иерархия тегов <h2> и <h3> используется в каждом элементе <article>.

Элемент <hgroup> следует добавлять только в том случае, если в одном теге <header> есть заголовки разных уровней.

Данный элемент может содержать только теги <h> — вот почему в нашем примере метаданные находятся за его пределами. Если в вашем коде используется только тег <h2> или тег <h2> с метаданными, то эти элементы группировать не нужно. Например, в заголовке тела документа элемент <hgroup> отсутствует, потому что элемент <h> только один. Элемент <hgroup> предназначен исключительно для группировки тегов <h>, на что и указывает его название.

Браузеры и программы, которые исполняют и отображают веб-сайты, считывают HTML-код и создают собственную внутреннюю структуру для интерпретации и обработки каждого элемента. Эта внутренняя структура состоит из разделов, не имеющих ничего общего с разделами документа, которые мы определили в HTML-коде, например, с помощью элементов <section>. Речь идет о концептуальных разделах, генерируемых во время интерпретации кода. Элемент <header> сам по себе не создает отдельного концептуального раздела. Это означает, что элементы внутри <header>, представляющие разные уровни заголовков, могут

привести к формированию нескольких концептуальных разделов. Элемент <hgroup> был создан специально для группировки тегов <h>, чтобы избежать ошибок интерпретации HTML-кода браузерами.

повторяем основы-

Метаданные — это набор данных, который описывает другой набор данных и предоставляет дополнительную информацию о нем. В нашем примере метаданные содержат дату публикации статей.

<figure> и <figcaption>

Элемент <figure> предназначен для более точного определения содержимого документа. До его появления невозможно было объявить содержимое, которое представляет собой изолированную частью документа: иллюстрации, рисунки, видео и т. п. Как правило, такие элементы являются частью основного раздела, но их можно спокойно удалять из документа, не нарушая его структуру. Если такая информация присутствует в документе, то она определяется тегом <figure>.

Листинг 1.18. Использование элементов <figure> и <figcaption>

<! DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»utf-8″>

<meta name=»description» content=»Это пример HTML5″>

<link rel=»stylesheet» href=»mystyles. css»>

</head>

<body>

<header>

<h2>Это главный заголовок веб-сайта</h2>

</header>

<nav>

<ul>

<li>домой</li>

<Н>фотографии</Н>

<li>видео</li>

<Н>контакты</Н>

</ul>

</nav>

<section>

<article>

<header>

<hgroup>

<h2>Заголовок статьи 1</h2>

<h3>подзаголовок статьи 1</h3>

</hgroup>

<р>опубликовано 10.12.2011</p>

</header>

Это текст моей первой статьи <figure>

<img src=»http://minkbooks.com/content/myimage.jpg»> <figcaption>

Это изображение для первой статьи </figcaption>

</figure>

<footer>

<р>комментарии (0)</p>

</footer>

</article>

<article>

<header>

<hgroup>

<h2>Заголовок статьи 2</h2>

<h3>подзаголовок статьи 2</h3>

</hgroup>

<р>опубликовано 15.12.2011</p>

</header>

Это текст моей второй статьи <footer>

<р>комментарии (0)</p>

</footer>

</article>

</section>

<aside>

<blockquote>Статья номер 1</blockquote> <blockquote>Статья номер 2</blockquote>

</aside>

<footer>

Copyright &copy; 2010-2011 </footer>

</body>

</html>

В листинге 1.18 в первой статье сразу после текста мы добавили изображение (<img src=»http://minkbooks.com/content/myimage.jpg»>). Это

Распространенный прием, текст часто сопровождается изображениями или видео. Теги <figure> определяют эти визуальные дополнения и помогают отличать их от остальной информации документа.

Кроме того, в листинге 1.18 внутри тега <figure> используется еще один дополнительный элемент. Такие блоки информации, как изображения и видео, принято подписывать. В HTML5 предусмотрен специальный элемент для создания таких подписей. Тег <figcaption> определяет текст, относящийся к содержимому <figure>, и устанавливает отношение между этими элементами и их содержимым.

Вам также могут быть интересны следующие статьи:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *