Разное

Семантические элементы html5: Что такое семантическая вёрстка и зачем она нужна — Блог HTML Academy

31.12.1986

Содержание

Что такое семантическая вёрстка и зачем она нужна — Блог HTML Academy

Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном div и span) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.

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

Почему семантика важна

Чтобы сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится — где заголовок, списки или изображения. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.

Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает большему количеству пользователей работать с вашим сайтом. Например, наличие заголовков помогает незрячим в навигации по странице. У скринридеров есть функция навигации по заголовкам, что ускоряет знакомство с информацией на сайте.

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

Классический пример — расписание поезда «Сапсан» в выдаче Google.

Разработчики tutu.ru сверстали таблицу тегом table вместо div и их сниппет оказался в выдаче Google по важному коммерческому запросу.

Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа <div> для обозначения навигации или других структурных элементов страницы. Тем временем в стандарте HTML есть несколько семантических тегов, которые рекомендуется использовать для разметки страниц вместо

<div> и span. В спецификации для каждого семантического элемента описана его роль.

Ну и представьте, насколько проще читать <nav></nav> вместо <div></div>. Или вот такой код. Смотрите и сразу понятно, что тут и зачем.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
  </head>
  <body>
    <header>
      <!— Шапка сайта —>
    </header>
    <main>
      <!— Основное содержимое страницы —>
    </main>
    <footer>
      <!— Подвал сайта —>
    </footer>
  </body>
</html>

Основные семантические теги HTML

Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег <p>, который обозначает параграф. При этом теги <i> или <b> не семантические, потому что они не добавляют смысла выделенному тексту, а просто определяют его внешний вид.

Но в актуальной версии стандарта HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.

<article>

  • Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее.
  • Особенности: желателен заголовок внутри.
  • Типовые ошибки: путают с тегами <section> и <div>.

<section>

  • Значение: смысловой раздел документа. Неотделяемый, в отличие от <article>.
  • Особенности: желателен заголовок внутри.
  • Типовые ошибки: путают с тегами <article> и <div>.

<aside>

  • Значение: побочный, косвенный для страницы контент.
  • Особенности: может иметь свой заголовок. Может встречаться несколько раз на странице.
  • Типовые ошибки: считать <aside> тегом для «боковой панели» и размечать этим тегом основной контент, который связан с окружающими его элементами.

<nav>

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

<header>

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

<main>

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

<footer>

  • Значение: заключительная часть смыслового раздела или всего сайта, обычно содержит информацию об авторах, список литературы, копирайт и так далее. Чаще всего повторяется на всех страницах сайта.
  • Особенности: этих элементов может быть несколько на странице. Тег <footer> не обязан находиться в конце раздела.
  • Типовые ошибки: использовать только как подвал сайта.

Как разметить страницу с точки зрения семантики

Процесс разметки можно разделить на несколько шагов с разной степенью детализации.

  1. Крупные смысловые блоки на каждой странице сайта. Теги: <header>, <main>, <footer>.
  2. Крупные смысловые разделы в блоках. Теги: <nav>, <section>, <article>, <aside>.
  3. Заголовок всего документа и заголовки смысловых разделов. Теги: <h2>-<h6>.
  4. Мелкие элементы в смысловых разделах. Списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.
  5. Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы.

Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и профессиональных курсах HTML Academy.

Создание семантической разметки по макету

Навык, без которого фронтенд-разработчикам ну просто никуда.

Изучить

Сомневаюсь, какие теги использовать

Есть простые правила для выбора нужных тегов.

  • Получилось найти самый подходящий смысловой тег — использовать его.
  • Для потоковых контейнеров — <div>.
  • Для мелких фразовых элементов (слово или фраза) — <span>.

Правило для определения <article>, <section> и <div>:

  1. Можете дать имя разделу и вынести этот раздел на другой сайт? — <article>
  2. Можете дать имя разделу, но вынести на другой сайт не можете? — <section>
  3. Не можете дать имя? Получается что-то наподобие «новости и фотогалерея» или «правая колонка»? — <div>

Как точно не нужно делать

Не используйте семантические теги для красоты. Для этого есть CSS.

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

