Тег section группирует контент по тематике, или, другими словами, определяет раздел документа. Обычно предшествует header , может находиться в footer . Тег section может быть заключен внутрь другого тега section , если необходимо, и содержать любой объем разметки. В обычном html, как правило, вместо тега section используют div .
Тег header (шапка) обычно содержит заголовок или группирует заголовки, но также может содержать информацию о секции.
Другими словами тег header определяет верхний колонтитул сайта (шапку сайта).
Тег footer (подвал) обычно содержит информацию о секции, например: автор статьи, дата, авторское право и т.д.
Тег nav определяет навигационную область, обычно это список ссылок. Тег nav является родным братом основной section (секции), header (шапки) и footer (подвала).
Элемент nav можно расположить также, например, в теге header .
Тег aside определяет контент, который расположен вокруг основного контента. Это может быть боковая панель (sidebar), содержащая ряд ссылок на статьи, на архив, на метки.
Тег article определяет любую независимую запись (статью) на сайте, или, например, это может быть резюме, описание товара в интернет магазине и так далее.
Иногда бывает необходимо разместить изображение и прилагающийся к нему текст как единую иллюстрацию. Элемент figure указывает на то, что текст и изображение являются частями единого целого.
Тег dialog – это та область, где отображается комментарии (беседа, разговор). Тег dialog состоит из следующих частей:
HTML
Вася
я тут был
Петя
я подтверждаю, все что написал Вася правда
Разметка на основе тегов HTML5
Lorem ipsum...
Lorem ipsum...
Как вы можете видеть, сами теги более наглядны, чем, если бы вы использовали обычные идентификаторы (id) для тегов div . Также очевидно преимущество в использовании адекватных закрывающих тегов, таких как article . Например, разметка документа становится более понятной (и для поисковиков в том числе), если вместо непонятного блока с id="something" ,(где закрывающий тег еще надо поискать!) использовать тег article .
Фактически, да, если соблюдать несколько дополнительных моментов. Данные теги будут работать в современных браузерах и, вероятно, в IE6. Но есть несколько моментов, которые необходимо соблюдать, если мы захотим использовать структурные теги html5 сегодня.
Во-первых, так как большинство браузеров не понимает doctype HTML5, то они и не знают о новых тегах в HTML5. К счастью, браузеры довольно восприимчивы, что позволяет им иметь дело с неизвестными тегами. Единственная проблема в том, что неизвестные теги не имеют стилей по умолчанию, и такие теги рассматриваются как встроенные (inline) теги. Но наши новые теги HTML5 структурные и, очевидно, должны быть блочными элементами. Итак, когда мы стилизуем их в css, то нам необходимо включить объявление display:block .
Просто включите небольшую часть кода в ваш CSS и новые теги HTML5 готовы к работе. И, конечно, как только HTML5 окончательно распространиться, описание display:block можно удалить, поскольку это описание будет включено в стили по умолчанию.
Есть проблема, если вам требуется поддержка IE. Оказывается, движок IE будет работать с новыми тегами, но не будет признавать любой CSS стиль, примененный к ним. К счастью, исправить это можно, включив небольшой кусок JavaScript. Все что нам понадобится, это включить следующий код:
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("nav");
document.createElement("article");
Данный код можно включите непосредственно в head или подключить через внешний файл.
Таким образом, вы можете прямо сейчас структурировать ваши документы посредством новых тегов HTML5.
HTML - язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги - это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Ниже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
Тег
Краткое описание
|
|
Комментарий.
|
|
|
Определяет тип документа.
|
|
|
Ссылка, гиперссылка, якорь.
|
|
|
Определяет текст как аббревиатуру.
|
|
|
Контактная информация автора или владельца документа.
|
|
|
Определяет область на карте-изображении
|
|
|
Статья
|
|
|
Контент в стороне (содержимое не является основным на странице по смыслу)
|
|
|
Позволяет вставить воспроизводимый аудио файл.
|
|
|
Полужирный текст.
|
|
|
Задает базовый URL или аттрибут target для относительных ссылок в документе.
|
|
|
Область, где написание текста может имееть другое направления.
|
|
|
Устанавливает направление написания текста. В отличии от направление указывается физическое направление
|
|
|
Цитата.
|
|
|
Указывает область body документа.
|
|
Перенос строки.
|
|
|
Кликабельная кнопка
|
|
|
Используется для рисовании графики с помощью скриптов
|
|
|
Подпись таблицы.
|
|
|
Сноска на название материала.
|
|
|
Используется для вставки компьютерного кода в текстовом виде.
|
|
|
Задает характеристики колонок в таблице.
|
|
|
Определяет группу из одной или более колонок таблицы для форматирования.
|
|
|
Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле
|
|
|
Определяет описание термина из тега в списке терминов
|
|
|
Текст, который удален в новой версии документа.
|
|
|
Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть
|
|
|
Указывает, что содержимое является термином.
|
|
|
Определяет диалоговое окно или интерактивный элемент
|
|
|
Блочный элемент - один из основных элементов верстки.
|
|
|
Определяет список определений
|
|
|
Название термина в списке определений
|
|
|
выделенный по смыслу текст (обычно, текст выделенный курсивом).
|
|
|
Контейнер для внешнего приложения
|
|
|
Группа связанных элементов в форме
|
|
|
Заголовок для элемента
|
|
|
Определяет автономную группу из нескольких элементов (например картинка с подписью)
|
|
|
Нижний колонтитул
|
|
|
Определяет форму пользовательского ввода
|
| -
|
Заголовки HTML разного уровня: , , , , , .
|
|
|
Указывает область head документа.
|
|
|
Блок заголовка
|
|
|
Горизонтальная линия - тематический разделитель.
|
|
|
Корневой элемент. Сообщает браузеру, что данный документ является HTML документом.
|
|
|
Выделяет текст курсивом.
|
|
|
Определяет встроенный фрейм
|
![]()
|
Изображение, картинка.
|
|
|
Поле для ввода
|
|
|
Текст, который был добавлен в новой версии документа.
|
|
|
Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом.
|
|
|
Метка для поля ввода. Указывает на привязку элемента (обычно текста) к полю ввода.
|
|
|
Заголовок элементов
|
|
|
Элемент списка
|
|
|
Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS)
|
|
|
Основной контент
|
|
|
Контейнер для . Определяет пользовательскую карту на изображении
|
|
|
Выделенный текст (обычно с помощью подсветки фона).
|
|
|
Контейнер для списка пунктов меню
|
|
|
Определяет элементы, которые пользователь может вызвать из контекстного меню
|
|
|
Используется для определения мета-данных документа.
|
|
|
Измеритель значений в заданном диапазоне
|
|
|
Контейнер для навигационных элементов
|
|
|
Альтернативный контент для пользователей, отключивших скрипты
|
|
|
Определяет встроенный объект
|
|
|
Определяет нумерованный список
|
|
|
Определяет группу связанных вариантов в выпадающем списке. Дает название группу
|
|
|
Параметр (вариант выбора) в выпадающем списке
|
|
|
Результат вычислений
|
|
Абзац.
|
|
|
Задает параметры для встроенных объектов
|
|
|
Контейнер для нескольких изображений
|
|
|
Предварительно отформатированный текст.
|
|
|
Индикатор выполнения (прогресса)
|
|
|
Цитата в тексте.
|
|
|
Альтернативный текст, если браузер не поддерживает тег .
|
|
|
Аннотация к содержимому тега .
|
|
|
Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов).
|
|
|
Перечеркнутый текст.
|
|
|
Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом).
|
|
|
Определяет скрипт или подключение скрипта из внешнего ресурса.
|
|
|
Раздел
|
|
|
Определяет выпадающий список
|
|
|
Текст шрифтом меньшего размера.
|
|
|
Определяет ресурс для тегов , и .
|
|
|
Строчный элемент.
|
|
|
Текст, выделенный по значению. Обычно отображается полужирным.
|
|
|
Определяет контейнер для определения стилей документа
|
|
|
Отображает текст в виде нижнего индекса.
|
|
|
Заголовок внутри тега
|
|
|
Отображает текст в виде верхнего индекса.
|
| Определяет таблицу.
|
|
|
Определяет область контента в таблице.
|
|
|
Ячейка в таблице .
|
|
Многострочное поле для ввода
|
|
|
Определяет группу строк в нижней части таблицы - нижний колонтитул. Подробнее
|
|
Место, где допускается перенос строки.
|
Устаревшие теги HTML
Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.
Тег
Краткое описание
|
|
Акроним. Используйте тег вместо него
|
|
|
Встроенный апплет. Используйте или вместо него.
|
|
|
Задает цвет, размер, и семейство шрифта всего текста в документе. Используйте вместо него
|
|
|
Текст большего размера. Используйте вместо него
|
|
|
Отцентрованный текст. Используйте вместо него
|
|
|
Список директорий. Используйте |
|
|
Определяет цвет, размер и семейство шрифта. Используйте вместо него
|
|
|
Фрейм внутри . Используйте вместо него
|
|
|
Определяет набор фреймов. Для добавления нескольких встроенных фреймов используйте несколько элементов
|
|
|
Альтернативный текст, если фреймы не поддерживаются
|
|
|
Перечеркнутый текст. Используйте или вместо него
|
|
|
Моноширный текст. Используйте вместо него
|
|
|
Подчеркнутый текст. Используйте вместо него
|
HTML-теги
— основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.
Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.
Все HTML-элементы делятся на пять типов:
- пустые элементы
— , ,
, , , , ![]() , ,
|
|
Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке может быть несколько тегов , так как в зависимости от используемых атрибутов они несут разную информацию.
|
|
|
Индикатор измерения в заданном диапазоне.
|
|
|
Раздел документа, содержащий навигационные ссылки по сайту.
|
|
|
Определяет секцию, не поддерживающую сценарий (скрипт).
|
|
|
Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег .
|
|
|
Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
|
|
|
Контейнер с заголовком для группы элементов .
|
|
|
Определяет вариант/опцию для выбора в раскрывающемся списке , или .
|
|
|
Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
|
|
|
Параграфы в тексте.
|
|
|
Определяет параметры для плагинов, встраиваемых с помощью элемента .
|
|
|
Элемент-контейнер, содержащий один элемент ![]() и ноль или несколько элементов . Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
|
|
|
Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
|
|
|
Индикатор выполнения задачи любого рода.
|
|
|
Определяет краткую цитату.
|
|
|
Контейнер для Восточно-Азиатских символов и их расшифровки.
|
|
|
Определяет вложенный в него текст как базовый компонент аннотации.
|
|
|
Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе , выводится уменьшенным шрифтом.
|
|
|
Отмечает вложенный в него текст как дополнительную аннотацию.
|
|
|
Выводит альтернативный текст в случае если браузер не поддерживает элемент .
|
|
|
Отображает текст, не являющийся актуальным, перечеркнутым.
|
|
|
Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
|
|
|
Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src .
|
|
|
Определяет логическую область (раздел) страницы, обычно с заголовком.
|
|
|
Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в .
|
|
|
Отображает текст шрифтом меньшего размера.
|
|
|
Указывает местоположение и тип альтернативных медиаресурсов для элементов , , .
|
|
|
Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
|
|
|
Расставляет акценты в тексте, выделяя полужирным.
|
|
|
Подключает встраиваемые таблицы стилей.
|
|
|
Задает подстрочное написание символов, например, индекса элемента в химических формулах.
|
|
|
Создаёт видимый заголовок для тега . Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
|
|
|
Задает надстрочное написание символов.
|
| Тег для создания таблицы.
|
|
|
Определяет тело таблицы.
|
| |
|
Создает ячейку таблицы.
|
|
|
Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
|
|
|
Создает большие поля для ввода текста.
|
|
|
Определяет нижний колонтитул таблицы.
|
|
|
Создает заголовок ячейки таблицы.
|
|
|
Определяет заголовок таблицы.
|
|
|
Определяет дату/время.
|
|
|
Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
|
| |
| Создает строку таблицы.
|
|
|
Добавляет субтитры для элементов и .
|
|
|
Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
|
| |
Создает маркированный список.
|
|
|
Выделяет переменные из программ, отображая их курсивом.
|
|
|
Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
|
|
|
Указывает браузеру возможное место разрыва длинной строки.
|
Всем известно, что теги , , , являются презентационными, а следовательно, исходя из парадигмы «структура, представление, поведение» их использование не приветствуется. Куда более привычными представляются элементы , , . Так было на протяжении долгих лет практики разработки. Однако многое поменялось в семантике этих элементов с приходом 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
.
Название блога
- Главная
- Разделы
- Автор
- Контакты
Заголовок
Lorem ipsum...
Второй заголовок
Lorem ipsum...
Третий заголовок
Lorem ipsum...
Копирайты и все такое
Обратите внимание, все структурные теги требуют наличия закрывающего тега. Кстати, закрывающий тег /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 корректно с ними работает и отображает.
На сегодня все. Если стало интересно — “ ” тут я писал о применении новой спецификации на практике. Оставайтесь на связи — будет интересно.
Рекомендуем почитать
Сегодня мы рассмотрим:
Настоящие ценители музыки знают, что для качественного...
Файлы *.xlsx с примерами вычислений формул и функций. А так же бесплатные...
В операционных системах Windows, начиная с Vista, используется встроенный...
Наверх
|
| | |
Тег dialog
