Товаров: 0 (0р.)

Html 5: HTML и HTML5. Описание тегов по основным разделам

Содержание

HTML5 — HTML | MDN

СЕМАНТИКА

Секции и контуры в HTML5
Контурные и секционные элементы в HTML5: <section>, <article>, <nav>, <header>, <footer>, <aside> and <hgroup>.
Использование HTML5 audio и video
<audio> и <video> элементы вставляют и позволяют управлять мультимедиа контентом.
Формы в HTML5
Взгляд на улучшение форм в HTML5: API валидации, несколько новых атрибутов, новые значения для аттрибута type тега <input> и новый элемент <output>.
Новые семантические элементы
Кроме секций, медиа и форм, множество новых тегов, такие как <mark>, <figure>, <figcaption>, <data>, <time>
, <output>, <progress> и <meter>, увеличено количество валидных HTML5 элементов.
Улучшение <iframe>
Использование атрубутов sandbox, seamless, and srcdoc, разработчики могут задать нужный уровень безопасности и осуществивить рендеринг тега <iframe>.
MathML
Позволяет вставлять математические формулы.
Введение в HTML5
Эта статья знакомит вас с тем, как указать на то, что вы используете HTML5 в вашем веб-дизайне или веб-приложении.
HTML5-совместимый парсер
Анализатор, который превращает байты HTML документа в DOM, был расширен и точно определяет поведение, чтобы даже в случае неверного HTML, исход был предсказуемым и одинаков во всех HTML5-совместимых браузерах.
 

СВЯЗЬ

Web Sockets
Позволяет создать постоянное соединение между страницей и сервером и обмениваться данными через него.
Server-sent события
Позволяет серверу отправлять события клиенту, а не по классической парадигме, где сервер может передавать данные только в ответ на запрос клиента.
WebRTC
Эта технология, где RTC создает возможость общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.

ОФФЛАЙН И ХРАНИЛИЩЕ

Оффлайн ресурсы: кеш приложения
Firefox полностью поддерживает спецификацию HTML5 по оффлайн ресурсам. Другие браузеры также имеют поддержку спецификации на должном уровне
Online and offline events
Firefox 3 поддерживает WHATWG online и offline события, которые позволяют приложениям и расширениям обнаружить есть ли активное подключение к Интернет, а также определить, когда соединение портится или улучшается.
WHATWG сессионное или постоянное хранилище (aka DOM Storage)
Постоянное или сессионое храилище позволяет веб-приложениям хранить структурированны данные на стороне клиента.
IndexedDB
Веб-стандарт для хранения значительных количеств структурированных данных в браузере и для быстрого их поиска, используя индексы.
Using files from web applications
Поддержка HTML5 File API была добавлена в Gecko, сделав возможным веб-приложениям иметь доступ к файлам, выбираемых пользователем. Это включает поддержку множества файлов, используя <input> с типом file, имеющих атрибут multiple. Ещё это FileReader.

МУЛЬТИМЕДИА

Использование HTML5 audio и video
<audio> и <video> элементы вставляют и позволяют управлять мультимедиа контентом.
WebRTC
Эта технология, где RTC создает возможость общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.
Использование Camera API
Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.

ГРАФИКА И ЭФФЕКТЫ

Canvas Tutorial
Узнайте о элементе <canvas> и узнайте, как рисовать графику и другие элементы в Firefox.
HTML5 text API для <canvas>
HTML5 text API сейчас поддерживается в <canvas>.
WebGL
WebGL приносит 3D в веб, соответстсвует OpenGL ES 2.0, может использоваться в HTML5 через <canvas>.
SVG
Основанный на XML формат векторных изображений, который может быть непосредственно вставлен в HTML.
 

производительность и интеграция

Web Workers
Позволяет делегировать выполнение JavaScript в фоновые потоки, это позволит предотвратить замедление интерактивных событий.
XMLHttpRequest Level 2
Позволяет извлечь асинхронно некоторые части страницы, что позволяет отобразить динамический контент, изменяющейся время от времени или от действий пользователя. Это технология, лежащая в основе AJAX.
JIT-компилирование движков JavaScript
Новое поколение движков JavaScript гораздо более мощных, приводящих к большей производительности.
History API
Позволяет управлять историей браузера. Это особенно полезно страниц, интерактивно загружающих новую информацию.
contentEditable атрибут: трансформируйте свой сайт в википедию!
HTML5 стандартизировал атрибут contentEditable. Узнайте больше об этой фиче.
Drag and drop
HTML5 drag and drop API позволяет перетаскивать элементы по сайту или на него. Также простейшее API для использования расширениями или иными приложениями.
Управление фокусом в HTML
Поддержка новый атрибутов HTML5 activeElement and hasFocus.
Обработчики протоколов для Web
Вы можете зарегистровать веб-приложения, как обработчики протоколов, используя метод navigator.registerProtocolHandler().
requestAnimationFrame
Контролирует анимации для обеспечения оптимальной производительности.
Fullscreen API
Позволяет использовать весь экран для веб-приложения, без отображения UI браузера.
Pointer Lock API
Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.
Online and offline events
Для того, чтобы построить хорошую оффлайн-совместимые веб-приложения, вы должны знать, когда ваше приложение без сети. Также, вы должны знать, когда ваше приложение снова вернется в сеть.

доступ к устройствам

Использование Camera API
Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.
Touch события
Обрабатывает события, создаваемые нажатиями пользователя по тач скрину.
Геолокация
Позволяет браузерам получать местоположение пользователя.
Определение ориентации устройства
Позволяет среагировать, когда устройство, на котором работает браузер, меняет ориентацию. Это может быть использовано в качестве устройства ввода (например, чтобы сделать игры, которые реагируют на положение устройства) или адаптировать компоновку страницы с ориентацией экрана (вертикальная или горизонтальная).
Pointer Lock API
Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.

стилизация

CSS был расширен, чтобы дать возможность стилизировать элементы наиболее оптимальным способом. Его часто называют CSS3, хотя CSS больше не является монолитной спецификацией и различные модули, не все на уровне 3: некоторые на уровне 1, а некоторые на уровне 4, с промежуточными уровнями.

