Структурные теги HTML5. Справочник тегов HTML
Всем известно, что теги , , , являются презентационными, а следовательно, исходя из парадигмы «структура, представление, поведение» их использование не приветствуется. Куда более привычными представляются элементы , , . Так было на протяжении долгих лет практики разработки. Однако многое поменялось в семантике этих элементов с приходом HTML5 . Теперь у нас 4 новых тега со смыслом и каша в голове.
vs Если раньше все учебники по вёрстке пестрили фразами вроде «используйте вместо », и это было наполовину верно, то сегодня такая привычка может сыграть злую семантическую шутку. А дело всё в том, что авторы HTML5 предлагают использовать для выделения отрывков текста с целью обратить внимание читателя, однако не подразумевая усиления значимости текста или интонации. Спецификация приводит примеры использования для разметки ключевых слов в документе
The frobonitor and barbinator components are fried.
И лидов (первый абзац статьи в журналистике)
Kittens "adopted" by pet rabbit
Six abandoned kittens have found an unexpected new mother figure - a pet rabbit.
Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.
В свою очередь , как и раньше, означает повышенную значимость своего содержимого.
vs Отныне содержит текст, выбивающийся из общего окружения, но не имеющий эмоциональной окраски. На мой взгляд, логично использовать там, где типографская традиция предполагает курсив (например, слова на иностранном языке, термины и др.)Per aspera ad Astra — в переводе с латыни изречение означает «Через тернии к звёздам».
же означает эмфатическое ударение, эмоциональный акцент на данном отрывке текста. Это тот случай, когда в речи мы выделяем слова голосом (интонацией, громкостью и др.)
Казнить нельзя, помиловать.
Внимательно читайте договор! «Текст мелким шрифтом» (информация, являющаяся юридической формальностью, как то лицензия предприятия или юридический адрес и др.) мы, как правило, размечали элементом с классом, задающих в визуальных ПА более мелкий шрифт. Теперь же в нашем арсенале появился новый старый семантический элемент — .Холивар о Раньше был ни чем иным, как зачёркнутый текст. Теперь представляет информацию, которая утратила свою актуальность.У нас также есть элемент , результатом обработки которого по умолчанию в визуальных ПА является зачёркнутый текст. Он означает изменения в документе, и на первый взгляд их назначение может показаться одинаковым. Однако здесь есть тонкий момент. Рассмотрим пример страницы товара в интернет-магазине.
На ней может быть указано две цены, одна из которых зачёркнута. Её мы размечаем элементом . Это значит, что старая цена утратила свою актуальность (не важно когда это было, важен сам факт). Как проверить, что не ? подразумевает изменения, внесённые в документ (важно то, что в некоторый момент времени документ был изменён ). В нашем же случае, в новом документе уже содержится неактуальная информация.Новая семантика и старый доктайп Если по каким-то непонятным причинам вы не можете заменить доктайп на новый и формально верстаете в HTML 4.01 — не отчаивайтесь. Используйте старые новые элементы с новым смыслом и со временем вы скажете себе «спасибо». Возможно, кто-то скажет, что это неправильно, но ведь эти элементы, кроме даже не являются невалидными. Кроме того, HTML5 разрабатывался с расчётом на обратную совместимость, это же относится и к новой семантике старых элементов. Радикально ничего не изменилось, а добавилась лишь семантическая перчинка.
Все, кто связан с веб-разработкой в целом и с версткой в частности знают о спецификации HTML5, которая в данный момент все еще в разработке и не получила статус рекомендации. Но, тем не менее, все свежие версии браузеров поддерживают нововведения, в той или иной мере. Сегодня пробежимся по новым структурным тегам HTML5
Рассмотрим типичную структуру современного сайта. Можно выделить несколько блоков, которые так или иначе присутствуют в коде — это “шапка” (header), панель навигации (navigation), боковая панель (sidebar), раздел основного контента (content), “подвал” сайта(footer) и некоторые другие. Если используется блочная верстка (а таблицы это прошлый век, я давно не видел табличной верстки в современных сайтах), то эти блоки выводятся с помощью тега div .
Структурные теги являются техническими эквивалентами этого тега, но они делают разметку более наглядной, простой для понимания и в будущем будут помогать поисковикам в индексации сайта, а также облегчат обработку при просмотре с мобильных устройств. По моему, достаточные причины если не для сиюминутного внерения — то для взятия “на заметку” уж точно.
sectionПредназначен для обозначения раздела документа, который может включать в себя заголовки, шапку, подвал и собственно, текст. На мой взгляд, ближайший аналог — блок с классом wrapper (некоторые присваивают ему id, но это не принципиально), который используется как контейнер документа, содержит в себе блоки, привязанные к нему. Своего рода “обертка” для последующих блоков. Также допускается вложенность тега.
headerОбозначает “шапку” сайта или раздела, обычно там расположен заголовок. Ничем особенным не примечателен
navКак видно из названия — задает блок, в котором содержится навигация. Обычно это список ссылок на разделы или страницы сайта, оформленный должным образом. Тег может содержаться в тегах section, header и footer , о котором ниже.
footer“Подвал” сайта или раздела. Полный аналог тега header
articleЗадает текст содержания статьи, записи блога и тому подобные вещи.
asideТег, обозначающий сайдбар (боковую панель) сайта, в которой может быть раздел навигации, облако меток, популярные записи и прочий функционал. Типичный пример боковой панели вы можете видеть справа от статьи
Приведенный ниже код иллюстрирует применение структурных тегов HTML5 .
Название блога
- Главная
- Разделы
- Автор
- Контакты
Обратите внимание, все структурные теги требуют наличия закрывающего тега. Кстати, закрывающий тег /article например, гораздо более информативен, чем /div . Сразу видно, что где находится. Читать такой код намного легче. Хотя бы ради этого стоит внедрить в существующие проекты или запланировать в будущие.
Теперь о грустном — горячо любимый IE до 8 версии включительно не поддерживает данные теги, но отображает информацию между ними. Не применяются к ним стили CSS, если объекты не
созданы с помощью скрипта. Заставить его показывать документ как нужно поможет следующий код:
Document.createElement("header"); document.createElement("footer"); document.createElement("section"); document.createElement("aside"); document.createElement("nav"); document.createElement("article");
Скрипт создает DOM элементы и IE корректно отрабатывает с ними.
Небольшое дополнение — HTML5 по умолчанию интерпретирует любой скрипт как type=»text/javascript”
, поэтому специально это указывать не нужно. Что опять же делает код проще и легче. Сплошные плюсы Остальные браузеры работают нормально, единственный Firefox полностью поддерживает теги с версии 4.0, но с версии 3 корректно с ними работает и отображает.
На сегодня все. Если стало интересно — “ ” тут я писал о применении новой спецификации на практике. Оставайтесь на связи — будет интересно.
HTML - язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги - это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Список тегов HTMLНиже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
Комментарий. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет тип документа. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Ссылка, гиперссылка, якорь. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет текст как аббревиатуру. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Контактная информация автора или владельца документа. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет область на карте-изображении | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Статья | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Контент в стороне (содержимое не является основным на странице по смыслу) | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Позволяет вставить воспроизводимый аудио файл. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Полужирный текст. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Задает базовый URL или аттрибут target для относительных ссылок в документе. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Область, где написание текста может имееть другое направления. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Устанавливает направление написания текста. В отличии от направление указывается физическое направление | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Цитата. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Указывает область body документа. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Перенос строки. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Кликабельная кнопка | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Используется для рисовании графики с помощью скриптов | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Подпись таблицы. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Сноска на название материала. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Используется для вставки компьютерного кода в текстовом виде. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Задает характеристики колонок в таблице. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет группу из одной или более колонок таблицы для форматирования. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет описание термина из тега в списке терминов | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Текст, который удален в новой версии документа. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Указывает, что содержимое является термином. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет диалоговое окно или интерактивный элемент | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Блочный элемент - один из основных элементов верстки. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет список определений | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Название термина в списке определений | ||||||||||||||||||||||||||||||||||||||||||||||||||||
выделенный по смыслу текст (обычно, текст выделенный курсивом). | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Контейнер для внешнего приложения | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Группа связанных элементов в форме | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Заголовок для элемента | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет автономную группу из нескольких элементов (например картинка с подписью) | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Нижний колонтитул | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет форму пользовательского ввода | ||||||||||||||||||||||||||||||||||||||||||||||||||||
- | Заголовки HTML разного уровня: , , , , , . | |||||||||||||||||||||||||||||||||||||||||||||||||||
Указывает область head документа. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Блок заголовка | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Горизонтальная линия - тематический разделитель. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Корневой элемент. Сообщает браузеру, что данный документ является HTML документом. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Выделяет текст курсивом. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет встроенный фрейм | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Изображение, картинка. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Поле для ввода | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Текст, который был добавлен в новой версии документа. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Метка для поля ввода. Указывает на привязку элемента (обычно текста) к полю ввода. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Заголовок элементов | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Элемент списка | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS) | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Основной контент | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Контейнер для . Определяет пользовательскую карту на изображении | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Выделенный текст (обычно с помощью подсветки фона). | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Контейнер для списка пунктов меню | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет элементы, которые пользователь может вызвать из контекстного меню | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Используется для определения мета-данных документа. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Измеритель значений в заданном диапазоне | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Контейнер для навигационных элементов | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Альтернативный контент для пользователей, отключивших скрипты | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет встроенный объект | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет нумерованный список | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет группу связанных вариантов в выпадающем списке. Дает название группу | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Параметр (вариант выбора) в выпадающем списке | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Результат вычислений | ||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Абзац. | |||||||||||||||||||||||||||||||||||||||||||||||||||
Задает параметры для встроенных объектов | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Контейнер для нескольких изображений | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Предварительно отформатированный текст. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Индикатор выполнения (прогресса) | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Цитата в тексте. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Альтернативный текст, если браузер не поддерживает тег . | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Аннотация к содержимому тега . | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов). | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Перечеркнутый текст. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом). | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет скрипт или подключение скрипта из внешнего ресурса. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Раздел | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет выпадающий список | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Текст шрифтом меньшего размера. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет ресурс для тегов , и . | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Строчный элемент. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Текст, выделенный по значению. Обычно отображается полужирным. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет контейнер для определения стилей документа | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Отображает текст в виде нижнего индекса. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Заголовок внутри тега | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Отображает текст в виде верхнего индекса. | ||||||||||||||||||||||||||||||||||||||||||||||||||||
|