Краткий курс HTML 5

2. Теги и элементы

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

Код HTML:выделим <i>слово</i> курсивом
В браузере:выделим слово курсивом

Как видно из примера, в браузере теги не отображаются, но могут влиять на отображение текста.

Некоторые теги не предназначены для выделения области текста, а отвечают за какой-либо одиночный элемент документа (например, изображение или кнопку). Такие теги не требуют закрывающей пары, а косая черта «/» ставится перед закрывающей скобкой тега. Например, <br /> (перенос строки) или <hr /> (горизонтальная линия). Такие одиночные теги называют пустыми, в то время как парные — непустыми, или контейнерами.

Элементом (или узлом) называют совокупность открывающего и закрывающего тегов вместе с их содержимым, а также пустые теги. Элементы — это те кирпичики, из которых состоит документ. Для удобства чтения, состоящие из пустых тегов элементы мы будем отображать с косой чертой, а из парных — без нее.

Синтаксис и механизм представлений

Напомним, что одной из функций механизма представлений HTML 5 является обеспечение совместимости нового стандарта с уже существующими HTML/XHTML-документами. Это происходит благодаря наличию трех «режимов» (HTML5, XHTML5, DOM5 HTML) интерпретатора, каждый из которых поддерживает свой синтаксис.

Вообще говоря, стандартом HTML разрешается набирать теги в любом регистре. Кроме того, можно опускать некоторые закрывающие теги (и косую черту в одиночных тегах). В HTML 5 это тоже допустимо (синтаксис представления HTML5), но такой код не будет совместим с синтаксисом XML/XHTML, что делает затруднительным применение XML-совместимых технологий, таких как, например, микроформаты. По этой причине мы рекомендуем писать код, используя синтаксис XHTML (документ интерпретируется в представлении XHTML5). Исходя из этого и будет вестись дальнейшее изложение.

Не рекомендуется:<P>оставлять парный тег открытым.
Рекомендуется:<p>использовать строчные буквы в именах тегов</p>

Для совместимости со старыми браузерами, которые не понимают синтаксис XHTML, в одиночных тегах желательно оставлять пробел между именем и косой чертой «/», хотя это скорее полезная привычка, чем правило:

Не рекомендуется:<BR>
Рекомендуется:<br /> или <br/>

Правило вложенности тегов

Парные теги (контейнеры) могут содержать не только текст, но и другие теги. При этом действует одно правило — теги должны закрываться в порядке, обратном тому, в котором они открывались. Обратите внимание на расположение тегов в следующем примере:

Неправильно:<tag1><tag2><tag3> </tag2><tag/1></tag3>
Правильно:<tag1><tag2><tag3> </tag3><tag/2></tag1>

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

Вложенные элементы называются дочерними, а те, в которые они вложены — родителями. Это относительное свойство, поскольку каждый узел может являться одновременно дочерним для одного и родителем для других. Элемент верхнего уровня (не имеющий родителей) называется корневым.

Атрибуты тегов

Любой открывающий (или пустой) тег может содержать атрибуты, определяющие некоторые дополнительные свойства всего элемента. Атрибуты прописываются сразу после имени тега, отделяясь от него и друг от друга пробелом:

<а href="http://www.example.com/" target="_blank">Ссылка на сайт</a>

В этом примере мы указали тегу <a> (гиперссылка) два атрибута. Первому (href), отвечающему за адрес ссылки, мы присвоили значение http://www.example.com/. Значение _blank атрибута target означает, что при нажатии на ссылку указанная в href страница должна открываться в новой вкладке браузера.

Некоторые атрибуты могут иметь только одно допустимое значение и всего два возможных состояния — когда атрибут присутствует в элементе и, соответственно, когда отсутствует. В этом курсе такие атрибуты, по аналогии с переменными в математике, называются булевыми. Значение булева атрибута обычно совпадает с его названием. Например, disabled="disabled". Вообщя говоря, их можно опускать, указывая только название атрибута (т. н. сокращенные атрибуты). Однако для совместимости с синтаксисом XHTML/XML значения указывать все же обязательно. Кроме того, названия всех атрибутов необходимо набирать в нижнем регистре и заключать их значения в двойные кавычки, хотя HTML 5 и не ставит такого ограничения.

Не рекомендуется:<input TYPE=text disabled>
Рекомендуется:<input type="text" disabled="disabled" />