Новые способы стилизирования фона
Новая возможность задать тень элемента, используя box-shadow или установление множественных фонов.
Лучшие границы
Не только изображения можно использовать для стилизирования границы, используя border-image или его длинные формы записи, а скруглить уголки можно свойством border-radius.
Анимируйте свой стиль
Используйте CSS Переходы, чтобы анимировать изменение состояния элемента или CSS Анимации для анимации частей страницы без запуска событий, вы теперь можете контролировать мобильные элементы на вашей странице.
Улучшение типографии
Авторы могут лучше контролировать типографию. Например, они могут контролировать text-overflow и перенос слов, а также тень текста и его декорированиe. Могут загрузить и применить другой шрифт правилом @font-face.
Новые презентационные макеты
Для того, чтобы улучшить гибкость дизайна, добавили: CSS мульти-колоночный макет и CSS отзывчивый блочный макет.

HTML5 простыми словами

Это — не статья для супер-гуру-вебмастеров. И даже не для начинающих веб-разработчиков. Эта статья задумывалась как памятка об HTML5 для журналистов и аналитиков.

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

Поможет нам в этом HTML5 DOCTOR, сообщество активных последователей HTML5, проповедующих его использование, и в частности, Брюс Лоусон:

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

Вот перечень наиболее часто задаваемых нам вопросов, на которые мы дали ответы неспециализированным языком. Журналисты, пользуйтесь на здоровье! цитирование приветствуется, но не является обязательным )))»

Что такое HTML5?

Зто зависит от того, о чем идет речь. Выражение «HTML5» используют в трех разных значениях:

Спецификация HTML5

Наиболее точным определением понятия «HTML5» будет следующее: это спецификация, разработанная совместно двумя группами, W3C и WHATWG. Существуют разные версии спецификации HTML5.

HTML5 стал необходимой, вынужденной эволюцией языка, на котором пишутся веб-страницы. Он был разработан для написания веб-приложений (так называются динмические интерактивные веб-страницы, на которых можно что-то делать). Его предшественник, HTML4, появившийся в конце 90х, предназначался для веб-страниц (статических документов, связанных между собой гиперссылками и содержащих текст, изображения, формы и т.д. ).

    Ключевые понятия:
  • Его разработали для обеспечения взаимодействия страниц в разных браузерах. Сегодня мы используем различные браузеры (к примеру, на работе у нас может стоят IE, в телефоне — Safari или Opera, а дома -Firefox) и было бы неразумно и досадно, если бы сайт не работал бы в чем-то из них.
  • Все производители браузеров — – Opera, Mozilla (Firefox), Apple (Safari), Microsoft (Internet Explorer), Google (Chrome) — все они сотрудничают между собой, равно как и с еще кучей органицазий и частных лиц: с Netflix, Adobe, IBM, HP, BBC и многим другими.
  • Он разработан, чтобы расширить возможности современного веба, не нарушая при этом работы уже существующих веб-страниц.
  • Он может соревноваться с плагинами типа Microsoft Silverlight и Adobe Flash, которые сами по себе были созданы, чтобы закрыть дыры в окаменелом стандарте HTML4.

HTML5 и его друзья

в дополнение к самому ядру HTML5, WHATWG разработали другие спецификации, такие как Web Workers, Web Sockets, Web Database. Все они дополняют его новыми свойствами и функциями, полезными для приложений, игр и тому подобного.

Многое из их содержимого изначально было частью самого ядра, но по некоторым производственным и организационным причинам было выведено из него. Вся группа вместе называется Web Applications 1.0.

3. Новые «супер-веб-технологии»

Часто большинство людей, налеких от веб-разработки (а часто и не очень сведущие разработчики), говоря «HTML5», подразумевают целый ряд технологий: ядро HTML5, его дополнения — и еще уйму вообще никак не связанных с ними технологий, таких как геолокация (способность вашего браузера «распознавать» ваше местонахождение), ориенацию устройства, события касания, анимацию CSS3 (которая может заменять несложную Flash-анимацию), SVG (способ отображения графики четко и гладко на экране любого размера), и недавно вошедший сюда WebGL, позволяющий использовать популярные библиотеки 3D-графики в веб, внося трехмерность в веб-гарфику и браузерные игры.

Многое из этого разработано W3C, а WebGL, к примеру, создан Khronos Group.

Также важно не забывать, что так называемые «демо-HTML» с самим HTML5 не имеют ровным счетом ничего общего. Например, во многом из Google Doodles используется DHTML — технология HTML 4 начала 2000х.

Зачем придумали HTML5?

HTML4 трещал по швам под напором новых видов приложений. Многие вещи были просто недоступны и требовали плагинов типа Adobe Flash или Microsoft Silverlight. Приходилось идти на всяческие уловки и ухищрения, использовать нестандартные, недокументированные приемы, что было не очень-то надежной основой для сайтов, созданных для заработка.

Как много браузеров поддерживают HTML5?

Смотря как посмотреть. Если исходить из того, что HTML5 произошел от HTML4, то все барузеры поддерживают какие-то свойства HTML5.

А с другой стороны, если вы хотите знать, какие браузеры содержат все свойства ядра HTML5 — то ни один. Они все обеспечивают выполнение некоторых частей спецификации (которая насчитывает более 700 страниц), но ни один не поддерживает все одновременно.

Если отбросить все несущественное, то все современные барузеры примерно в равной степени поддерживают HTML5, хоть они и добавляют поддержку тех или иных свойств в разное время.

Кто является движущей силой HTML5?

Началось все в 2004 году, в Opera, под руководством Яна Хиксона. Постепенно присоединились и другие браузеры. Хиксон ушел из Оперы в Google, где продолжает работать над спецификацией.

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

Кто пользуется HTML5?

Множество людей и компаний: Boston Globe Newspaper; Nationwide Building Society, Yell.com и сотни других. На HTML5gallery.com собрано множество сайтов, применяющих HTML5-технологии.

Когда будет завершена работа над HTML5?

Возможно, в 2012 году. А может и в 2022. Это не так важно, важно другое: он сегодня уже поддерживается браузерами, а, следовательно, мы можем использовать его уже сегодня.