Здесь сразу несколько ошибок:

  1. Тег <blockquote> должен использоваться для выделения в тексте цитат, а не просто случайного выделения текста. Так совпало, что в браузерах этот блок по умолчанию выделен, но это не значит, что нужно его использовать таким образом.
  2. Тег <ul> тоже использован для визуального «сдвига» текста. Это неверно, потому что этот тег должен быть использован только для обозначения списков, а во-вторых, в тег <ul> можно вкладывать только теги <li> и ничего больше.
  3. Тег <p> использован, чтобы визуально раздвинуть текст. На самом деле этот тег используется для выделения параграфов.

А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.

Поэтому используйте семантические теги по назначению.

HTML5 | Семантические элементы

165

Веб-программирование — HTML5 — Семантические элементы

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

Один элемент в особенности — скромный <div>, является краеугольным камнем каждой современной веб-страницы. С помощью элементов <div> в документе HTML можно разместить колонтитулы, боковые панели, панели навигации и многое другое. Добавив хорошую щепотку CSS-форматирования, эти секции можно превратить в блоки с границами или затененные колонки и поместить каждый из них точно в требуемом месте.

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

Эта ситуация заставила разработчиков задуматься, нельзя ли заменить элемент <div> чем-либо лучшим? Чем-то, что работало бы подобно <div>, но было бы более осмысленным. Чем-то, что помогло бы отделить боковые панели от заголовков, а рекламные панели от меню. Стандарт HTML5 позволяет сделать эту мечту реальностью, предоставляя набор новых элементов для структурирования страниц.

Что такое семантические элементы?

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

Регистрация начнется <time>2012-11-12</time>.

В браузере эта разметка отображается как обычный текст «Регистрация начнется 2012-11-25».

Здесь важно понимать то обстоятельство, что элемент <time> не обладает никакими встроенными возможностями форматирования. По сути, ничто не говорит устройству для чтения веб-страниц о том, что дата в коде страницы заключена в дополнительный элемент. Хотя к элементу <time> можно добавить дополнительное форматирование с помощью таблицы стилей, по умолчанию он ничем не отличается от обычного текста.

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

д.

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

Все семантические элементы имеют одну общую отличительную особенность: они по существу ничего не делают. В противоположность, элемент <video>, например, вставляет в веб-страницу полноценный видеоплеер. Зачем же тогда утруждать себя использованием набора новых элементов, которые никак не изменяют внешний вид веб-страницы? Этому есть несколько хороших причин:

  • Более удобное редактирование и сопровождение. Разметка традиционной HTML-страницы может быть трудной для понимания. Чтобы понять общую структуру и значение отдельных блоков страницы, часто приходится исследовать ее таблицу стилей. А использование семантических элементов HTML5 позволяет разработчику предоставить в разметке страницы дополнительную информацию о ее структуре. Это облегчит вам жизнь, когда потребуется редактировать эту страницу через несколько месяцев, и будет еще более кстати, если вашу работу придется редактировать кому-то другому.

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

  • Оптимизация поисковых движков. Поисковые движки наподобие Google или Yandex используют мощные поисковые роботы — автоматизированные программы, которые методически обходят Интернет и просматривают все страницы, которые они могут найти — для сканирования содержимого веб-страниц и составления для них указателей в своих поисковых базах данных.

    Чем лучше Google понимает вашу веб-страницу, тем больше шансов, что он сможет сопоставить ее содержимое с поисковым запросом, и тем больше шансов, что ваша веб-страница будет отображена в результатах чьего-либо поиска. В настоящее время поисковые роботы уже проверяют на наличие некоторых семантических элементов HTML5, чтобы собрать всю возможную информацию об индексирующих их веб-страницах.

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

Модифицирование традиционной HTML-страницы

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

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

Структурирование страницы старым способом

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

В ней нет ни элементов для полужирного или курсивного начертания, ни вставляемых в строку разметки стилей и определенно ничего похожего на такое уродство, как устаревший элемент <font>. Вместо этого документ аккуратно отформатирован посредством связи с внешней таблицей стилей.

В следующем листинге приводится сокращенная версия разметки:

<div>
   <h2>Язык C#</h2>
   <p>Краткое описание языка</p>
   <p>взято на Лурке</p>
</div>

