Теги HTML
В этом разделе находится справочник, включающий в себя теги HTML и их подробное описание: тип, назначение, атрибуты, синтаксис, примеры использования, поддержку версиями HTML и браузерами. Вся информация подробно расписана и удобно структурирована.
HTML-теги и атрибуты
Описание
Каждая страница тегов HTML и атрибутов начинается с описания их предназначения, чтобы сразу можно было понять то ли это, что вам необходимо. Кроме этого в верстке (да и не только) существует такое понятие, как семантика кода, которую в двух словах можно описать так: из всего многообразия тегов в каждой конкретной ситуации используйте именно тот и них, который больше к ней подходит по логике и смыслу, естественно не забывая о синтаксисе. Что это значит. Например, в HTML существует сразу несколько тегов отображающих заключенный в них текст курсивным шрифтом, но предназначение у них разное. Тег <I> используется просто для визуального выделения текста, <EM> — для акцентирования внимания на выделенном фрагменте, обозначения его важности, <VAR> — для выделения отдельных частей программного кода и так далее.
Атрибуты
Этот подраздел присутствует только у тегов HTML и в нем идет перечисление и краткое описание атрибутов, которые можно использовать в каждом из них. Атрибуты делятся на два основных типа: «Личные» и «Общие». Личные атрибуты — это те, которые можно указывать только внутри данного тега (хотя в HTML есть и такие личные атрибуты, которые присутствуют сразу у нескольких HTML-тегов). С общими атрибутами все гораздо проще — они имеются практически у всех HTML-тегов, а в версии HTML 5 уже вообще у всех без исключения.
Тип тега
Данный подраздел также имеется только у HTML-тегов, в нем описаны их краткие характеристики, которые помогут вам быстро сориентироваться в вопросах правильного синтаксиса и использования тегов. Вообще словосочетание «тип тега» в данном случае довольно условное и служит лишь для группирования следующих характеристик.
Назначение. Здесь указывается ссылка на страницу, которая содержит все теги, относящиеся к той же группе, что и данный тег HTML, например текстовые теги уровня строки.
Модель тега. Здесь находится информация по тому, к какой модели относится данный тег, которая поможет вам понять, как поведет себя его содержимое (текст, изображения и т.д.) при отображении браузером. Также эти данные подскажут вам можно ли указывать данный HTML-элемент внутри другого. Различают несколько моделей тегов (кстати, иногда их тоже называют «типы»):
Встроенные (inline, уровня строки) — все, что выводят эти HTML-теги на страницу располагается на одной строке и только если доступной ширины (например, ширины окна браузера) недостаточно, то происходит перевод строки на следующую. Таким образом, содержимое сразу нескольких встроенных тегов вполне может располагаться на одной строке, если уместится.
Блочные (block, уровня блока) — каждый из таких тегов создает перевод строки до и после себя, выводя свое содержимое всегда с новой строки. Именно поэтому текст двух блочных тегов никогда не будет отображаться браузерами на одной строке, даже если в каждом из них его будет очень мало. Естественно это в том случае, если с тегами не были произведены какие-то модификации, например с помощью свойств CSS.
Уникальные — все остальные теги HTML, которые не принадлежат ни к одной из предыдущих категорий, являются уникальными и могут располагаться только внутри определенных HTML-элементов, поэтому в таких случаях в справочнике сразу указано, где именно их можно прописывать.
Может содержать. В этом пункте находится информация о том, какие теги HTML может содержать данный элемент на первом уровне вложенности. Эта информация поможет вам избежать таких «ошибок новичков», как указание внутри ссылки (<A>) тега параграфа <P>.
Должен содержать. Этот пункт присутствует в тех случаях, когда при использовании данного тега, вы обязаны внутри него указать какой-то другой тег. Другими словами «друг без друга они жить не могут».
Не может содержать. Данный пункт есть не у всех HTML-тегов и имеется только тогда, когда надо сделать дополнительное исключение.
Открывающий тег. Закрывающий тег. Здесь указывается информация о том, из каких тегов может или должен состоять данный элемент.
Значения
Этот подраздел есть только у атрибутов, и описывает, какие допустимые значения может иметь каждый из них.
Значение по умолчанию. Здесь указывается значение атрибута по умолчанию, то есть то, которое браузер будет использовать, если атрибут не будет указан в HTML-теге.
Синтаксис
Для того, чтобы наглядно продемонстрировать, как выглядит указание того или иного тега или атрибута, в этом подразделе приведен их синтаксис кода, а для более полной картины показан реальный пример их использования.
Обязательный атрибут. Как вы понимаете, этот пункт есть только у атрибутов, он показывает, является ли указание данного атрибута обязательным для тега.
Поддержка версиями HTML
| Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Частично | Да | Частично | Нет |
В нижней части страниц справочника имеется полная информация по поддержке тегов и атрибутов версиями HTML и XHTML. Для удобства пользования эти данные также продублированы в верхней части страниц в виде небольших изображений. Поэтому при создании макета обязательно обращайте внимание на возможность использования данного атрибута или тега HTML с вашим <!DOCTYPE>.
Хотелось бы отметить, что во многих случаях браузеры правильно отображают страницу даже в тех случаях, когда в ее коде имеются какие-то теги или атрибуты, которые не поддерживаются версией HTML указанной в Доктайпе. Но это означает лишь то, что они научились самостоятельно исправлять многие ошибки допущенные верстальщиками и уж совсем не обязательно, что все браузеры будут это делать одинаково.
Поддержка браузерами
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | |||
| Версия: | 6.0 | 7.0 | 8.0 и выше | 2.0 | 3.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Нет | Частично | Да | Нет | Да | Частично | Нет | Да |
Также в конце каждой страницы есть подробная информация по поддержке тегов и атрибутов разными версиями популярных браузеров. Вверху страниц она тоже продублирована, но в более сокращенной форме. Например, если все версии какого-то браузера поддерживают тег, то возле его значка будет зеленая галочка, если не поддерживают — красный крестик. Если же все версии браузера поддерживают тег частично, либо какие-то из них понимают его полностью, а какие-то наоборот не понимают совсем, то во всех этих случаях будет стоять фиолетовая галочка.