Сказать, что мы не можем пользоваться HTML5, потому что его развитие не завершено — это все равно, что сказать, что мы не можем говорить на русском языке, потому что он все еще развивается.

Правда ли, что HTML5 несовместим с Internet Explorer?

Абсолютная ерунда. IE9 хорошо поддерживает HTML5. В более старые браузеры можно добавить поддержку некоторых API с помощью JavaScript -технологии polyfilling, а также плагинов Flash и Silverlight. Элемент canvas может работать некорректно в версиях IE ниже 9. В основном, причиной проблем в старых браузерах является медленный движок JavaScript. Для отображения видео в старых браузерах можно использовать резервный Flash-вариант.

Стоит отметить, что многие возможности HTML5, такие, как атрибут contenteditable, позволяющий пользователю редактировать содержимое объекта, были придуманы Microsoft и включены уже в IE5.

Правда ли, что HTML5 предназначен для мобильных устройств?

Совершенно нет. В основе HTML5 лежат определенные принципы разработки, один из которых гласит о повсеместном его применении:

«Элементы должны разрабатываться для повсеместного использования… Элементы, по возможности, должны работать независимо от платформы, устройства и носителя.»

С другой стороны, есть особенности HTML5, которые особенно полезны в свете использования мобильных устройств. Если рассматривать «настоящий» HTML5, очень полезной окажется, к примеру, возможность продолжать работать с сайтом в оффлайне с помощью технологии Application Cache (“Appcache”).

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

Если рассматривать HTML5 в значении «новые супер-веб-технологии», то огромным плюсом является геолокация.

Вытеснит ли HTML5 Adobe Flash?

Нет — по крайней мере, я на это надеюсь. Многие годы Flash оставался единственной возможностью внедрить видео на страницу. Теперь, с появлением HTML5, появилось соперничество, в котором будут развиваться обе технологии, что просто замечательно для разработчиков.

Apple приняли решение не включать поддержку Flash своими iOS устройствами, что дает огромный толчок видео HTML5. Однако, стоит заметить, что iOS — не самая лучшая платформа и для HTML5.

Flash в любом случае остается полезным кросс-браузерным инструментом. к тому же, следует понимать, что Flash — это больше, чем просто видео. Некоторые простые его функции, используемые в играх, перехвачены HTML5 canvas, а часть примитивных анимаций, для которых он ранее использовался, перекочевала в CSS3. Однако, из соображений удобства создателей тонкой анимации, используемой в играх и мультфильмах, конечно, лучше пользоваться Flash , в котором куда более удобный интерфейс, упрощающий разработчикам многие рабочие моменты. Со временем, когда будут разработаны удобные оболочки для работы с canvas это изменится, но еще не сегодня и не завтра.

Перевод — Дежурка. Автор оригинальной статьи — Bruce Lawson, один из соавторов книги Introducing HTML5.



Комментарии

Оставить ответ

Похожие статьи

Случайные статьи

Синтаксис HTML5 | htmlbook.ru

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

Элементы HTML

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

Элементы по типу

Пустые элементы

К ним относятся элементы, у которых нет закрывающего тега: <area>, <base>, <br>, <col>, <command>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source>, <track>, <wbr>.

Необрабатываемые текстовые элементы

Предназначены для вывода скриптов или стилей, имеющих синтаксис отличный от HTML: <script>, <style>.

RCDATA

Эти элементы могут содержать любой текст или спецсимволы, за исключением нестандартных спецсимволов, которые называются сомнительным амперсандом, например: &copi; или &#38T. К этой группе элементов относятся <textarea> и <title>.

Инородные элементы

Элементы, относящиеся к MathML или SVG.

Обычные элементы

Все остальные элементы, которые не входят в предыдущие группы.

Элементы по назначению

Корневой элемент

Элемент <html>.

Метаданные документа

<head>, а также элементы, которые располагаются внутри него.

Скрипты

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

Структурные элементы

Элементы, управляющие основными разделами веб-страницы, вроде <body>, <section>, <nav>, <article>, <aside> и др.

Группирование контента

Элементы, обрамляющие текст, списки, изображения.

Текст

Элементы, изменяющие вид текста, например, делающие его жирным или курсивным, а также выделяющие текст по смыслу — аббревиатура, цитата, переменная, код и т.д.

Рецензирование

Элементы <ins> и <del> показывающие редактирования в документе.

Внедряемый контент

Элементы, вставляемые на страницу в виде разных объектов — изображения, видео, аудио и др.

Табличные данные

Элементы для создания и управления видом таблиц.

Формы

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

Интерактивные элементы

Специальные виджеты, с помощью которых пользователь может получать дополнительную информацию или управление.

Ссылки

Элементы <a> и <area>.

Подобное группирование условно и может принимать другой вид, потому что одни и те же элементы могут принадлежать разным группам.

Теги

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

Рис. 1. Тег <a> с атрибутом href

Закрывающий тег похож на открывающий, но содержит слэш (/) внутри угловых скобок.

Пустые элементы не имеют закрывающего тега и содержимого (рис. 2).

Рис. 2. Пустой тег <img>

Атрибуты тегов расширяют возможности самих тегов и позволяют гибко управлять различными настройками отображения элементов веб-страницы. Общее количество атрибутов достаточно велико, но их значения, как правило, можно сгруппировать по разным типам, например, задающих цвет, размер, адрес и др. Например, элемент <img> добавляет на веб-страницу изображение, при этом адрес графического файла мы указываем через атрибут src.

Доктайп

<!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа) для того, чтобы браузер понимал, с какой версией HTML он имеет дело. Если доктайп не указан, браузеры переходят в режим совместимости, в котором не работают многие возможности HTML5, а также возникают ошибки с отображением документа.
Доктайп не чувствителен к регистру и содержит всего два слова:

<!DOCTYPE html>

Это ключевой элемент и обычно он располагается в первой строке кода.

Комментарии

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

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

Необязательные теги

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