<div>
   <p><span>C#</span> (&laquo;Си-шарп&raquo; ...</p>
   <p>...</p>
   <h3>История</h3>
   <p>...</p>
   <h3>Анти-история</h3>
   <p>...</p>

</div>

<div>
   <p>Содержимое доступно в соответствии с лицензией Creative Commons Атрибуция.</p>
   <p>
      <a href="#">О нас</a>
      <a href="#">Контакты</a>
   </p>
   <p>Copyright © 2013</p>
</div>

В хорошо написанной, традиционной HTML-странице (подобной этой) большинство работы по форматированию отдается на откуп таблице стилей посредством контейнеров <div> и <span>. Элемент <span> позволяет форматировать отрывки текста внутри другого элемента. А элемент <div> — целые блоки содержимого, и устанавливает общую структуру страницы.

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

body {
  font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, sans-serif;
  max-width: 1000px;
  margin:0 auto;
}

/* Форматируем элемент <div>, который представляет верхний колонтитул 
   (как блок с рамкой и синей заливкой) */
.Header {
  background-color: #7695FE;
  border: thin #336699 solid;
  padding: 10px;
  margin: 10px;
  text-align: center;
}

/* Форматируем все заголовки <hl> в элементе <div>
   верхнего колонтитула (заголовок статьи) и т. д */
.Header h2 {
  margin: 0px;
  color: white;
  font-size: xx-large;
}

.Header .Teaser {
  margin: 0px;
  font-weight: bold;
}

.Header .Byline {
  font-style: italic;
  font-size: small;
  margin: 0px;
}

.Content {
  font-size: medium;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  padding-top: 20px;
  padding-bottom: 5px;
  padding-left: 50px;
  padding-right: 50px;
  line-height: 120%;
}

.Content .LeadIn {
  font-weight: bold;
  font-size: large;
  font-variant: small-caps;
}

.Content h3 {
  color: #24486C;
  margin-bottom: 2px;
  font-size: medium;
}

.Content p {
  margin-top: 0px;
}

.Footer {
  text-align: center;
  font-size: x-small;	
}

.Footer .Disclaimer {
  font-style: italic;
}

. Footer p {
  margin: 3px;
}

Структурирование страницы с помощью HTML5

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

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

Далее приводится разметка страницы, показанной на рисунке выше, но с применением новых элементов. В частности, два элемента <div> заменены HTML5-элементами <header> и <footer>:

<header>
   <h2>Язык C#</h2>
   ...
</header>

<div>
  ...
</div>

<footer>
   ...
</footer>

Соответственно изменятся и селекторы стилей CSS:

header {
  background-color: #7695FE;
  border: thin #336699 solid;
  padding: 10px;
  margin: 10px;
  text-align: center;
}

header h2 {
  /* ... */
}

/* ... */

footer {
  text-align: center;
  font-size: x-small;	
}

footer .Disclaimer {
  font-style: italic;
}

footer p {
  margin: 3px;
}

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

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

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

<article>
   <header>
      <h2>Язык C#</h2>
      ...
   </header>

   <div>
     ...
   </div>

   <footer>
      ...
   </footer>
</article>

Конечная структура страницы показана на рисунке:

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

В предыдущем примере мы удачно применили элемент <header>. Но кроме этого элемента в HTML5 добавлен еще один элемент для работы с заголовками: <hgroup>. Официальные правила его применения следующие.

Прежде всего, для обычных отдельных верхних колонтитулов, не имеющих специального содержимого, вполне подойдет один из пронумерованных элементов заголовка — <h2>, <h3>, <h4> и т.д. А заголовок и его подзаголовок можно вместе обернуть в элемент <hgroup> (но в таком случае не пытайтесь втиснуть туда что-либо другое, кроме пронумерованных элементов заголовка).

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

<header>
   <hgroup>
      <h2>Язык C#</h2>
      <h3>Краткое описание языка</h3>
   </hgroup>
   <p>взято на Лурке</p>
</header>

Это, конечно же, несколько модифицированное содержимое из предыдущего примера: вместо элемента <р> подзаголовок обозначен элементом <h3>.

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

К счастью, эта проблема решается автоматически элементом <hgroup>. В структурном аспекте он обращает внимание только на заголовки верхнего уровня (в данном случае это <h2>). Другие заголовки отображаются в браузере, но они не включаются в схему документа. Такое поведение вполне логично, т. к. эти заголовки предназначены для обозначения подзаголовков, а не подразделов.