Специальные символы

Но как быть, если в значении атрибута нужно использовать двойную кавычку? Или в тексте документа — треугольную скобку? Ведь тогда непонятно, какая из кавычек закрывает атрибут, а какая относится к его значению, и является ли скобка началом тега или это математический знак «меньше»? В этом, а также во многих других случаях на помощь приходят специальные символы HTML.

Специальные символы в HTML реализуются с помощью интерпретируемых браузером мнемокодов. Например, двойную кавычку (") можно вывести кодом &quot;, а знак евро (€) — &euro;. Все мнемокоды начинаются с амперсанда (&) и заканчиваются точкой с запятой (;). Чтобы обычный амперсанд в тексте не путался с началом мнемокода, его всегда необходимо выводить кодом &amp;. С помощью мнемокодов можно отображать даже символы UTF-8. Такие мнемокоды имеют вид &#xxxx;, где вместо xxxx указывается десятичный код символа в кодировке UTF-8. Например, &#169; отобразится как «©». Многие из символов UTF-8 имеют аналоги в виде текстовых мнемокодов. Тот же символ «©» можно обозначить вот так: &copy;.

Ниже приведены четыре наиболее важных мнемокода, которые необходимо запомнить. Остальные при необходимости можно посмотреть в таблице специальных символов HTML.

&quot; — двойная кавычка (")
&amp; — амперсанд (&)
&lt; — открывающая треугольная скобка (<)
&gt; — закрывающая треугольная скобка (>)

9 комментариев

Я где то читал что атрибут target="_blank" как бы не очень хорошо использовать, не нарушает ли он каких нибудь стандартов? Я читал, что разработчику нельзя решать за пользователя как ему открывать ссылку ( в новой вкладке или в той же), как бы это не хорошо. Хотелось бы узнать ваше мнение.

Юрий @ 13 ноября 2012

Атрибут target="_blank" не включен в стандарт XHTML. Для сохранения валидности XHTML-страниц, значение target подменяют (при необходимости, конечно) с помощью JavaScript. В HTML это вполне валидный атрибут и в таких трюках нет необходимости.

По поводу целесообразности соглашусь с тем, что злоупотреблять им не стоит, поскольку большинству пользователей известен способ открыть любую ссылку в новой вкладке, да и кнопка "Назад" всегда под рукой. И все же, без target="_blank" есть некоторая вероятность потерять пользователя, "забывшего" вернуться, тогда как с ним есть вероятность навлечь праведный гнев того же пользователя. Получается палка о двух концах.

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

Алексей @ 13 ноября 2012

Кажись, именно в HTML 5 можно оставлять парные теги открытыми, если за ними идет другой тег. Типа, в списках тег li теперь можно не закрывать.

Катерина @ 30 мая 2013

Катерина, можно, да. И в HTML 4 тоже. В таком случае браузеры должны закрывать их самостоятельно. Однако в некоторых случаях они (IE9, например) делают это неправильно, что приводит к ошибкам в верстке, которые не так просто обнаружить. Парсеры XML (если есть необходимость их использовать) скорее всего тоже споткнутся об эти грабли. А плюсов от такой экономии кода, в общем-то, нет. На мой взгляд, теги все-таки лучше закрывать.

Алексей @ 30 мая 2013

Те, кто верстает на HTML 5, не сильно заботятся про IE. Он не поддерживает очень много возможностей HTML5 -- Википедия Сравнение браузеров (HTML5). А на htmlbook.ru есть перечень тегов, которые позволено пропускать -- http://htmlbook.ru/samhtml5/sintaksis-html5

Катерина @ 30 мая 2013

Пользователей IE достаточно много, чтобы просто оставить их за бортом. Graceful degradation — наше всё. Касаемо незакрытых парных тегов вы правы — если строго следовать этому перечню, проблем даже в IE быть не должно, эти правила действуют со времен HTML 3.2.

Дабы полнее раскрыть тему, вот еще статья о самозакрывающихся тегах в HTML 5: «HTML5 does NOT allow “self-closing” tags» (англ.)

Алексей @ 30 мая 2013

Спасибо, ознакомлюсь)

Катерина @ 30 мая 2013

Спасибо за откровение!

Василий @ 10 декабря 2013

Отличный материал, однозначно стоит использовать.

Алекс @ 11 июня 2018

Оставить комментарий