Табл. 1. Необязательные теги
ТегУсловие
<html> 
</html> 
<head>Если внутри имеются другие элементы.
</head> 
<body>Если пустой, а также содержит что-то кроме пробела или комментария.
</body> 
</li>Если после элемента следует <li> или он последний у родителя.
</dt>Если после элемента следует <dt> или <dd>.
</dd>Если после элемента следует <dd>, <dt> или он последний у родителя.
</p>Если после элемента следует <address>, <article>, <aside>, <blockquote>, <dir>, <div>, <dl>, <fieldset>, <footer>, <form>, <h2>,…,<h6>, <header>, <hgroup>, <hr>, <menu>, <nav>, <ol>, <p>, <pre>, <section>, <table>, <ul>.
</rt>Если после элемента следует <rt> или <rp>.
</rp>Если после элемента следует <rt> или <rp>.
</optgroup>Если после элемента следует <optgroup> или он последний у родителя.
</option>Если после элемента следует <option>, <optgroup> или он последний у родителя.
<colgroup>Если первым внутри идёт <col> и не следует перед другим элементом <colgroup>.
</colgroup> 
</thead>Если после элемента следует <tbody> или <tfoot>.
<tbody>Если первым внутри идёт <tr> и не следует перед <tbody>, <thead> или <tfoot> у которых опущен закрывающий тег.
</tbody>Если после элемента следует <tbody> или <tfoot> или он последний у родителя.
</tfoot>Если после элемента следует <tbody> или он последний у родителя.
</tr>Если после элемента следует <tr> или он последний у родителя.
</td>Если после элемента следует <td>  или <th> или он последний у родителя.
</th>Если после элемента следует <td>  или <th> или он последний у родителя.

Если открывающий тег содержит один или несколько атрибутов, то тег должен указываться обязательно.

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

  1. Необязательная метка порядка байтов (byte order mark, BOM).
  2. <!DOCTYPE html>.
  3. <title>.

До и после доктайпа разрешается вставлять любое количество пробелов или комментариев. Таким образом, доктайп не обязательно должен располагаться в первой строке кода.

В примере 1 показан минимальный код HTML для вывода традиционного приветствия.

Пример 1. Минимальный HTML

HTML5IECrOpSaFx

<!DOCTYPE html>
<title> </title>
Привет, мир!

Метка порядка байтов состоит из кода символа U+FEFF в начале  документа, где она используется для определения кодировки. Рекомендуется убирать этот символ, поскольку его наличие приводит к ошибкам отображения документа в некоторых браузерах. Для этого можно использовать редактор Notepad++, в меню «Кодировки» выбрать пункт «Кодировать в UTF-8 (без BOM)» (рис. 3).

Рис. 3. Выбор кодировки

Полезные ссылки

HTML5 | htmlbook.ru



HTML5 | htmlbook.ru

Определяет содержание сайта вроде новости, статьи, записи блога, форума или др.

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

Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице.

Указывает фрагмент текста, который должен быть изолирован от изменения направления вывода текста.

Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства.

Создает команду в виде переключателя, флажка или обычной кнопки.

Создает список вариантов, которые можно выбирать при наборе в текстовом поле.

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

Используется для загрузки и отображения объектов.

Содержит описание для тега <figure>.

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

Определяет «подвал» сайта или раздела.

Определяет «шапку» сайта или раздела.

Используется для группирования заголовков веб-страницы или раздела.

Используется для генерации пары ключей — закрытого и открытого.

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

Помечает текст как выделенный.

Отображает список меню.

Используется для вывода значения в некотором известном диапазоне.

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

Определяет область для вывода, преимущественно с помощью скриптов.

Используется для отображения прогресса завершенности задачи.

Используется для вывода текста в браузерах, которые не поддерживают тег <ruby>.

Добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby>.

Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста.

Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др.

Вставляет звуковой или видеофайл для тегов <audio> и <video>.

Указывает заголовок для тега <details>, по которому можно щелкать для разворачивания/сворачивания информации.

Помечает текст внутри тега как дату, время или оба значения.

Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице.

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

О сайте

Помощь

Копирование материалов

Борьба с ошибками

Технологии

Поисковый плагин

Основные разделы

Статьи

Блог

Практикум

Цифровые книги

Форум

HTML

Самоучитель HTML

XHTML

Справочник по HTML

HTML5

CSS

Самоучитель CSS

Справочник по CSS

Рецепты CSS

CSS3

Сайт

Вёрстка

Макеты

Веб-сервер

htmlbook.ru использует Друпал хостинг it-patrol

© 2002–2020 Влад Мержевич, по всем вопросам пишите по адресу [email protected]

Подпишитесь на материалы сайта по RSS

Энциклопедия HTML5 » Сайт HTML-5.ru

Энциклопедия HTML5

22 Июн 2015

Тег footer в языке HTML5 Тег footer в HTML5, обрамляет подвал, на странице сайта. В тегах <footer> </footer> оычно содержится инфрмация относящаяся к самому сайту, а не к основному контенту, например: правовая информация (копирайты), имя автора, название сайта и/или компании, телефон и/или адрес компании и т.п. Приведём пример расположения тегов footer в типичном коде шаблона… Читать далее

22 Июн 2015

Тег aside в языке HTML5 Тег aside в HTML5, обрамляет боковую панель (сайдбар), на странице сайта. Тегами <aside> </aside> оычно обрамляют блок виджетов на сайте. В качестве виджетов могут выступать: блок категориев, меток, последних записей, последних комментариев, популярных страниц, поисковая строка и т.п. Приведём пример возможного расположения тегов aside в типичном коде шаблона страницы, созданной… Читать далее

22 Июн 2015

Тег section в языке HTML5 Тег section в HTML5, может обрамлять повторяющиеся элементы (разделы), на странице сайта. Данный тег довольно сложен для понимания, попробуем разобраться когда же его применять. Теги <section> </section> могут обрамлять комментарии на сайте, ответы темы на форуме, анонсы (цитаты) новостей или постов на главной странице, страниц категориев, меток и т.д. Также… Читать далее

16 Июн 2015