Вставка рисунков с помощью элемента <figure>

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

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

В следующем листинге показан пример разметки HTML, которая добавляет рисунок к статье с помощью стандартного синтаксиса:

<div>
      <img src="image.jpg" alt="C-Sharp" />
      <p>Язык для промышленной разработки на платформе .NET Framework</p>      
</div>

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

/* Форматируем блок плавающего рисунка. */ 
.FloatFigure { 
   float:left;
   margin-left:0px;
   margin-top:0px;
   margin-right:20px;
   margin-bottom:0px;
}

/* Форматирует текст подписи к рисунку */ 
.FloatFigure p {
   max-width:225px; 
   font-size:small;
   font-style:italic; 
   margin-bottom:5px;
}

Если вам уже приходилось раньше создавать подобный код для вставки рисунка то, возможно, будет интересно узнать, что HTML5 предоставляет новые семантические элементы, которые идеальным образом подходят для данного типа задач. В частности, вместо использования банального элемента <div> для контейнера рисунка можно использовать элемент <figure>. А текст подписи к рисунку помещается в элемент <figcaption> внутри элемента <figure> следующим образом:

<figure>
      <img src="image. jpg" alt="C-Sharp" />
      <figcaption>Язык для промышленной разработки на платформе .NET Framework</figcaption>    
</figure>

Добавление боковой панели с помощью элемента <aside>

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

Этот эффект можно с легкостью создать с помощью хорошо приработанного элемента <div>, но элемент <aside> предоставляет более осмысленный способ делать разметку того же самого содержимого:

<aside>
   <img src="quotes_start.png">
   Большинство хороших программистов делают свою работу не потому, 
   что ожидают оплаты или признания, а потому 
   что получают удовольствие от программирования. 
   <img src="quotes_end.png">
</aside>

В этот раз таблица стилей врезает плавающую цитату справа:

aside {
  float: right;
  max-width: 300px;
  border-top: thin black solid;
  border-bottom: thick black solid;
  font-size: 20px;
  line-height: 130%;
  font-style: italic;
  padding-top: 5px;	
  padding-bottom: 5px;	
  margin-left: 15px;
  margin-bottom: 10px;
}

aside img {
  width:40px;
  height:30px;
  vertical-align: bottom;
}

Создание навигационных ссылок с помощью элемента <nav>

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

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

<nav>
   <ul>
      <li><a href="">Ссылка 1</a></li>
      <li><a href="">Ссылка 2</a></li>
      <li><a href="">Ссылка 3</a></li>
   </ul>
</nav>
nav {
    margin:10px;
    max-width:1000px;	
	background-color:#FF6633;
	text-align:center;
}

nav ul {
	list-style:none;
	display: inline-block;
}

nav ul li {
    float:left;	
	margin:0px 10px 0px 10px;
}

nav ul a {
	text-decoration:none;
    display:block;	
	color:#FFFFFF;
}

Создание разворачиваемых блоков с помощью элементов <details> и <summary>

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

В этом отношении представляет интерес то обстоятельство, что HTML5 добавляет два семантических элемента, предназначенных для автоматизации этого поведения. Идея заключается в том, что разворачиваемый блок вставляется в элемент <details>, а заголовок блока — в элемент <summary>. Получим разметку наподобие следующей:

<details>
      <summary>Блок №1</summary>
      <p>Создание разворачиваемых блоков с помощью элементов details и summary</p>
</details>

Браузеры, которые поддерживают эти элементы, показывают только заголовок и какую-либо безделицу типа небольшого треугольничка рядом с заголовком. Когда пользователь щелкает по заголовку, блок разворачивается, показывая все свое содержимое. Браузеры без поддержки элементов <details> и <summary> покажут все содержимое с самого начала, не предоставляя пользователю никакой возможности свернуть его.

Отношение веб-разработчиков к элементам <details> и <summary> несколько противоречивое. Многие из них считают, что эти элементы не совсем семантические, т.е. они имеют дело больше со стилем, чем с логической структурой.

