Содержание
Разделы документа в 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.
| Атрибут | Описание, принимаемое значение |
|---|---|
| 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="">« Предыдущие записи</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 — CSS-LIVE
Дополнение от 1.03.2016: у нас есть более свежая статья на эту же тему (перевод заметки редактора спецификации W3C HTML5).
Типовая структура страницы в HTML5:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ваш сайт</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Ваше меню</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h3>Заголовок статьи</h3>
<p>Опубликовано <time datetime="2014-01-30T16:31:24+03:00">30 января 2014</time> <a href="#">Автор</a> - <a href="#comments">6 комментариев</a></p>
</header>
<p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.</p>
</article>
<article>
<header>
<h3>Заголовок статьи</h3>
<p>Опубликовано <time datetime="2014-01-30T16:31:24+03:00">30 января 2014</time> <a href="#">Автор</a> - <a href="#comments">6 комментариев</a></p>
</header>
<p>Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию.</p>
</article>
</section>
<aside>
<h3>Об авторе</h3>
<p>Нет никого, кто любил бы боль саму по себе, кто искал бы её и кто хотел бы иметь её просто потому, что это боль..</p>
</aside>
<footer>
<p>Copyright 2014 Ваш сайт</p>
</footer>
</body>
</html>
P.S. Это тоже может быть интересно:
HTML5 — Основы создания структуры документа
Статья, которая повествует об основах создания структуры документа в HTML 5.
Семантика и структура документа в HTML 5
Структура документа играет очень важную роль для понимания того, как устроена веб-страница. Она определяет то, как контенты организованы и взаимосвязаны между собой в документе, а также их относительную важность. Если воспользоваться схемой документа, то можно увидеть, как более просто стало просматривать информацию. Правильно спроектированная структура придаёт содержимому страницы смысл, делает его более лёгким для чтения, которое осуществляется поисковыми системами и другими пользовательскими агентами. На сайте, в котором правильно спроектирована структура, проще ориентироваться и находить нужную информацию.
Создание структуры документа до HTML 5
Перед изучением процесса создания структуры документа в HTML 5, желательно познакомиться с тем, как это осуществлялось в предыдущей версии языка и с какими проблемами веб-разработчику при этом приходилось сталкиваться.
Как образуется структура документа в HTML 4
Создание структуры документа в HTML 4 осуществляется с помощью 6 элементов (h2, h3, h4, h5, h5, h6). Эти элементы, при их размещении на странице, создают неявные разделы. Данные разделы называются неявными, потому что автор их в документе явно не создаёт. Они образуются автоматически, как только user agent встречает один из этих элементов в документе. Впоследствии из всех созданных user agent-ом разделов образуется структура документа.
Проблемы при реализации структуры документа
Модель структуры документа, использованная в HTML 4, имеет существенные ограничения, которые связаны с тем, что автору доступны для её создания всего 6 элементов h2, h3, h4, h5, h5 и h6. С помощью этих элементов веб-разработчик не может спроектировать структуру документа, которая одновременно обеспечивала бы логическую взаимосвязь между разделами и отвечала критериям SEO.
Более подробно познакомиться с процессом создания структуры документа в HTML 4 и с проблемами при её реализации можно в следующей статье.
Создание структуры документа в HTML 5
Стратегия создания структуры документа в HTML5 значительно изменилась. Теперь она не определяется только одними заголовками, т.к. это всегда для большинства веб-разработчиков выглядело как-то нелепо. Заголовки позволяют определить структуру документа, но они не группируют контент. До HTML 5 авторы группировали контент с помощью элементов div, а затем использовали атрибуты классов или id атрибуты для того, чтобы присвоить этим разделам более семантически верное значение. К счастью в HTML5 появилась новая группа элементов sectioning, которые позволяют авторам создавать описание (структуру) документа. К этой группе относятся элементы article, aside, nav и section. Их основное назначение сделать код HTML более семантическим, добавить в него смысл с помощью разметки.
Элементы, предназначенные для создания структуры в HTML 5
Для создания структуры документа в HTML 5 используются заголовочные элементы (h2, h3, h4, h5, h5 и h6) и элементы nav, aside, section и article из группы sectioning. Данные элементы в отличие от заголовков предназначены для создания явных разделов и установления этим разделам некоторого смысла.
Процесс создания структуры документа в HTML5
Для того чтобы было более просто понять основные принципы структурирования документа в HTML 5 будет считать, что элементы body, nav, aside, section и article создают секции (явные разделы), а элементы h2, h3, h4, h5, h5 и h6 — обычные разделы (неявные разделы).
Процесс разработки структуры документа рассмотрим посредством пошаговых инструкций.
В HTML 5 создание структуры документа начинается с элемента body. Данный элемент создаёт основную секцию (раздел на уровне документа).
<body> </body> --> Вышеприведённый пример будет создавть следующую структуру документа: [document] Untitled
После этого обычно переходят к созданию секций внутри body (основной секции). Например, создадим секции nav, section и aside. Эти секции будут являться дочерними по отношению к body.
<body> <nav></nav> <section></section> <aside></aside> </body> --> Вышеприведённый пример будет создавать следующую структуру документа: [document] Untitled [nav] Untitled [section] Untitled [aside] Untitled
Каждая из секций (nav, aside, section, article) в свою очередь тоже может содержать секции. Таким образом, в HTML 5 получается структура документа. Т.е. одни секции вкладываются в другие. Секции, которые расположены непосредственно в body, имеют 2 уровень. А секции, которые расположены непосредственно в секциях 2 уровня будут уже иметь 3 уровень и т.д.
Например, создадим в section 3 секции article.
<body>
<nav></nav>
<section>
<article></article>
<article></article>
<article></article>
</section>
<aside></aside>
</body>
--> Вышеприведённый пример будет создавать следующую структуру документа:
[document] Untitled
[nav] Untitled
[section] Untitled
[article] Untitled
[article] Untitled
[article] Untitled
[aside] Untitled
Элементы h2, h3, h4, h5, h5 и h6 в HTML5 применяются для указания названия секции (т.е. выступают в качестве заголовка секции) и для создания неявных разделов внутри секции. Причём взаимосвязь между неявными разделами осуществляется только в пределах одной секции. Т.е. заголовочные элементы, находящиеся в одной секции, не связаны с заголовочными элементами, находящимися в другой секции. Другими словами неявные разделы одной секции изолированы от неявных разделах другой секции. В качестве заголовка секции выступает заголовочный элемент, находящийся в этой секции и имеющий самый высокий ранг (уровень). Если секция не содержит заголовочный элемент, то она не имеет названия (Untitled).
Внимание: В HTML 4 в отличие от HTML 5 взаимосвязь между неявными разделами осуществлялась в пределах всего документа, а не в пределах секции (body, nav, aside, section, article). В HTML 4 нет элементов для создания секций.
Например, создадим названия для всех секций кроме nav.
<body>
<h2>A</h2>
<nav></nav>
<section>
<h2>B</h2>
<article>
<h2>C</h2>
</article>
<article>
<h2>D</h2>
</article>
<article>
<h2>E</h2>
</article>
</section>
<aside>
<h2>F</h2>
</aside>
</body>
--> Вышеприведённый пример будет создавать следующую структуру документа:
[document] A
[nav] Untitled
[section] B
[article] C
[article] D
[article] E
[aside] F
Например, создадим неявные разделы в секции section и aside:
<body>
<h2>A</h2>
<nav></nav>
<section>
<h2>B</h2>
<article>
<h2>C</h2>
</article>
<article>
<h2>D</h2>
</article>
<article>
<h2>E</h2>
</article>
<h3>B-R1</h3>
<h4>B-R2</h4>
<h3>B-R3</h3>
</section>
<aside>
<h2>F</h2>
<h3>F-R1</h3>
<h4>F-R2</h4>
<h5>F-R3</h5>
<h4>F-R4</h4>
<h4>F-R5</h4>
</aside>
</body>
--> Вышеприведённый пример будет создавать следующую структуру документа:
[document] A
[nav] Untitled
[section] B
[article] C
[article] D
[article] E
[h3] B-R1
[h4] B-R2
[h3] B-R3
[aside] F
[h3] F-R1
[h4] F-R2
[h5] F-R3
[h4] F-R4
[h4] F-R5
Структура html5 страницы (документа): чем она отличается?
От автора: я вновь приветствую вас на блоге webformyself. А может вы здесь и впервые. Сегодня мы рассмотрим, из чего состоит структура html5 страницы и как она поменялась с выходом этой новой спецификации.
Как изменилась структура
Прежде всего, я хотел бы сказать, что до появления html5 явной структуры как таковой вообще не существовало. Как верстались все шаблоны? В большинстве случаев использовался метод блочной верстки, ставший сегодня стандартным. В качестве контейнеров для элементов использовались обычные div с разными идентификаторами.
Например, шапка обычно обозначалась как div с идентификатором header, блок с основной информацией называли main или content, боковая колонка получила идентификатор sidebar.
В общем-то, очень мало разработчиков, которые выбирали другие имена классов или уникальных меток. В самом деле, что может быть более понятным и правильным обозначением боковой колонки, чем слово sidebar? Его понимают даже люди, очень мало знакомые с английским.
В связи с этим, в html5 назревало появление новых элементов – семантических блоков, которые были призваны заменить обычные div, придать разметке больше смысла.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Собственно говоря, историю их происхождения вы также можете узнать в первом уроке премиум-курса по основам html5. Я советую вам ознакомиться с ним, если вы пока очень мало знаете об этой спецификации. Ну а я расскажу вам теперь о некоторых из этих новых элементов.
Новые семантические блоки в разметке
Стоит отметить, что подходящий тег придумали практически для любого элемента на веб-странице. Например, для шапки. По стандарту ее всегда делали так: div id = “header”. Теперь необходимость в этом отпала – появился контейнер header. Да, это парный тег и в него помещается все содержимое шапки.
Впрочем, это не означает, что к нему нельзя привязать класс или идентификатор. Конечно, можно, и так и будут делать. Header имеет немного большую роль, чем только контейнер для главной шапки сайта.
Если вы присмотритесь к содержанию новости или статьи на практически любом веб-ресурсе, то обнаружите там не только текст, но и какую-то дополнительную информацию. Например, число просмотров, лайков, количество комментариев, вступление к статье, выводы, дату публикации и много чего другого. На каждом сайте по-разному.
Так вот, к чему это я? У статьи (новости, обзора и т.д.) тоже может быть своя шапка, своя заключительная часть и т.д. Соответственно, на странице может быть несколько header-ов, каждый со своим классом.
К слову, подвал сайта, самая нижняя его часть, формируется в html5 тегом footer. Для вас это будет очевидным, если вы сверстали хотя бы несколько типичных макетов – именно такой класс обычно дают этому блоку.
Теперь о меню. Раньше оно тоже не имело своего собственного, уникального контейнера, который мог бы его отличать. Оно тоже формировалось в помощью div. Естественно, для такого важного элемента на странице тоже придумали свой тег – nav (navigation). Он тоже не обязательно должен быть одним на странице – на некоторы веб-ресурсах можно наблюдать несколько разных меню и все же по своему смыслу в него рекомендуется заключать самые важные ссылки на странице.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Вы наверное, замечали, как сильно может отличаться основное содержимое от того, что показывается в боковой колонке? Если подумать, то это вообще разные секции шаблона. Вот именно – секции! Наверняка подобным образом думали и разработчики спецификации html5, поэтому они создали тег – section. Его общий смысл заключается в том, что он содержит в себе часть документа (секцию), в целом независимую от других, у которой может быть свой заголовок и т.д.
Пример новой разметки
Хорошо, мы с вами уже узнали о некоторых новых элементах, давайте попробуем сделать разметку c их помощью.
<header>Шапка</header>
<nav>Главное меню</nav>
<section id = “sidebar”>Сайдбар</section>
<section id = “content”>
<h2>Заголовок</h2>
<aside>Второстепенная информация о статье</aside>
<article>Сама статья</article>
</section>
<footer>Подвал</footer>
<header>Шапка</header> <nav>Главное меню</nav> <section id = “sidebar”>Сайдбар</section> <section id = “content”> <h2>Заголовок</h2> <aside>Второстепенная информация о статье</aside> <article>Сама статья</article> </section> <footer>Подвал</footer> |
Конечно, это очень простой пример. В реальности еще к этим элементам добавляются какие-то стилевые классы. Здесь мы с вами применили два абсолютно новых тега – article и aside. Как вы понимаете, тег article обозначает основную информацию на странице, причем исключительно ее текст.
Такие важные вещи, как дату публикации или количество комментариев, лучше вынести отдельно в блок aside. Он создан для того, чтобы помещать в него информацию, которая не является главной, имеет второстепенное значение, по сравнению с основной.
Конечно, дата публикации это важно, но она никак не связана с самой статьей по смыслу. Именно поэтому рекомендуется обрамлять ее в другой тег. Собственно, эти рекомендации не являются обязательными к выполнению. Например, если вы в тег article включите всю статью с датой, кол-вом просмотров и другой побочной информацией, ничего страшного не случится. Я бы даже сказал, что вообще ничего не случится, просто нужно стремиться делать более правильно.
Наконец, если говорить о времени (дате), то ее желательно заключать в новый тег time. Это позволит браузеру действительно считать это датой, а не просто каким-то случайным элементом на странице.
Конечно, представленный выше вариант разметки является лишь одним из примеров, на каждом реальном сайте по-разному. Например, в любой section можно добавить header и footer – они будут обозначать начало и конец секции, второстепенная информация может находиться ниже самой статьи, а не выше. Тут много разных вариантов, причем вы разбираем только структуру блога, на других типах веб-ресурсов все может быть совсем по-другому. Например, вот другой вариант разметки, и он тоже имеет право на жизнь:
Итак, вот так быстро мы с вами прошлись по структуре html5 – новым тегам этой спецификации, которые помогают сделать разметку веб-страницы куда более понятной. Подписывайтесь на наш блог, если вы хотите продолжать изучение сайтостроения.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотреть
Правильная структура страницы на HTML5, новые семантические теги
06.07.18 HTML 1466
С появлением новой версии HTML, стало возможным верстать страницы по-новому. А именно, в HTML5 появились новые семантические теги, которые четко выделяют части страницы и делают ее структуру полностью прозрачной. Что это за теги и почему важно использовать их при верстке?
Раньше страницу можно было верстать любым способом, например, простым размещением блоков div. В таком случае семантическое значение вычислялось поисковиками и другими сервисами при помощи классов и идентификаторов. Сейчас же эту проблему решают новейшие теги. Кроме семантики, теги помогают построить внешний вид современного веб-приложения или сайта более совершенно.
Согласно спецификации HTML5, каждый новый тег относится к определенной категории (0 или более) контента. Перечислим эти категории содержимого:
- Мета,
- Заголовочное,
- Текстовое,
- Потоковое,
- Секционное,
- Встроенное,
- Интерактивное.
Как видно, категорий совсем немного. Эти условные деления на категории необходимы для более четкого структурирования тегов. Перечислим сами теги: header, nav, article, section, aside, footer, address, main, figure, figcaption, time, mark, bdi, wbr. Кроме этих тегов, еще нужно не забывать про элементы для описания восточно-азиатских символов: ruby, rb, rt, rtc, rp. Ниже рассмотрим кратко новые теги, приводится название и категория содержимого в скобках.
Тег header (потоковое)
Данный тег позволяет группировать навигационные и вводные элементы. Можно размещать по желанию сколько нужно таких тегов или ни одного, в любой части страницы. Нельзя вкладывать в тег footer и address, а также в сам тег header.
Тег nav (потоковое, секционное)
Как видно из названия тега, служит для создания блока навигации, различных меню и блоков ссылок. Можно использовать несколько раз на странице.
Тег article (потоковое, секционное)
Тег предназначен для группирования статей на странице, его стоит применять если на одной странице размещено несколько статей, если же всего лишь одна статья, тогда можно не использовать данный тег.
Тег section (потоковое, секционное)
Тег предназначен для деления страницы на части и разделы, выделения определённых секций на странице. Например, можно сделать на одной странице секцию статей, секцию комментарий, секцию галереи и т.д.
Тег aside (потоковое, секционное)
Этот тег позволяет выделить какое-либо содержимое страницы в отдельную логическую часть, например, с его помощью можно сделать боковую колонку, как в книге.
Тег footer (потоковое)
Тег служит для создания футера на сайте, места в котором обычно размещается информация о сайте, копирайте и т.д. Можно использовать несколько раз на странице.
Тег address (потоковое)
Тег полезен для создания блока с адресной информацией, особенно важно для продвижения в поисковых системах. Содержимое в данном теге обычно выделяется браузерами курсивом.
Тег main (потоковое)
Элемент можно использовать для определения основной части страницы, не может быть потомком тегов: article, aside, footer, header, nav.
Тег figure (потоковое, корневое)
Данный тег используется для выделения автономного контента, например, с его помощью можно сделать блок, содержащий фотографию и описание к ней.
Тег figcaption (-)
Тег является потомком тега figure и позволяет разместить описание или подпись, а также другую информацию к нужному элементу на странице.
Тег time (потоковое, текстовое)
Важный тег, который позволяет ввести дату и время. Это может быть полезно для поисковых систем, а также для пользователей. С появлением данного тега, стало возможным задавать дату в стандартных временных форматах.
Тег mark (потоковое, текстовое)
Тег позволяет выделить контент на странице цветом, как маркером на бумаге. Обычно это желтый цвет, но можно изменить цвет стилями.
Тег bdi (потоковое, текстовое)
Тег отделяет текст, который можно будет читать как слева направо, так и наоборот.
Тег wbr (потоковое, текстовое)
Тег-одиночка, позволяет задать место, где браузеру можно разорвать длинную строку.
Таким образом, новые теги позволяют эффективно производить разметку страницы, это крайне важно для поискового продвижения и для использования веб-страниц в различных сервисах.
Структура (скелет) сайта на HTML5 . Основная структура сайта
Структура сайт на HTML5 немногим отличается от обычной структуры. В новой версии языка разметки введены новые семантические элементы которые позволяют лучше структурировать страницу сайта и придать каждому блоку определенный смысл.
Мы рассмотрим основные нововведения HTML5 которые облегчают разработку сайта.
Самая простая структура тела сайта имеет стандартные части (в большинстве случаев), это заголовок, меню, боковая панель, основное содержимое и подвал.
Семантические элементы HTML5 помогают упростить работу с этими частями. Итак давайте рассмотрим какие элементы HTML нам необходимы для создания структуры сайта
1. Основная стандартная структура сайта, которая имеет заголовок страницы и тело страницы:
<!DOCTYPE html> <html> <head> <title> Структура сайта на HTML5 </title> </head> <body> </body> </html>
2. Теперь добавим в тело страницы (внутрь тега BODY) элемент которые будет отвечать за заголовок страницы в новом HTML5 это тег HEADER
<body>
<header>
<h2>Это структура сайта с использованием семантических тегов HTML5 </h2>
</header>
</body>
3. Часть HEADER обычно включает в себя часть меню. Меню создается с помощью парного тега NAV
<body>
<header>
<h2>Это структура сайта с использованием семантических тегов HTML5 </h2>
<nav>
<ul>
<li> <a> Пункт меню 1 </a></li>
<li> <a> Пункт меню 2 </a></li>
</ul>
</nav>
</header> </body>4. Следующий элемент который используется для создания структуры сайта это ARTICLE. Он используется для группировки записей, статей и прочего на странице. В большинстве своем используется для разделения частей сайта на различные блоки. Может содержать внутри себя другие элементы ARTICLE.
<body>
<article>
<header>
<h2>Это структура сайта с использованием семантических тегов HTML5 </h2>
<nav>
<ul>
<li> <a> Пункт меню 1 </a></li>
<li> <a> Пункт меню 2 </a></li>
</ul>
</nav>
</article>
</header> </body>5. Далее идет элемент ASIDE, который чаще всего используется для создания боковых колонок на странице сайта, это может быть меню, дополнительная информация и прочее.
<aside> <h4> Рекламные блоки </h3> <p> Какая то реклама </p> </aside>
6. И последний часто используемый элемент это подвал FOOTER. Представляет собой нижнюю часть страницы сайта, обычно эта часть всегда одинакова на всех страницах сайта. Но каждая страницы или статья может иметь свой собственный footer.
<footer> <adress> Ул.Новая д.43, г.Большой </adress> </footer>
Подведя итог можно сделать окончательную структуру сайта на HTML5, который будет иметь следующий вид:
<!DOCTYPE html>
<html>
<head>
<title> Структура сайта на HTML5 </title>
</head>
<body>
<header>
<h2>Это структура сайта с использованием семантических тегов HTML5 </h2>
<nav>
<ul>
<li> <a> Пункт меню 1 </a></li>
<li> <a> Пункт меню 2 </a></li>
</ul>
</nav>
</header>
<aside>
<h4> Рекламные блоки </h3>
<p> Какая то реклама </p>
</aside>
<footer>
<adress> Ул.Новая д.43, г.Большой </adress>
</footer>
</body>
</html>
Выстраивание логической структуры страницы сайта на HTML5
Одной из задач создания новой версии HTML5 было упрощение разметки документа. Решением данной задачи стало создание новых тегов, которые отвечают за структуризацию документа.
Основной принцип построения дерева страницы основывается на дроблении всей страницы на структурные элементы – блоки или секции. К числу этих секций относят такие теги, как <header> (шапка сайта), <section>, <aside>, и <footer> (подвал). До момента создания вышеперечисленных тегов верстальщики использовали теги <div> для структуризации документа с использованием уникальных классов и id. Код, построенный исключительно на <div> очень сложный для восприятия и не читабельный. Причиной этого является отсутствие логической нагрузки на теге. Это было главным камнем преткновения для поисковых систем.
Данный факт стимулировал появления на свет тегов со смысловой нагрузкой, что стало так называемой «картой» для роботов в дремучем лесу кода.
Положительные стороны использования новых тегов
Поисковая оптимизация
Первая и весомая положительная сторона использования модернизированного HTML5 это облегчение обработки кода для поисковых роботов. В настоящее время роботы легко отличают вспомогательную информацию на сайте от основной тематики и контента.
Вследствие этого поисковые системы повысят эффективность нахождения уникального контента и плагиата.
Однако стоит отметить, что многие сеошники не уяснили основную суть принципа работы поисковиков по такой разметке, но это дело времени.
Доступность
Для наглядного разбора доступности новых методов верстки рассмотрим пример сайта:
Глядя на этот сайт достаточно просто сориентироваться, где находится основной контент, а где вспомогательная информация, а также четко видно, где шапка сайта, менюшки и подвал. Однако при использовании голосовых браузеров очень трудно добраться до сути сайта, к примеру, если это сайт-магазин. Чтобы добраться до сути ассортимента предлагаемого товара пользователю понадобится не дюжее упорство и терпение, которым обладает не каждый.
В таких случаях выходом из ситуации станет использование новых тегов. Они позволят всего одной голосовой командой переходить от названия сайта к меню, основному контенту и вспомогательным элементам навигации сайта.
Эти положительные стороны HTML5 повлияли на неожиданный интерес создателей альтернативных систем поиска, они делают серьезный уклон на семантику документа.
Коротко об основном назначении структурных тегов:
section
Данный тег отвечает за структуризацию блоков, связанных чем-либо между собой. Также с помощью этой команды можно делить текст на главы, разделы и подразделы. Обычно в рамках такого тега имеет место заголовок.
Более подробно о использовании этого тега для построения семантической структуры документа можно прочесть в статье «Построение структуры документа в HTML5 используя section»
Для более понятного разъяснения вернемся к примеру разбития объемного текста на главы и параграфы, которые также могут иметь подразделы и подпункты. Обратимся к следующему примеру кода для закрепления материала
<article>
<h2>Заголовок статьи</h2>
<p>Вступительное слово...</p>
<section>
<h2>Заголовок подраздела статьи</h2>
<p>Контент подраздела</p>
</section>
<section>
<h2>Заголовок второго подраздела статьи</h2>
<p>Контент подраздела</p>
</section>
</article>Кстати, обратите внимание на наличие нескольких заголовков с маркером h2 это специальный прием, который мы обсудим позже.
Некоторые пользователи утверждают, что <section> — это не более, чем замена тега блочной верстки <div>. Однако это утверждение не верно. Существует четкое разграничение, когда применение section уместно, а когда нет. К примеру, при привязки некоторому контейнеру особого стиля нужно обращаться только к <div>. Также стоит обращать внимание и на смысловую нагрузку, которая есть в блоке- section не употребляется при отсутствии естественного заголовка.
article
Опытные веб-мастера называют эту секцию частным случаем тега <section>. Article выделяет «автономную» (такую, которую в целом можно вырезать из страницы, и при этом она не потеряет своего смысла) часть страницы, которая в свою очередь состоит из взаимосвязанных элементов.
К примерам автономных частей можно отнести анонсы статей на блоге, рекламные блоки, различные виджеты (к примеру с погодой).
Однако, в спецификации достаточно заумно описано это понятие, в следствие чего возникло очень много споров по поводу того, что именно использовать: <section> или <аrticle>. К основным разногласиям по этому вопросу можно отнести следующие моменты:
- для создания главного контейнера веб-страницы следует использовать
<section>, <аrticle>или<div>. С одной стороны все содержимое так или иначе связано между собой, однако сайт можно назвать независимой единицей. - как именно оформлять шапку сайта, а точнее какие теги использовать?
- и, наконец, как работать с основным контентом сайта? Нужно использовать
<section>с<аrticle>внутри или же исключительно пользоваться одним<аrticle>.
Эта путаница напоминает те времена, когда аналогичные споры возникали при использовании тегов <acronim> и <abbr>. В тот раз проблема была решена достаточно просто, но радикально: отказались от использования <acronim>.
И в связи со всем этим возникает вполне логичный и законный вопрос: зачем использовать <аrticle>, если можно отказаться от него и работать только с <section>? В конечном итоге модернизация HTML5 была направлена на облегчения работы веб-мастеров.
Скорее всего в данном случае отказаться от <аrticle> будет не корректно, так как мы бы получили абсолютно идентичную разметку в блочном стиле, которая была в предыдущей версии HTML. Решением данного вопроса стало бы усовершенствование <section> таким образом, чтобы были видны четкие различия между основным контентом сайта и вспомогательной информации.
В помощь начинающим мастерам сайтостроения предлагаю несколько особенных черт, по которым можно достаточно просто решить, когда именно нужно использовать <аrticle>:
- Основной подход – имеет ценность для пользователя, привлекает его внимание, тобишь основное содержимое страницы.
- Если рационально было бы добавить атрибуты pubdat или cite.
- В случае полной автономности рассматриваемого нами фрагмента кода.
aside
Создан для отделения основного содержимого страницы от вспомогательного.
Тоесть в него мы можем заключить различного рода цитаты в тексте, дополнительные меню, рекламные баннеры и прочую информацию не имеющую отношения к основному содержимому страницы.
Чаще всего подобная информация на сайте располагается в сайдбаре.
header
Служит для четкого выделения заглавной части страницы. В нем располагаются заглавия как всего документа, так и отдельных его частей. Чаще всего внутри этой секции можно встретить такие теги, как <hgroup> и <h2>-<h6>. Однако это предписание не обязательно, в принципе в header могут распологаться любые теги.
Стоит отметить, что в первую очередь данный тег применяют при создании шапки, как указано в примере:
<header>
<a href="/"><img src="logo.png" alt="Vaden Pro/></a>
<ul>
[меню]
</ul>
[поиск]
</header>Однако не стоит ограничивать данный тег шапкой для веб-страницы. <header> он может располагаться внутри <section>, <article>, <aside> и в особых исключительных случаях в <nav>. При таком подходе тег <header> является дочерним элементом и соответствует заглавию этой отдельной части. Рассмотрим пример, когда <header> используется внутри <article>:
<article>
<header>
<h2>Важный текст</h2>
<time>21.02.10</time>
</header>
[Текст публикации]
</article>Стоит отметить, что header собирает воедино заголовок части, однако если эта самая часть состоит только из названия, то применять данный тег не следует:
<article>
<header>
<h2> Важный текст </h2>
</header>
[Текст публикации]
</article>Это нерациональное использование header, более правильной с точки зрения семантики будет следующая запись кода:
<article> <h2> Важный текст </h2> [Текст публикации] </article>
footer
Опускаясь по структуре сайта все ниже мы постепенно подошли к нашему «подвалу», в котором располагается некоторая описательная информация раздела или сайта в общем. Эта информация отделяется тегом <footer>:
<footer> <p>© 2014 Vaden Pro</p> <p>Все права защищены</p> </footer>
В этой части сайта принято располагать информацию о правах на авторство данного ресурса, копирайт, различные ссылки на вспомогательные ресурсы и прочее. Именно поэтому нельзя ограничивать использование тега <footer> исключительно на главной странице. рационально будет его использование и в различных разделах ресурса. Также не стоит заблуждаться, что <footer> обязательно должен находиться в самом низу сайта. К примеру, имеет место такая разметка страницы:
<article>
<header>
<h2>Важная информация</h2>
<time>05.04.2015</time>
</header>
<footer>
<div>Данил Гойда</div>
<a href="#">об авторе</a> | <a href="#">Все публикации автора</a>
</footer>
[сама публикация]
</article>nav
Использование nav отвечает за разделение навигационной части сайта и основного контента. Внутри этого блока могут располагаться не только ссылки на другие страницы сайта, но и якорные ссылки по текущей странице. Для примера посмотрим на следующий код:
<header>
<a href="/"><img src="logo.png" alt="Vaden Pro"/></a>
<nav>
<ul>
[меню]
</ul>
</nav>
[поиск]
</header>Стоит также обратить внимание на то, что формирует не просто перечень ссылок, а самостоятельную секцию со сложной структурой. Смотрим:
<nav>
<a href="">Сложная навигация</a>
<section>
<h2>Первый раздел сайта</h2>
<ul>
<li><a href="">пункт</a></li>
[...]
</ul>
</section>
<section>
<h2>Второй раздел сайта</h2>
<ul>
<li><a href="">Пункт</a></li>
</ul>
</section>
</nav>И не стоит забывать о том, что <nav> формирует основной навигационный блок веб-страницы. дополнительные навигационные элементы сайта, такие как вспомогательные ссылки в футере или блоки, повторяющие навигацию, не должны выделяться этим тегом.
Оценок: 19 (средняя 3.2 из 5)
HTML5 Структура страницы
Информация о версии — Doctype¶
Базовая HTML-страница начинается с объявления типа документа или doctype. Это способ сообщить браузеру, какой это тип документа. Тип документа всегда является первым элементом в начале любого файла HTML. Затем идут разделы и подразделы, у каждого, возможно, есть заголовок и подзаголовок. Эти элементы заголовков и разделов помогают читателю понять смысл содержания.
Говоря о прошлом, можно сказать, что объявление doctype было очень неприятным и трудным для запоминания.
В качестве иллюстрации см. Объявление HTML 4.01 Strict DTD:
HTML5 сделал больше! Лучшее решение на данный момент — это короткое объявление:
Тип документа может быть написан в нижнем, верхнем регистре или в смешанном регистре. Как вы заметили, в декларации отсутствует цифра «5». Хотя эта веб-разметка известна как «HTML5».
Элемент
¶
Элемент следует за информацией о типе документа, которая используется для информирования браузера о том, что это документ HTML.Вы можете использовать атрибут lang со значением «en» , чтобы указать, что документ на английском языке. Но в настоящее время даже атрибут lang не нужен для проверки или правильной работы документа.
Не забудьте включить закрывающий тег:
Раздел
¶Следующая часть — раздел
. Элемент содержит метаданные (заголовок документа, набор символов, стили, ссылки, сценарии), конкретную информацию о веб-странице, которая не отображается для пользователя.Элемент используется для указания метаданных, чтобы предоставить браузерам и поисковым системам техническую информацию о веб-странице.
Например, если вы хотите указать автора вашего документа, вы можете использовать элемент следующим образом:
Чтобы определить символ Кодировка документа, вам необходимо установить атрибут charset со значением «utf-8» почти во всех случаях. UTF-8 — кодировка символов по умолчанию для HTML5.
Подробнее о кодировке UTF-8.
Используйте элемент
Далее идет элемент, который устанавливает связь между текущим документом и внешним ресурсом. Как правило, он используется для ссылки на внешнюю таблицу стилей CSS.
Обязательные атрибуты для элемента: rel, href и type.
Теперь вы можете увидеть весь раздел
:
W3Docs - Изучите языки программирования в Интернете.
Элемент
¶ документа содержит содержимое документа.Контент может быть представлен пользовательским агентом по-разному. Например, содержимое может быть текстом, изображениями, ссылками, цветами, графикой и т. Д.Между тегами тела могут быть разные элементы, которым вы можете придать стиль с помощью свойств CSS. Просто добавьте селектор идентификатора или класса в свой HTML-элемент и в разделе
Элемент
Заголовки (элементы h2-h6) ¶
Элементы заголовка
-
используются для краткого описания грядущий раздел.
считается самым важным, а
наименее важным.
<тело>
Заголовок первого уровня
Заголовок второго уровня
Используйте элемент
Элемент
Элемент
Элемент
<статья>
Текст статьи
Элемент
Элемент
<раздел>
Заголовок
Например, абзац
Заголовок 2
Например, другой абзац.
Теперь давайте закончим и посмотрим, как будет выглядеть страница HTML5.
Пример создания страницы HTML5: ¶
Название документа
<стиль>
html,
тело {
высота: 100%;
}
тело {
дисплей: гибкий;
flex-wrap: обертка;
маржа: 0;
}
.заголовок-меню,
нижний колонтитул {
дисплей: гибкий;
align-items: center;
ширина: 100%;
}
.header-menu {
justify-content: гибкий конец;
высота: 60 пикселей;
фон: # 1c87c9;
цвет: #fff;
}
h3 {
маржа: 0 0 8px;
}
ul li {
дисплей: встроенный блок;
отступ: 0 10 пикселей;
стиль списка: нет;
}
в стороне {
гибкость: 0.4;
высота: 165 пикселей;
отступ слева: 15 пикселей;
граница слева: 1px solid # 666;
}
раздел {
гибкость: 1;
отступ справа: 15 пикселей;
}
нижний колонтитул {
отступ: 0 10 пикселей;
фон: #ccc;
}
<заголовок>
<раздел>
<статья>
<заголовок>
Изучите HTML
Язык гипертекстовой разметки
Наш бесплатный учебник по HTML для начинающих научит вас HTML и научит вас создавать веб-сайт с нуля.HTML не сложен, поэтому надеюсь, вам понравится учиться.
Начать тест "HTML Basic"
Вы можете проверить свои навыки работы с HTML с помощью Викторины W3docs.Вы получите 5% за каждый правильный ответ на вопросы с одним вариантом ответа. В вопросе с несколькими вариантами ответов это может быть до 5%. В конце викторины будет отображен ваш общий балл.Максимальный балл - 100%.
<сторона>Наши книги
HTML
CSS
JavaScript
PHP
<нижний колонтитул> Компания © W3docs. Все права защищены.Попробуйте сами »
Основы структуры страницы HTML5 - SitePoint
Ниже приводится отрывок из нашей книги «HTML5 и CSS3 для реального мира, 2-е издание», написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейл.Копии продаются в магазинах по всему миру, или вы можете купить их в виде электронной книги здесь.
Теперь, когда мы разобрались с основами нашего шаблона, давайте добавим немного мяса к костям и придадим нашей странице некоторую структуру.
Позже в этой книге мы собираемся конкретно рассмотреть добавление функций CSS3 и других полезных свойств HTML5; А пока мы рассмотрим, какие элементы мы хотим использовать при создании общего макета нашего сайта. В этом разделе и в следующих главах мы будем много говорить о семантике.Когда мы используем термин «семантика», мы имеем в виду то, как данный HTML-элемент описывает значение своего содержания.
Если вы посмотрите на снимок экрана The HTML5 Herald (или просмотрите сайт в Интернете), вы увидите, что он разделен следующим образом:
заголовок раздела с логотипом и заголовком
панель навигации
содержимое тела разделено на три столбца
статей и рекламных блоков в столбцах
нижний колонтитул, содержащий информацию об авторе и авторских правах
Прежде чем мы решим, какие элементы подходят для этих различных частей нашей страницы, давайте рассмотрим некоторые из наших вариантов.Прежде всего, мы познакомим вас с некоторыми новыми семантическими элементами HTML5, которые можно использовать, чтобы помочь разделить нашу страницу и добавить больше смысла в структуру нашего документа.
Заголовок
Элемент
Естественно, первый элемент, который мы рассмотрим, - это элемент заголовка . В спецификации он кратко описывается как «группа вводных или навигационных средств».
Вопреки тому, что вы обычно думаете, вы можете включить новый элемент заголовка, чтобы представить каждый раздел вашего контента.Он зарезервирован не только для заголовка страницы (который обычно можно пометить как
section , описанным в следующей части; технически мы имеем в виду то, что HTML5 называет «секционированием контента». Это означает, что любой фрагмент контента, которому может потребоваться собственный заголовок, даже если это означает, что на одной странице есть несколько таких фрагментов. Заголовок Элемент может использоваться для включения вводного содержания или средств навигации, которые относятся к любому отдельному разделу страницы, или применяются ко всей странице, или к обоим.
Хотя элемент заголовка часто помещается вверху страницы или раздела, его определение не зависит от его положения. Макет вашего сайта может требовать, чтобы заголовок статьи или сообщения в блоге располагался слева, справа или даже под содержанием; Независимо от этого, вы все равно можете использовать заголовок для описания этого контента.
Раздел
Элемент
Следующий элемент, с которым вам следует ознакомиться, - это элемент section HTML5.Спецификация определяет раздел следующим образом:
Элемент
sectionпредставляет собой общий раздел документа или приложения. Раздел в этом контексте представляет собой тематическую группу контента, обычно с заголовком.
Далее объясняется, что раздел не следует использовать в качестве универсального контейнера, который существует только для целей стилизации или создания сценариев. Если вы не можете использовать раздел в качестве универсального контейнера, например, для достижения желаемого макета CSS, что вам следует использовать? Наш старый друг, элемент div , который семантически бессмысленен.
Возвращаясь к определению из спецификации, содержимое элемента section должно быть «тематическим», поэтому было бы неправильно использовать его в качестве обертки для несвязанных частей контента.
Примеры допустимого использования элементов section :
отдельных разделов интерфейса с вкладками
сегмента страницы «О программе»; например, страница компании "О компании" может включать разделы, посвященные истории компании, ее миссии и команде
.
различных частей длинных «условий обслуживания», стр.
различных раздела новостного онлайн-сайта; например, статьи могут быть сгруппированы в разделы, посвященные спорту, мировым событиям и экономическим новостям
Примечание: правильное использование раздела
Каждый раз, когда веб-дизайнерам становится доступна новая семантическая разметка, возникают споры о том, что составляет правильное использование этих элементов, какова была цель спецификации и так далее.Возможно, вы помните обсуждения о правильном использовании элемента dl в предыдущих спецификациях HTML. Неудивительно, что HTML5 не застрахован от этого явления, особенно когда речь идет об элементе section . Даже Брюс Лоусон, уважаемый специалист по HTML5, признал, что в прошлом неправильно использовал раздел . Для некоторой ясности стоит прочитать сообщение Брюса, в котором объясняется его ошибка.
Вкратце:
раздел- это общий , поэтому, если подходит более конкретный семантический элемент (например,article,asideилиnav), используйте его.разделимеет смысловое значение ; это означает, что содержание, которое он содержит, каким-то образом связано. Если вы не можете кратко описать весь контент, который вы пытаетесь поместить в разделdiv.
Тем не менее, как всегда бывает с семантикой, в некоторых случаях она открыта для интерпретации. Если вы чувствуете, что можете обосновать, почему вы используете именно один элемент, а не другой, дерзайте.В том маловероятном случае, если кто-нибудь когда-либо вас обратится к вам, итоговое обсуждение может быть как интересным, так и обогащающим для всех участников и даже может способствовать пониманию спецификации широким сообществом.
Также имейте в виду, что вам разрешено вкладывать элементы раздела раздела внутри существующих элементов раздела раздела , если это уместно. Например, для веб-сайта онлайн-новостей раздел мировых новостей может быть дополнительно разделен на разделы для каждого крупного глобального региона.
Артикул
Элемент
Элемент article аналогичен элементу section , но есть некоторые заметные отличия. Вот определение согласно спецификации:
Элемент article представляет собой полную или автономную композицию в документе, странице, приложении или сайте и, в принципе, может независимо распространяться или повторно использоваться, например в синдикации.
Ключевые термины в этом определении - автономная композиция и независимо распространяемая .В то время как раздел может содержать любой контент, который может быть тематически сгруппирован, статья должна быть отдельным фрагментом контента, который может стоять сам по себе. Это различие может быть трудным для понимания, поэтому, если вы сомневаетесь, попробуйте тест синдикации: если часть контента может быть повторно опубликована на другом сайте без изменения, или если ее можно отправить как обновление через RSS, или на сайтах социальных сетей, таких как Twitter или Facebook, он имеет задатки статьи .
В конечном счете, вам решать, что представляет собой статья, но вот несколько предложений в соответствии с рекомендациями в спецификации:
Наконец, как и элементы section , элементы article могут быть вложены в другие элементы article . Вы также можете вложить секцию в артикул и наоборот. Все зависит от контента, который вы размечаете.
Элемент
nav
Можно с уверенностью предположить, что элемент nav появится практически в каждом проекте. nav представляет именно то, что подразумевает: группу навигационных ссылок. Хотя чаще всего nav используется для упаковки неупорядоченного списка ссылок, существуют и другие варианты. Например, вы можете обернуть элемент nav вокруг абзаца текста, содержащего основные навигационные ссылки для страницы или раздела страницы.
В любом случае элемент nav должен быть зарезервирован для навигации, которая имеет первостепенное значение. Поэтому рекомендуется избегать использования nav для краткого списка ссылок, например, в нижнем колонтитуле.
Примечание. Пропустить навигационные ссылки
Шаблон проектирования, который вы, возможно, видели реализованным на многих сайтах, - это ссылка «пропустить навигацию». Идея состоит в том, чтобы позволить пользователям программ чтения с экрана быстро пропустить основную навигацию вашего сайта, если они ее уже слышали - в конце концов, нет смысла прослушивать все навигационное меню большого сайта каждый раз, когда вы переходите на новую страницу! Элемент nav может устранить эту необходимость; если программа чтения с экрана видит элемент nav , она может позволить своим пользователям пропускать навигацию без необходимости дополнительной ссылки.В спецификации говорится: «Пользовательские агенты (например, программы чтения с экрана), которые нацелены на пользователей, которые могут извлечь выгоду из исключения навигационной информации при первоначальном рендеринге или которые могут извлечь выгоду из немедленной доступности навигационной информации, могут использовать этот элемент как способ определить, какой контент на странице изначально пропустить или предоставить по запросу (или и то, и другое) ».
Хотя на момент написания этой статьи не все вспомогательные устройства распознают nav , теперь, следуя стандартам, вы гарантируете, что по мере совершенствования программ чтения с экрана ваша страница со временем станет более доступной.
Примечание. Агенты пользователя
Вы часто будете сталкиваться с термином «агент пользователя» при просмотре спецификаций. На самом деле, это просто причудливый термин для браузера - программный «агент», который пользователь использует для доступа к содержимому страницы. Причина, по которой в спецификациях не говорится просто «браузер», заключается в том, что пользовательские агенты могут включать программы чтения с экрана или любые другие технологические средства для чтения веб-страниц.
Вы можете использовать nav более одного раза на данной странице. Если у вас есть основная панель навигации для сайта, для этого потребуется элемент nav .Кроме того, если у вас есть вторичный набор ссылок, указывающих на разные части текущей страницы (с использованием якорей на странице или «локальных» ссылок), он также может быть заключен в элемент nav .
Как и в случае с разделом , были некоторые споры о том, что составляет допустимое использование nav и почему его не рекомендуется использовать в некоторых случаях (например, в нижнем колонтитуле). Некоторые разработчики считают, что этот элемент подходит для нумерации страниц или ссылок на хлебные крошки или для формы поиска, которая представляет собой основное средство навигации по сайту (как в случае с Google).
Это решение, в конечном счете, зависит от вас, как разработчика. Ян Хиксон, главный редактор спецификации HTML5 WHATWG, ответил на вопрос напрямую: «используйте [it] всякий раз, когда вы использовали бы class = nav».
в стороне Элемент
Этот элемент представляет собой часть страницы, которая «косвенно связана с контентом вокруг элемента помимо элемента и может считаться отдельной от этого контента».
Элемент aside может использоваться для обертывания части контента, касательной к:
- отдельная отдельная часть контента (например, статья
целую страницу или документ, как это обычно делается при добавлении боковой панели на страницу или веб-сайт.
Элемент aside никогда не должен использоваться для переноса разделов страницы, которые являются частью основного содержимого; другими словами, помимо не следует вводить в скобки. Контент помимо может стоять сам по себе, но он все равно должен быть частью большего целого.
Некоторые возможные варианты использования помимо включают боковую панель, дополнительный список ссылок или блок рекламы.Также следует отметить, что элемент aside (как в случае заголовка ) не определяется его положением на странице. Это могло быть на стороне или где-то еще. Его определяет само содержание и его отношение к другим элементам.
Нижний колонтитул
Элемент
Последний элемент, который мы обсудим в этой главе, - это элемент нижнего колонтитула . Как и в случае с заголовком , у вас может быть несколько элементов нижнего колонтитула на одной странице, и вы должны использовать нижний колонтитул вместо чего-то общего, например
Элемент нижнего колонтитула, согласно спецификации, представляет нижний колонтитул для раздела содержимого, который является его ближайшим предком. Раздел содержимого может представлять собой весь документ или это может быть раздел , статья или элемент помимо элемента .
Часто нижний колонтитул будет содержать информацию об авторских правах, списки связанных ссылок, информацию об авторе и аналогичную информацию, которую вы обычно считаете находящейся в конце блока контента; однако, как и помимо и заголовок , элемент нижнего колонтитула не определяется с точки зрения его положения на странице, поэтому он не должен появляться в конце раздела или внизу страницы.Скорее всего, будет, но это не обязательно. Например, информация об авторе сообщения в блоге может отображаться над сообщением, а не под ним, и по-прежнему будет считаться информацией нижнего колонтитула.
Примечание: как мы сюда попали?
Если вас немного интересует путь к HTML5 и то, как мы закончили с тегами, которые мы сделали, вы можете проверить книгу Люка Стивенса под названием The Truth about HTML5 . В настоящее время во втором издании книга Луки вызывает споры.Помимо освещения многих технологий HTML5, таких как видео и холст, он также подробно описывает историю HTML5, объясняя некоторые семантические проблемы и проблемы доступности, присущие новым элементам, и дает некоторые рекомендации о том, как их использовать. справиться с этими проблемами.
Лучшие практики HTML5 Структура страницы Повышение SEO 2021
HTML5 был выпущен в 2014 году. С тех пор многие браузеры поддерживают HTML5, используемый на веб-сайтах. HTML5 помогает поисковой системе понять содержание веб-сайта или блога с помощью семантических тегов.В этой статье будут обсуждаться новейшие передовые практики для структуры страницы HTML5 с подробным объяснением каждого важного семантического тега.
Какими должны быть лучшие практики тегов семантики HTML5 для SEO-дружественной структуры страницы?
HTML5 помогает поисковой системе анализировать и понимать структуру страницы и ее содержимое. Это приведет к лучшему SEO на этой странице.
Ранее в предыдущей версии HTML для веб-страницы было всего несколько, но HTML5 дает нам больше свободы для определения нашей веб-страницы.Эти семантические теги помогают поисковым системам анализировать полное содержание веб-страницы.
Давайте разберемся, как. Предположим, вы создали сообщение в блоге, а между сообщениями в блоге разместили ссылки на связанный контент. Если вы используете простой HTML, то Google должен анализировать и обрабатывать связанный контент как часть контента. Но с помощью семантики HTML5 мы можем объявить эту связанную часть контента с помощью тега aside, чтобы поисковая система могла понимать и обрабатывать контент.
Структура страницы HTML5 Лучшие практики SEO
Новые важные семантические элементы, представленные в HTML5 и обсуждаемые в этой статье.Мы обсудим все теги с примерами этого.
Вы можете использовать эти теги, как указано ниже, чтобы сделать вашу страницу удобной для поисковых систем. Обратите внимание, что мы выделяем каждый тег с его структурой, и, наконец, мы завершаем окончательную структуру, которой следует придерживаться. Мы разделили каждый элемент раздела на части, чтобы было понятно, как использовать эти теги HTML5.
Это обзор, окончательная версия структуры страницы HTML5 будет в конце этой статьи.
Документ
<стиль>
/ * добавляем стиль для всех тегов * /
a, abbr, адрес, область {text-align: center;}
<заголовок>
<основной>
<статья>
<заголовок>
Заголовок содержания
Добавить подзаголовок
<сторона>
элемент боковой панели идет сюда
<нижний колонтитул>
нижний колонтитул сайта
Общие сведения о теге Имейте в виду, что тег