Тег nav в HTML5 Тег nav в HTML5, обозначет основное меню сайта (панель навигации). Обычно тегами <nav> </nav> обрамляют основное меню страницы сайта, которое расположено сразу под шапкой сайта. В меню nav, обычно располагают ссылки на важные страницы сайта, это могут быть страницы контактов, о компании, каталог, магазин, главная, описание услуг, новостей и т.д. Рассмотрим… Читать далее

16 Июн 2015

Тег header в HTML5 Тег header в HTML5, обозначет шапку сайта. Обычно тегами <header> </header> обрамляют шапку страницы сайта. В шапке страницы сайта чаще всего располагают заголовок (девиз, слоган компании), логотип сайта (компании), контактную информацию (телефоны, часы работы). В шапке сайта можно встретить ссылки на: карту проезда, заказать звонок, поисковую строку и различные элементы типа… Читать далее

Страница 1 из 512345»

HTML и HTML5 – в чем разница?

HTML и HTML5 – в чем разница?

От автора: язык гипертекстовой разметки или просто HTML – стандартный язык для создания сайтов. Как и все в мире технологий, HTML с момента появления в конце 1980-х очень быстро развивался. Новичкам в программировании следует учить последнюю версию языка – HTML5. Однако глубокое понимание эволюции языка поможет новичкам и профи оценить прошлое, настоящее и будущее веб-разработки.

Основы HTML

HTML код указывает браузеру, как рендерить контент. Разметка представляет собой базовую структуру страниц. На протяжении десятилетий HTML считался краеугольной технологией в интернете наряду с CSS и JS. Стандарты HTML и CSS регулируются консорциумом всемирной сети.

Из названия следует, что HTML нельзя назвать языком программирования. Это язык разметки, используемый для организации данных в интернете. HTML документы состоят из HTML элементов, представленных в виде тегов. Теги записываются в угловых скобках и разделяют контент на категории. Простой пример HTML структуры с сообщением «Hello World» выглядит следующим образом:

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

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

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

<html> <body> <p>Hello World</p> </body> </html>

<html>

    <body>

        <p>Hello World</p>

    </body>

</html>

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

История HTML

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

Последнее крупное обновление с 1990-х было направлено на интернационализацию языка, а также на то, чтобы упростить программистам со всего мира возможности для улучшения HTML. Как часть этих усилий, в качестве официальной кодировки HTML была принята Universal Coded Character Set. Этот шаг улучшил отображение множества символов и акцентов, которые есть в человеческих языках и диалектах.

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

HTML или HTML5: эволюция веб-разработки

Интернет сейчас сильно отличается от того, что был в 1999 году, когда вышло последнее крупное обновление HTML 4.01. Сейчас есть такие технологии, которые мы не могли себе представить на рубеже веков. Смартфоны, планшеты и другие мобильные устройства – это новые вызовы для инженеров и разработчиков ПО. Ускоряющаяся глобализация сделала стандартизацию интернет технологий приоритетной задачей для всех с долей в мировой экономике. Мировое потребление интернета растет год за годом, и используемые технологии по прогнозам будут развиваться все быстрее и быстрее.

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

HTML – плод совместных усилий World Wide Web Consortium или W3C и Web Hypertext Application Technology Working Group или WHATWG. В 2006 организации объединились, чтобы снизить зависимость от плагинов, улучшить обработку ошибок и заменить скрипты на разметку. Как следствие, HTML5 сильно упростил процесс создания веб-приложений.

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

Постепенное внедрение

HTML4 являлся стандартом на протяжении 15 лет, поэтому многие разработчики до сих пор им пользуются. Браузеры еще долго будут поддерживать этот стандарт. Старые браузеры могут «игнорировать» новый HTML5 код при рендеринге контента. По факту все современные браузеры хорошо поддерживают HTML5 спецификацию: Chrome, Firefox, Opera и Safari. HTML5 постоянно развивается, поэтому браузеры в новых версиях добавляют поддержку новых свойств. К нашему счастью, все основные браузеры одновременно добавляют поддержку новых свойств, как только те выходят.

Можете проверить свой браузер на поддержку HTML5 с помощью HTML5test.

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

HTML или HTML5: что нового?

Если HTML устраивал всех больше десяти лет, зачем нужно было обновляться в 2014? Самое значимое различие между старыми версиями HTML и HTML5 заключается в интеграции видео и аудио в спецификации языка. Кроме того, в HTML5 вошли следующие обновления:

были удалены устаревшие элементы, такие как center, font и strike;

улучшение правил парсинга сделало его более гибким и совместимым;

появились новые элементы video, time, nav, section, progress, meter, aside и canvas;

новые атрибуты для инпутов, в том числе email, URL, dates и times ;

новые атрибуты, в том числе charset, async и ping;

новые API с офлайн кэшированием и поддержкой drag-and-drop и т.д;

поддержка векторной графики без сторонних программ типа Silverlight или Flash;

поддержка MathML улучшила отображение математических обозначений;

благодаря JS Web worker API, JS теперь может работать в фоновом режиме;

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

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

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

глобальные атрибуты типа tabindex, repeat и id теперь можно применять ко всем элементам.

На изображении ниже показаны основные свойства HTML5, разбитые по категориям.

Какие преимущества для пользователей есть в HTML5 по сравнению с HTML?

Мы разобрались с технической стороной вопроса, а какие преимущества несет HTML5 для обычных пользователей? Ниже я составил список этих нововведений, которые вы могли заметить или не заметить:

часть данных можно хранить на устройстве пользователя, т.е. приложения могут работать без интернет соединения;

веб-страницы могут отображать больше шрифтов с более широким диапазоном цветов, теней и других эффектов;

объекты на странице могут двигаться вместе с курсором;

интерактивные медиа типа игр можно запускать прямо в браузерах без подключения дополнительного ПО или плагинов. Для аудио и видео теперь также не нужны плагины;

браузеры могут отображать интерактивную 3D графику с помощью графического процессора компьютера.

Отбросив необходимость в сторонних плагинах, HTML5 ускоряет доставку более динамичного контента.

Какие преимущества для веб-разработчиков есть в HTML5 по сравнению с HTML?

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

1. Одинаковая обработка ошибок

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

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