Но пока лучше всего избегать использования элементов <details> и <summary> из-за низкого уровня их поддержки браузерами. Хотя можно было бы написать обходное JavaScript-решение для браузеров, не поддерживающих этих элементов, но для этого потребуется больше усилий, чем для написания нескольких строк JavaScript для выполнения операций сворачивания/разворачивания самостоятельно и к тому же на любом браузере.

Семантические элементы в HTML5. — Как создать сайт

Семантические элементы в HTML5.

  Здравствуйте!  В этой статье разговор пойдет о семантических элементах в HTML5. Эти элементы помогают веб-разработчику  разметить страницу на основные части и также поисковику будет легче  распознавать  отдельные части страницы. До  HTML5 в разметке страниц  использовался тег  <div>, которому присваивали классы  или реже  идентификаторы id для структурирования и организации разметки страницы.

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

Для того как отображать внешний вид элементов  нет строгих правил, поэтому вы можете задавать стиль элементам как вам нравится. По умолчанию все новые элементы броузер относит к строчным поэтому для того чтобы они корректно отображались в браузере им надо задать display: block, это сделает их блочными, а блочному элементу можно задать размеры и они будут генерировать после себя небольшие отступы такое поведение характерно для всех блочных элементов.

 

 

Секционные элементы

Элемент <header>

Данный элемент предназначен для  отображения  верхней (шапки) части страницы.  Он объединяет  меню, логотип в общем все что находится в верхней части сайта. На веб-странице может  быть одновременно больше одного элемента <header>.

 

<header>
  <hgroup>
    <h2>...</h2>
    <h3>...</h3>
  </hgroup>
</header>
<header>
  <hgroup>
    <h2>...</h2>
    <h3>...</h3>
  </hgroup>
</header>

Элемент <hgroup>

Он предназначен  для группировки элементов заголовков  <h2> — <h6> это требуется когда заголовок имеет сложную структуру

<hgroup>
 <h2>...</h2>
 <h3>...</h3>
</hgroup>
<hgroup>
<h2>. ..</h2>
<h3>...</h3>
</hgroup>

Элемент <nav>

Предназначен для создания панели навигации меню, и всего что связано с меню.

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

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

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

И  можно размещать  заголовки внутри элемента:

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

Элемент <article>

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

<article>
  <header>
    <h3>...</h3>
  </header>
  <p>. ..</p>
  <footer>
  Опубликовано в категории<a href="/?cat=3" > Новости</a>.
    <a href="/?p=17#respond">5 комментариев</a>
  </footer>
</article>
<article>
  <header>
    <h3>...</h3>
  </header>
  <p>...</p>
  <footer>
  Опубликовано в категории<ahref="/?cat=2">Новости </a>.
    <ahref="/?p=17#respond">4 комментария</a>
  </footer>
</article>

Элемент <section>

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

<article>
  <h2>...</h2>
    <section>
      <h3>...</h3>
      <p>...</p>
    </section>
    <section>
      <h3>...</h3>
      <p>...</p>
    </section>
    <p>. ..</p>
</article>
<article>
  <h2>...</h2>
    <section>
      <h3>...</h3>
      <p>...</p>
    </section>
    <section>
      <h3>...</h3>
      <p>...</p>
    </section>
    <p>...</p>
</article>

Элемент <aside>

Предназначен для организации боковых панелей ил сайдбаров вывода блоков с рекламой, дополнительных меню.

<aside>
  <h3>...</h3>
  <p>...</p>
</aside>
<aside>
  <h3>...</h3>
  <p>...</p>
</aside>

Элемент <footer>

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

<footer>
  <address>...</address>
  <small>@2017. ..</small>
</footer>
<footer>
  <address>...</address>
  <small>@2017...</small>
</footer>

Элемент <address>

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

Группировка контента
Элементы <figure> и <figcaption>

Эти элементы нужны для  группировки картинок, причем figcaption служит подписью к картинкам.

<figure>
    <img src="picture.jpg" alt="Зима">
    <figcaption>Зимний лес</figcaption>
</figure>
<figure>
    <img src="picture.jpg"alt="Весна">
    <figcaption>Весенний лес</figcaption>
</figure>

 

Семантические элементы  для текстового содержимого
Элементы для поддержки языков Восточной Азии <rp>, <rt> и <ruby>

