HTML
Секционные элементы
Поиск…
замечания
Стандарты HTML5 не перечисляют основной элемент как элемент секционирования.
Элемент статьи
Элемент <article> содержит автономный контент, такой как статьи, сообщения в блогах, комментарии пользователей или интерактивный виджет, который может быть распространен вне контекста страницы, например, RSS.
- Когда элементы статьи вложены, содержимое внутреннего узла статьи должно быть связано с внешним элементом статьи.
Блог ( section ) с несколькими сообщениями ( article ) и комментариями ( article ) может выглядеть примерно так.
<section>
<!-- Each individual blog post is an <article> -->
<article>
<header>
<h1>Blog Post</h1>
<time datetime="2016-03-13">13th March 2016</time>
</header>
<p>The article element represents a self contained article or document.</p>
<p>The section element represents a grouping of content.</p>
<section>
<h2>Comments <small>relating to "Blog Post"</small></h2>
<!-- Related comment is also a self-contained article -->
<article id="user-comment-1">
<p>Excellent!</p>
<footer><p>...</p><time>...</time></footer>
</article>
</section>
</article>
<!-- ./repeat: <article> -->
</section>
<!-- Content unrelated to the blog or posts should be outside the section. -->
<footer>
<p>This content should be unrelated to the blog.</p>
</footer>
Избегайте ненужного использования
Когда основное содержание страницы (исключая заголовки, нижние колонтитулы, панели навигации и т. Д.) - это просто одна группа элементов. Вы можете опустить <article> в пользу элемента <main> .
<article>
<p>This doesn't make sense, this article has no real `context`.</p>
</article>
Вместо этого замените статью элементом <main> чтобы указать, что это main контент для этой страницы.
<main>
<p>I'm the main content, I don't need to belong to an article.</p>
</main>
Если вы используете другой элемент, убедитесь, что вы указали роль <main> ARIA для правильной интерпретации и рендеринга между несколькими устройствами и браузерами без HTML5.
<section role="main">
<p>This section is the main content of this page.</p>
</section>
Заметки:
Нажмите здесь, чтобы прочитать официальную спецификацию HTML5 для элемента <article>
Основной элемент
Элемент <main> содержит основной контент для вашей веб-страницы. Этот контент уникален для отдельной страницы и не должен появляться в другом месте на сайте. Повторение содержимого, такого как заголовки, нижние колонтитулы, навигация, логотипы и т. Д., Помещается вне элемента.
- Элемент
<main>должен использоваться только один раз на одной странице. - Элемент
<main>не должен включаться в качестве потомкаarticle, вaside,footer, элементаheaderилиnav.
В следующем примере мы показываем одну запись в блоге (и соответствующую информацию, такую как ссылки и комментарии).
<body>
<header>
<nav>...</nav>
</header>
<main>
<h1>Individual Blog Post</h1>
<p>An introduction for the post.</p>
<article>
<h2>References</h2>
<p>...</p>
</article>
<article>
<h2>Comments</h2> ...
</article>
</main>
<footer>...</footer>
</body>
Сообщение в блоге содержится в элементе
<main>чтобы указать, что это основной контент для этой страницы (и, следовательно, уникальный на веб-сайте).Теги
<header>и<footer>являются братьями и сестрами для элемента<main>.
Заметки:
Спецификация HTML5 распознает элемент
<main>как элемент группировки , а не элемент секционирования .
- Атрибуты роли ARIA :
main(по умолчанию) ,presentationДобавление атрибута
role="main"ARIA к другим элементам, предназначенным для использования в качестве основного контента, рекомендуется для помощи агентам пользователей, которые не поддерживают HTML5, а также для обеспечения большего контекста для тех, кто это делает.Элемент
<main>по умолчанию имеет основную роль, поэтому его не нужно предоставлять.
Нажмите здесь, чтобы прочитать официальную спецификацию HTML5 для элемента <main>
Nav Element
Элемент <nav> в основном предназначен для использования для разделов, содержащих основные навигационные блоки для веб-сайта, это может включать ссылки на другие части веб-страницы (например, якоря для оглавления) или на другие страницы целиком.
Встроенные элементы
Далее будет показан встроенный набор гиперссылок.
<nav>
<a href="https://google.com">Google</a>
<a href="https://www.yahoo.com">Yahoo!</a>
<a href="https://www.bing.com">Bing</a>
</nav>
При необходимости используйте элементы списка
Если содержимое представляет список элементов, используйте элемент списка, чтобы показать это и улучшить работу пользователя.
Обратите внимание на role="navigation" , подробнее об этом ниже.
<nav role="navigation">
<ul>
<li><a href="https://google.com">Google</a></li>
<li><a href="https://www.yahoo.com">Yahoo!</a></li>
<li><a href="https://www.bing.com">Bing</a></li>
</ul>
</nav>
Избегайте ненужного использования
Элементы <footer> могут иметь список ссылок на другие части сайта (FAQ, T & C и т. д.). В этом случае достаточно одного элемента нижнего колонтитула, вам больше не нужно обматывать ваши ссылки с помощью элемента <nav> в <footer> .
<!-- the <nav> is not required in the <footer> -->
<footer>
<nav>
<a href="#">...</a>
</nav>
</footer>
<!-- The footer alone is sufficient -->
<footer>
<a href="#">...</a>
</footer>
Заметки:
Добавление
role="navigation"Роль ARIA для элемента<nav>рекомендуется помогать агентам пользователей, которые не поддерживают HTML5, а также предоставлять больше контекста тем, кто это делает.<nav role="navigation"><!-- ... --></nav>
Screen Readers: (программное обеспечение, которое позволяет слепым или слабовидящим пользователям перемещаться по сайту)
Пользовательские агенты, такие как устройства чтения с экрана, будут интерпретировать элемент
<nav>разному в зависимости от их требований.
- Это может придать элементу
<nav>более высокий приоритет при рендеринге страницы- Это может задержать визуализацию элемента
- Он может адаптировать страницу определенным образом для адаптации к потребностям пользователя
пример: сделайте текстовые ссылки в элементах<nav>более крупными для тех, кто слабовиден.
Нажмите здесь, чтобы прочитать официальную спецификацию HTML5 для элемента <nav>
Элемент раздела
Элемент <section> представляет общий раздел для тематического группового содержимого. Как правило, каждый раздел должен быть идентифицирован с элементом заголовка в качестве дочернего элемента section .
- Вы можете использовать элемент
<section>в<article>и наоборот. - Каждый раздел должен иметь тему (элемент заголовка, определяющий этот регион)
- Не используйте элемент
<section>в качестве общего контейнера «стиль».
Если вам нужен контейнер для стилизации, используйте вместо него<div>.
В следующем примере мы показываем одно сообщение в блоге с несколькими главами, каждая глава представляет собой раздел (набор тематически сгруппированного контента, который может быть идентифицирован элементами заголовка в каждом разделе) .
<article>
<header>
<h2>Blog Post</h2>
</header>
<p>An introduction for the post.</p>
<section>
<h3>Chapter 1</h3>
<p>...</p>
</section>
<section>
<h3>Chapter 2</h3>
<p>...</p>
</section>
<section>
<h3>Comments</h3> ...
</section>
</article>
Заметки:
Разработчики должны использовать элемент статьи, когда имеет смысл синдицировать содержимое элемента.
Нажмите здесь, чтобы прочитать официальную спецификацию HTML5 для элемента <main>
Элемент заголовка
Элемент <header> представляет собой вводный контент для его ближайшего содержимого для секреции предков или корневого элемента секции. A <header> обычно содержит группу вводных или навигационных средств.
Примечание. Элемент header не является содержимым секции; он не вводит новый раздел.
Примеры:
<header>
<p>Welcome to...</p>
<h1>Voidwars!</h1>
</header>
В этом примере <article> имеет <header> .
<article>
<header>
<h1>Flexbox: The definitive guide</h1>
</header>
<p>The guide about Flexbox was supposed to be here, but it turned out Wes wasn’t a Flexbox expert either.</p>
</article>
Элемент нижнего колонтитула
Элемент <footer> содержит нижнюю часть страницы.
Ниже приведен пример элемента <footer> , содержащего тег p paragraph.
<footer>
<p>All rights reserved</p>
</footer>