В жизни HTML ошибки неизбежны. По данным Rebuildingtheweb в 90% страниц присутствуют ошибки в коде. Обработчик ошибок просто необходим для правильного отображения сайтов. Как следствие, закодированная обработка ошибок экономит разработчикам браузеров много времени и денег. Нельзя занижать преимущества четко заданного алгоритма парсинга.

2. Улучшенная поддержка свойств для веб-приложений

Другой целью HTML5 было – заставить браузеры работать, как платформы приложений. Сайты стали намного сложнее, поэтому разработчики научились обходить расширения браузеров и другие серверные технологии. HTML5 позволяет контролировать производительность сайта. Множество хаков на Flash и JS, используемых в HTML4, вошли в новую спецификацию языка. Эти изменения обеспечивают более плавный и быстрый пользовательский опыт.

3. Усовершенствованная семантика элементов

Семантические роли некоторых существующих элементов улучшились, что сделало код более интуитивным. Новые элементы section, header, article и nav могут заменить большую часть тегов div, которые усложняют процесс поиска ошибок.

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

Мобильные устройства – сплошная головная боль для веб-разработчиков. Их быстрое распространение за последние десять лет заставило улучшить HTML стандарты. Пользователи хотят открывать веб-приложения откуда угодно в любое время и на любом устройстве. Разработчики были вынуждены подчиниться требованиям рынка. HTML5 упрощает мобильную поддержку, так как он заточен под смартфоны и планшеты.

Другие заметные улучшения

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

1. Поддержка пользовательских data-атрибутов

До выхода HTML5 добавлять в теги пользовательские атрибуты было рискованно. В HTML4 пользовательские атрибуты не мешали полному рендерингу страниц, но документы с ними не проходили валидацию, что приводило к рендерингу в режиме совместимости. Атрибут data-* решил эту проблему.

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

2. Больше никаких кук

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

Объект localStorage принадлежит к глобальному пространству имен window, то есть он доступен из любой точки скрипта. В локальное хранилище можно помещать только строки, однако с помощью методов JSON.stringify() и JSON.parse() можно с легкостью помещать туда все новые данные. Есть и другой объект sessionStorage, позволяющий хранить данные до тех пор, пока пользователь не закрыл окно браузера.

3. Автофокус на полях формы

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

4. В тегах script and link больше не нужно указывать атрибут type

В HTML5 подразумевается, что теги script и link ссылаются на скрипты и стили, то есть необходимость в использовании атрибута type отпала.

Будущее HTML и HTML5

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

На начало 2017 года веб-разработчики еще могут обойтись хорошим знанием старых HTML спецификаций. Однако если вы хотите продолжать свою карьеру и не хотите изучать HTML5, вы сделаете себе только хуже. Чего только стоит встроенная поддержка видео и аудио по сравнению с 4.1.

Источник: https://www.keycdn.com/

Редакция: Команда webformyself.

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

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

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

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Разделы документа в HTML5

Структура документа В HTML5 состоит из разделов и подразделов. Разделы могут быть представлены в виде схем документа по аналогии с оглавлением. Каждый секционный элемент имеет свою собственную схему, поэтому каждый раздел можно начинать с заголовка <h2>.

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

Схема состоит из списка одного или более вложенных разделов. Раздел (секция) представляет собой контейнер, который соответствует некоторым узлам в исходном дереве DOM. Раздел в данном случае не является элементом <section>, он просто подразумевает его концепцию. Каждый раздел может иметь один заголовок, связанный с ним, а также любое количество дополнительных вложенных разделов.

Также отдельно выделяют корневые секционные элементы. Они отличаются от секционных элементов, но могут также иметь схему.

Элементы, формирующие разделы HTML-документа

1. Элемент <body>

Категории контента: корневой секционный.

Контекст, в котором этот элемент может быть использован: как второй элемент в элементе <html>.

Пропуск тегов: начальный тег <body> может быть опущен, если элемент пуст, или если первое, что внутри элемента не является пробелом или комментарием, за исключением случаев, когда первое, что идет за тегом <body> являются элементы <meta>, <link>, <script> или <style>.

Закрывающий тег </body> может быть опущен, если перед ним нет комментария.

<!DOCTYPE html>
  <title>Тест</title>
   <h2>Тестовая страница</h2>

Элемент <body> представляет содержимое документа.

Для элемента доступны ‎глобальные атрибуты, а также атрибуты, приведенные в таблице ниже.

Элемент <body> предоставляет в качестве атрибутов ряд обработчиков событий объекта Window — onblur, onerror, onfocus, onload, onresize и onscroll.

Таблица 1. Атрибуты элемента <body>
АтрибутОписание, принимаемое значение
onafterprintСобытие, срабатывающее после отправки страницы на печать или после закрытия окна печати.
onbeforeprintСобытие, срабатывающее перед отправкой страницы на печать.
onbeforeunloadСобытие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу.
onhashchangeСобытие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2.
onlanguagechangeСобытие срабатывает при изменении предпочтительных языков.
onmessageСобытие происходит, когда сообщение получено через источник события.
onofflineСобытие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало.
ononlineСобытие вызывается браузером в том случае, когда соединение с интернет возобновилось.
onpagehideСобытие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д.
onpageshowСобытие происходит, когда пользователь переходит на веб-страницу, после события onload.
onpopstateСобытие срабатывает, когда пользователь просматривал историю сеанса.
onrejectionhandledСобытие возникает, когда Promises отклоняются.
onstorageСобытие срабатывает при изменении места хранения.
onunhandledrejectionСобытие используется для обработки необработанных событий отказа.
onunloadСобытие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера.

В этом примере на странице обновляется индикатор, показывающий, находится ли пользователь в сети:

<!DOCTYPE html>
<html>
  <head>
    <title>Онлайн или офлайн?</title>
    <script>
      function update(online) {
        document.getElementById('status').textContent =
        online ? 'Онлайн' : 'Офлайн';
      }
    </script>
  </head>
  <body ononline="update(true)"
    onoffline="update(false)"
    onload="update(navigator.onLine)">
    <p>Вы: <span>(Статус неизвестен)</span></p>
  </body>
</html>