Тег <rp> устанавливает, что показывать, если браузер не поддерживает аннотаций типографики Восточной Азии. Используется вместе с тегами <ruby> и <rt>.

Тег <rt> добавляет аннотацию, объясняя написание символов Восточной Азии заключенных в контейнер <ruby>.

Тег <ruby> объясняет написание символов.

Элемент <time>

Нуджен для отображения даты и времени

Пример <time datetime=»2016-09-25T12:00″> 25 Сентября 2016</time>.

Элемент <mark>

Предназначен для выделения важного содержимого.

Элемент <wbr>

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Твитнуть

Поделиться

(Visited 741 times, 1 visits today)

Новые семантические элементы в HTML

Следующие элементы были введены для лучшей структуры:

  • представляет общий документ или раздел приложения. Его можно использовать вместе с элементами

    ,

    ,

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

Более подробно они будут рассмотрены ниже. Затем есть несколько других новых элементов.

<встроить> используется для содержимого плагина.
Не относится к определенному критерию успешности

<знак> представляет фрагмент текста в одном документе, помеченный или выделенный для справочных целей из-за его актуальности в другом контексте.
Относится к критерию успеха 1.3.1

<прогресс> представляет ход выполнения какой-либо автоматизированной задачи, например сохранения или загрузки файла.
Соответствует критерию успеха 3.3.5 /

<метр> представляет измерение, например использование диска.
Соответствует критерию успеха 3. 3.2

<время> представляет дату и/или время.
Соответствует критерию успеха 3.3.2

<данные> , что позволяет аннотировать содержимое машиночитаемым значением.
Соответствует критерию успеха 3.3.2

, и позволяют размечать рубиновые аннотации.
Соответствует критерию успеха 1.3.1

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

представляет возможность разрыва строки.
Соответствует критерию успеха 1.3.1

<холст> используется для рендеринга динамической растровой графики на лету, такой как графики или игры.
Соответствует критерию успеха 1. 3.1

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

Мультимедийный контент

<видео> и <аудио> для мультимедийного контента. Оба предоставляют API, поэтому авторы приложений могут создавать собственные сценарии пользовательского интерфейса, но есть также способ активировать пользовательский интерфейс, предоставляемый пользовательским агентом. Исходные элементы используются вместе с этими элементами, если доступно несколько потоков разных типов.
Относится к Руководству 1.2

предоставляет текстовые дорожки для видеоэлемента. С помощью атрибута «вид» можно определить ряд параметров, включая «субтитры», «заголовки», «описания» и «главы».

 <управление видео src="video. webm">

Значение «субтитры» обеспечивает расшифровку или перевод диалога, подходящий для случаев, когда звук доступен, но не понятен.

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

Значение «описания» предоставляет текстовые описания видеокомпонента медиаресурса, предназначенного для аудиосинтеза при недоступности визуального компонента.

Значение «chapters» предоставляет заголовки глав, предназначенные для навигации по медиа-ресурсу.
Относится к Руководству 1.2

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

Введение

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

В HTML4.01 и XHTML1.0 невозможно определить определенные аспекты веб-документа, такие как заголовок, навигация или нижний колонтитул. Используя эти языки разметки, единственным способом определить иерархию веб-документа было использование уровней заголовков —

—
.

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

,
, <раздел> , <артикул> , <рисунок> и
.

Что еще более важно, авторы могут использовать эти элементы бесконечным разнообразием способов, что обеспечивает большую гибкость. Например, элемент

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

Соответствует критериям успеха 2.4.1 и 2.4.10

Элемент

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

Пример с

только

:

  
 
   
Название сайта

Пример только с заголовками и другим содержимым:

  <заголовок> 
   
Название сайта
 
   
Слоган сайта
 
  
Дополнительная информация

Пример с

,

Соответствует критериям успеха 1.3.1, 2.4.6 и 2.4.10

Элемент

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

в
заголовков.

  
 
   
Название сайта
 
   
Билайн

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

  <заголовок> 
  <группа>
     
Название сайта
 
     
Билайн

может содержать только группу от

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

можно использовать несколько раз в одном документе.

 <заголовок>
    
 
     
Название сайта
 
     
Билайн
 
    
 
<заголовок>
<статья>
    
 
     
Название сайта
 
     
Билайн