2. Элемент <article>

Категории контента: потоковое содержимое, секционное содержимое, видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

Элемент <article> представляет собой законченное или автономное произведение в документе, странице, приложении или сайте. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>.

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

<article>
    <header>
        <h3><a href="https://herbert.io">Короткая заметка о ношении шорт</a></h3>
        <p>Опубликовано в пятницу, 13 марта 2020 Патриком Люком.
            <a href="https://herbert.io/short-note/#comments">6 комментариев</a></p>
    </header>
    <p>Попутчик задал интересный вопрос: почему вы носите шорты, а не длинные брюки? Человек носил брюки-кюлоты как время, поэтому я считал вопрос двусмысленным по своей природе, но я попытался дать честный ответ, несмотря на сомнительную одежду спрашивающего.</p>
    <p>Короткий ответ: мне нравится носить шорты, длинный ответ ...</p>
    <p><a href="https://herbert.io/short-note/">Продолжить чтение: Короткая заметка о ношении шорт</a></p>
</article>
<section>               
      <article>
        <h3><a href="">Весна приходит (и уходит) в графстве Суссекс</a></h3>        
        <p>Вчера я присоединился к Brooklyn Bird Club для нашей ежегодной поездки в Западный Нью-Джерси, в частности, в Hyper Humus, относительно недавно обнаруженную «горячее место».</p>
      </article>

      <article>
        <h3><a href="">Как стать бердвотчером?</a></h3>        
          <p>Птицы — почти единственная связь современного городского человека с дикой природой. Благодаря бердвотчингу вы, скорее всего, начнете больше путешествовать, причем по самым неожиданным местам. Если у вас есть дети, можно изучать птиц вместе — это идеальное семейное хобби. </p>
      </article>  
  
    <nav>
      <a href="">&laquo; Предыдущие записи</a>
    </nav>
  </section>

Для элемента доступны ‎глобальные атрибуты.

3. Элемент <section>

Категории контента: потоковое содержимое, секционное содержимое, видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

Элемент <section> представляет общий раздел документа или приложения, группируя тематическое содержимое. Каждый раздел должен быть идентифицирован, обычно путем включения заголовка (элемент <h2-h6>) в качестве дочернего элемента <section>.

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

Авторам рекомендуется использовать элемент <article> вместо элемента <section>, когда контент завершен или самодостаточен.

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

<article>
  <header>
    <h3>Яблоки</h3>
    <p>Вкусные, восхитительные фрукты!</p>
  </header>
  <p>Яблоко является плодом яблони.</p>
  <section aria-label="Красные яблоки">
    <h4>Ред Делишес</h4>
    <p>Эти ярко-красные яблоки чаще всего встречаются во многих супермаркетах.</p>
  </section>
  <section aria-label="Зеленые яблоки">
    <h4>Гренни Смит</h4>
    <p>Эти сочные зеленые яблоки станут отличной начинкой для яблочных пирогов.</p>
  </section>
</article>

Для элемента доступны ‎глобальные атрибуты.

<article> внутри <section>

Можно создавать родительские элементы <section> с вложенными элементами <article>, в которых есть один или несколько элементов <article>. Не все страницы должны быть устроены именно так, но это допустимый способ вложения элементов. Например, основная область контента страницы содержит два блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждую статью одной тематики внутрь элемента <section>

<section>
  <h2>Заметки о природе</h2>
    <article>
      <h3>...</h3>
      <p>...</p>
    </article>
    <article>
      <h3>...</h3>
      <p>...</p>
    </article>
</section>
<section>
  <h2>Исторические заметки</h2>
    <article>
      <h3>...</h3>
      <p>...</p>
    </article>
    <article>
      <h3>...</h3>
      <p>...</p>
    </article>
</section>

4. Элемент <nav>

Категории контента: потоковое содержимое, секционное содержимое, видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

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

В случаях, когда содержимое элемента <nav> представляет список элементов, рекомендуется использовать разметку списка. Не заменяет теги <ul> или <оl>, он просто их обрамляет.

Не все группы ссылок на странице должны быть обернуты элементом <nav> — этот элемент предназначен главным образом для разделов, состоящих из основных навигационных блоков. В частности, нижние колонтитулы обычно имеют краткий список ссылок на различные страницы сайта, такие как условия обслуживания, домашняя страница и страница об авторских правах. Для таких случаев достаточно одного элемента <footer>.

<body>
  <h2>Вики-центр</h2>
  <nav>
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/events">Текущие события</a></li>
      ...
    </ul>
  </nav>
  <article>
    <header>
      <h3>Афиша мероприятий</h3>
    </header>
    <nav>
      <ul>
        <li><a href="#public">Лекции</a></li>
        <li><a href="#practice">Практические занятия</a></li>
        ...
      </ul>
    </nav>
    <div>
      <section>
        <h3>Лекции</h3>
        <p>...</p>
      </section>
      <section>
        <h3>Практические занятия</h3>
        <p>...</p>
      </section>
      ...more...
    </div>
    <footer>
      <p><a href="?edit">Редактировать</a> | <a href="?delete">Удалить</a> | <a href="?rename">Переименовать</a></p>
    </footer>
  </article>
  <footer>
    <p><small>© 2020 Вики-центр</small></p>
  </footer>
</body>

В качестве элементов панели навигации можно использовать не только элементы списков:

<nav>
  <p><a href="">...</a></p>
  <p><a href="">...</a></p>
</nav>

Также можно добавлять заголовки внутрь элемента:

<nav>
  <h3>...</h3>
    <ul>
      <li><a>...</a></li>
      <li><a>...</a></li>
      <li><a>...</a></li>
    </ul>
</nav>

Для элемента доступны ‎глобальные атрибуты.

5. Элемент <aside>

Категории контента: потоковое содержимое, секционное содержимое, видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

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

<aside>
  <h3>Швейцария</h3>
  <p>Швейцария, страна в центре географической Европы, не имеющая выхода к морю, не присоединилась к геополитическому Европейскому союзу, хотя она подписала ряд европейских договоров.</p>
</aside>
<body>
  <header>
    <h2>Мой замечательный блог</h2>
    <p>Мой слоган</p>
  </header>
  <aside>
    <nav>
      <h3>Мой блогролл</h3>
      <ul>
        <li><a href="https://blog.example.com/">Интересная ссылка</a>
      </ul>
    </nav>
    <nav>
      <h3>Архивы</h3>
      <ol reversed>
        <li><a href="/last-post">Моя последняя запись</a>
        <li><a href="/first-post">Моя первая запись</a>
      </ol>
    </nav>
  </aside>
  <aside>
    <h3>Мой Twitter</h3>
    <blockquote cite="https://twitter.example.net/t31351234">
      Я в отпуске, пишу для своего блога.
    </blockquote>
    <blockquote cite="https://twitter.example.net/t31219752">
      Я скоро пойду в отпуск.
    </blockquote>
  </aside>
  <article>
    <h3>Моя последняя запись</h3>
    <p>Это моя последняя запись.</p>
    <footer>
      <p><a href="/last-post" rel=bookmark>Ссылка</a>
    </footer>
  </article>
  <article>
     <h3>Моя первая запись</h3>
    <p>Это моя первая запись.</p>
    <aside>
        <h2>Публикация</h2>
        <p>Пока я думаю об этом, я хотел бы сказать кое-что о публикациях. Опубликовывать статьи - это весело!</p>
    </aside>
    <footer>
      <p><a href="/first-post" rel=bookmark>Ссылка</a>
    </footer>
  </article>
  <footer>
    <nav>
      <a href="/archives">Архивы</a> —      <a href="/about">Обо мне</a> —      <a href="/copyright">Copyright</a>
    </nav>
  </footer>
</body>

Для элемента доступны ‎глобальные атрибуты.

6. Элементы <h2>, <h3>, <h4>, <h5>, <h5> и <h6>

Категории контента: потоковое содержимое, секционное содержимое, видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

Элементы <h2-h6> представляют заголовки для своих разделов. Эти элементы имеют ранг, определяемый числом в их имени. Элемент <h2> имеет наивысший ранг, элемент <h6> имеет наименьший ранг, а два элемента с одинаковым именем имеют одинаковый ранг. Используйте ранг элементов заголовка, чтобы создать схему документа.

Элементы <h2 – h6> не должны использоваться для разметки подзаголовков, альтернативных заголовков и слоганов, если только они не предназначены для заголовка нового раздела или подраздела.

<body>
<h2>Заголовок верхнего уровня</h2>
 <section><h3>Заголовок второго уровня</h3>
  <section><h4>Заголовок третьего уровня</h4>
   <section><h5>Заголовок четвертого уровня</h5>
    <section><h5>Заголовок пятого уровня</h5>
     <section><h6>Заголовок шестого уровня</h6>
     </section>
    </section>
 </section>
</section>
</section>
</body>

Для элементов доступны ‎глобальные атрибуты.

Категории контента: потоковое содержимое, видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

Элемент <header> представляет вводное содержимое для его ближайшего предка — элемента <main> или элемента из категории секционного содержимого или корневого секционного элемента. Элемент <header> обычно содержит группу вводных или навигационных элементов.

Если элемент <header> является ближайшим предком элемента <body> и не находится внутри <main>, он представляет вводное содержимое для страницы в целом.

Элемент <header> обычно содержит заголовок раздела (элемент <h2–h6>), но это не обязательно. Элемент <header> также можно использовать как элемент-обертку для оглавления раздела, формы поиска или любых уместных логотипов. В документе может содержаться одновременно несколько элементов <header> и они могут располагаться в любой части страницы.

Элемент <header> не является секционным содержимым, он не вводит новый раздел.

<article>
  <header>
    <h2>Flexbox: Полное руководство</h2>
    <aside>
      <header>
        <h3>Автор: Wes McSilly</h3>
        <p><a href="./wes-mcsilly/">Связаться с ним!</a></p>
      </header>
      <p>Эксперт в Flexbox.</p>
    </aside>
  </header>
  <p><ins>Руководство о Flexbox должно было быть здесь, но оно оказалось, что Wes не был экспертом по Flexbox.</ins></p>
</article>

Элемент <header> может содержать только <header> или <footer>, если они сами находятся внутри <article>, <aside>, <nav> или <section>.

Категории контента: потоковое содержимое, видимое содержимое.

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

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

Элемент <footer> представляет нижний колонтитул для его ближайшего предка элемента <main>, или элемента из категории секционного содержимого или корневого секционного элемента.

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

...
  <footer>
    <nav>
      <section>
        <h3>Статьи</h3>
        <p><img src="images/somersaults.jpeg" alt=""> Посетить спортзал с нашим классом сальто! Наш учитель Джим проведет вас через шаги в этой статье из двух частей. <a href="articles/somersaults/1">Часть 1</a> · <a href="articles/somersaults/2">Часть 2</a></p>
        <p><img src="images/crisps.jpeg"> Чипсы закончились, теперь осталась только картошка. Что вы можете с этим сделать? <a href="articles/crisps/1">Читать далее...</a></p>
      </section>
      <ul>
        <li> <a href="/about">О нас...</a>
        <li> <a href="/feedback">Связаться с нами!</a>
        <li> <a href="/sitemap">Карта сайта</a>
      </ul>
    </nav>
    <p><small>© 2020 The Snacker — <a href="/tos">Условия обслуживания</a></small></p>
  </footer>
</body>

В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>. Также, <footer> можно поместить в элемент <blockquote>, чтобы указать источник цитирования.

По материалам Sections

HTML5 — HTML | MDN

СЕМАНТИКА

Секции и контуры в HTML5
Контурные и секционные элементы в HTML5:
,
,
Использование HTML5 аудио и видео
и элементы вставляют и позволяют управлять мультимедиа контентом.
Формы в HTML5
Взгляд на улучшение форм в HTML5: API-валидации, несколько новых атрибутов, новые значения для аттрибута type тега и новый элемент .
Новые семантические элементы
Кроме секций, медиа и форм, множества новых тегов, таких как ,
,
, , , , и , увеличено количество валидных элементов HTML5.
Улучшение