Структура страницы HTML5. Избегаем распространенных ошибок в HTML5 разметке
Семантические элементы HTML5
доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов
, которым присваивали классы class или идентификаторы id для наглядности разметки (например,
). С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.
Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было
, стало ). Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению. Для всех элементов доступны .
1. Элемент
Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории:
- Мета содержимое
- Потоковое содержимое
- Секционное содержимое
- Заголовочное содержимое
- Текстовое содержимое
- Встроенное содержимое
- Интерактивное содержимое
Описание HTML5-элементов
1. Элемент
Категории контента:
потоковое содержимое.
Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов
Site description
Элемент
2. Элемент
Категории контента:
Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри
В качестве элементов панели навигации можно использовать не только элементы списков:
Также можно добавлять заголовки внутрь элемента:
3. Элемент
Категории контента:
потоковое содержимое, секционное содержимое.
Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы
...
4. Элемент
Категории контента:
потоковое содержимое, секционное содержимое.
Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент
. В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.
. В браузере обычно отображается курсивом.
9. Элемент
10. Элемент
14. Элемент
Заголовок страницы
. <a href="/chto-takoe-taitl-i-kak-pravilno-ego-pisat-title-stranicy.html">Title страницы</a> должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.</p><p>Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные <div> теги, то есть это <a href="/css3-pozicionirovanie-elementov-css---pozicionirovanie-blochnyh.html">блочные элементы</a>. Но если <div> не имеет семантической нагрузки, то header, nav, main и другие — уже нужно использовать только осмысленно.</p><h3>Заголовок страницы</h3><p>Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.</p><p> <!-- Header страницы -->
<header>
<h1>Site title</h1>
</header>
</p><p>Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.</p><p> <!-- Header страницы -->
<header>
<h1>Site title</h1>
<p>site slogan</p>
</header>
</p><p><b>Замечание по поводу тега H1
</b></p><p>Следует заметить что в HTML5 тег H1 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.)</p><p>До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.</p><h3>Навигация на странице</h3><p>Оформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.</p><p> <!-- Главная Навигация по сайту -->
<nav>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
</nav>
</p><h3>Контент на странице</h3><p>Основное содержимое страницы оформляется в тег main. Это может быть одна статья, или несколько превью статей если <a href="/prodali-zablokirovannyi-iphone-chto-delat-rech-idet-vot-o-chem-video-vzlomali.html">речь идет</a> о странице блога с несколькими записями. Нельзя помещать сайдбар, хедер страницы, футер или главную навигацию в тег main!</p><p> <!-- Основное содержимое страниц -->
<main>
...основной контент страницы...
</main>
</p><h3>Оформление статьи</h3><p>Тег article — служит для обертки статей. В общем этот тег содержит в себе блок контента, который может быть вынут из контекста страницы, и использован отдельно в другом месте. Это может быть статья (полный тескт статьи или превью), пост на форуме, и т.п.</p><p>На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime="2015-09-30" или с указанием часов минут и секунд datetime="2015-09-30T15:25:55" . Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.</p><p> <main>
...
<!-- Статья -->
<article>
<!-- Шапка статьи если в шапке у нас больше чем заголовок -->
<header>
<!-- Заголовок статьи -->
<h1>Article title</h1>
<!-- Дата публикации статьи -->
<time datetime="2015-09-30T15:25:55" pubdate>30 Сентября</time>
</header>
<!-- Подзаголовок страницы -->
<h2>Article sub-title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p><p>Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.</p><h3>Сайдбар или колонка с виджетами</h3><p>Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:</p><p> <!-- Сайдбар -->
<div class="sidebar">
<!-- Виджет в сайдбаре -->
<aside>
<h1>Widget title</h1>
...
</aside>
<!-- Виджет в сайдбаре -->
<aside>
<h1>Последние записи</h1>
...
</aside>
<!-- Виджет в сайдбаре -->
<aside>
<h1>Популярные комментарии</h1>
...
</aside>
</div>
</p><h3>Тег section</h3><p>Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента <section> вне контекста самой страницы. Рекомендуется использовать теги (<h1> – <h6>) для обозначения темы секции.</p><p>В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег <section> . Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section , наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section , но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»</p><p>Пример использования тега section в списке с перечислением городов:</p><p> <h1>An Event Apart</h1>
<section>
<header>
<h2>Cities</h2>
</header>
<p>Join us in these cities in 2010.</p>
<section>
<header>
<h3>Seattle</h3>
</header>
<p>Follow the yellow brick road.</p>
<section>
<header>
<h3>Boston</h3>
</header>
<p>That"s Beantown to its friends.</p>
<section>
<header>
<h3>Minneapolis</h3>
</header>
<p>It"s so <em>nice</em>.</p>
<small>Accommodation not provided.</small>
</p><h3>Подвал сайта — Footer</h3><p>Подвал сайта оформляется тегом <footer></p><p> <!-- Подвал сайта -->
<footer>
<p class="copyright">© 2015 сайт Copyright</p>
</footer>
</p><h3>Заключение</h3><p>Для проверки структуры страницы можно использовать инструмент HTML5 outliner . Он показывает структуру страницы блокам и заголовкам.</p><p>Семантика в HTML5 не ограничивается приведенными выше в статье тегами. Но используя приведенные примеры вы можете освежить свою разметку, и сделать сайт более дружелюбным к поисковым системам, что скажется на более высоком рейтинге сайта в поисковой выдаче.</p><p>В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org</p><p><b>Важное замечание по использованию HTML5 тегов.
</b> В спецификации не указаны жесткие правила по использованию семантических тегов, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа.</p><p><b>Статьи и материалы</b></p>
<p>С появлением новой <a href="/kto-sozdal-pervuyu-versiyu-html-istoriya-razvitiya-html-kakoi-doctype.html">версии HTML</a>, стало возможным верстать страницы по-новому. А именно, в <b>HTML5
</b> появились новые <b>семантические теги
</b>, которые четко выделяют части страницы и делают ее структуру полностью прозрачной. Что это за теги и почему важно использовать их при верстке?</p>
<p>Раньше страницу можно было верстать любым способом, например, простым размещением блоков div. В таком случае семантическое значение вычислялось поисковиками и другими сервисами при помощи классов и идентификаторов. Сейчас же эту проблему решают новейшие теги. Кроме семантики, теги помогают построить <a href="/besprovodnaya-karta-pamyati-obzor-sd-karty-pamyati-transcend-so-vstroennym-wi-fi-modulem.html">внешний вид</a> <a href="/dino-espozito-razrabotka-sovremennyh-veb-prilozhenii-analiz.html">современного веб-приложения</a> или сайта более совершенно.</p>
<p>Согласно <b>спецификации HTML5
</b>, каждый <a href="/teg-na-novuyu-biblioteku-jquery-vvedenie-v-jquery.html">новый тег</a> относится к определенной категории (0 или более) контента. Перечислим эти категории содержимого:</p>
<ul><li>Мета,</li>
<li>Заголовочное,</li>
<li>Текстовое,</li>
<li>Потоковое,</li>
<li>Секционное,</li>
<li>Встроенное,</li>
<li>Интерактивное.</li>
</ul><p>Как видно, категорий совсем немного. Эти условные деления на категории необходимы для более четкого структурирования тегов. Перечислим сами теги: <b>header, nav, article, section, aside, footer, address, main, figure, figcaption, time, mark, bdi, wbr
</b>. Кроме этих тегов, еще нужно не забывать про элементы для описания восточно-азиатских символов: <b>ruby, rb, rt, rtc, rp
</b>. Ниже рассмотрим кратко новые теги, приводится название и категория содержимого в скобках.</p>
<h2>Тег header (потоковое)</h2>
<p>Данный тег позволяет группировать навигационные и вводные элементы. Можно размещать по желанию сколько нужно таких тегов или ни одного, в любой части страницы. Нельзя вкладывать в тег <b>footer
</b> и <b>address
</b>, а также в сам тег <b>header
</b>.</p>
<h2>Тег nav (потоковое, секционное)</h2>
<p>Как видно из названия тега, служит для создания блока навигации, <a href="/voiti-v-bezopasnyi-rezhim-10-bezopasnyi-rezhim-mozhno-zapuskat-i-s.html">различных меню</a> и блоков ссылок. Можно использовать несколько раз на странице.</p>
<h2>Тег article (потоковое, секционное)</h2>
<p>Тег предназначен для группирования статей на странице, его стоит применять если на одной странице размещено несколько статей, если же всего лишь одна статья, тогда можно не использовать данный тег.</p>
<h2>Тег section (потоковое, секционное)</h2>
<p>Тег предназначен для деления страницы на части и разделы, выделения определённых секций на странице. Например, можно сделать на одной странице секцию статей, секцию комментарий, секцию галереи и т.д.</p>
<h2>Тег aside (потоковое, секционное)</h2>
<p>Этот тег позволяет выделить какое-либо содержимое страницы в отдельную логическую часть, например, с его помощью можно сделать боковую колонку, как в книге.</p>
<h2>Тег footer (потоковое)</h2>
<p>Тег служит для создания футера на сайте, места в котором обычно размещается информация о сайте, копирайте и т.д. Можно использовать несколько раз на странице.</p>
<h2>Тег address (потоковое)</h2>
<p>Тег полезен для создания блока с адресной информацией, особенно важно для продвижения в поисковых системах. Содержимое в данном теге обычно выделяется браузерами курсивом.</p>
<h2>Тег main (потоковое)</h2>
<p>Элемент можно использовать для определения основной части страницы, не может быть потомком тегов: <b>article, aside, footer, header, nav
</b>.</p>
<h2>Тег figure (потоковое, корневое)</h2>
<p>Данный тег используется для выделения автономного контента, например, с его помощью можно сделать блок, содержащий фотографию и описание к ней.</p>
<h2>Тег figcaption (-)</h2>
<p>Тег является потомком тега figure и позволяет разместить описание или подпись, а также другую информацию к нужному элементу на странице.</p>
<h2>Тег time (потоковое, текстовое)</h2>
<p>Важный тег, который позволяет ввести дату и время. Это может быть полезно для поисковых систем, а также для пользователей. С появлением данного тега, стало возможным задавать дату в стандартных временных форматах.</p>
<h2>Тег mark (потоковое, текстовое)</h2>
<p>Тег позволяет выделить контент на странице цветом, как маркером на бумаге. Обычно это <a href="/zheltyi-cvet-css-ustanovka-cveta-dlya-teksta-v-css-sposoby-predstavleniya-cvetov.html">желтый цвет</a>, но можно изменить цвет стилями.</p>
<h2>Тег bdi (потоковое, текстовое)</h2>
<h2>Тег wbr (потоковое, текстовое)</h2>
<p>Тег-одиночка, позволяет задать место, где браузеру можно разорвать длинную строку.</p>
<p>Таким образом, новые теги позволяют эффективно производить разметку страницы, это крайне важно для <a href="/ob-odnom-iz-nekorrektnyh-sposobov-poiskovogo-prodvizheniya-i-ego.html">поискового продвижения</a> и для использования веб-страниц в различных сервисах.</p>
<p>Я вынужден просматривать целую кучу страниц на HTML5 и, конечно же, их <a href="/ishodnyi-kod-klavishi-kak-otkryt-ishodnyi-kod-stranicy.html">исходный код</a>. В этой статье я расскажу вам об ошибках и сомнительной разметке, которые мне частенько приходится видеть, и объясню, как их избежать.</p>
<h2>Не используйте <section> как обёртку для оформления</h2>
<p>Одна из самых распространённых проблем, которую я часто вижу в разметке сайтов - это произвольная замена элементов <div> структурными элементами из HTML5, особенно замена оформительской обёртки на <section> . В XHTML или HTML4 я бы увидел что-нибудь такое:</p><p>
<!-- Не копируйте этот код! Он неправильный! -->
<div id="wrapper">
<div id="header">
<h1>Моя супер-пупер страница</h1>
<!-- Содержимое шапки -->
</div>
<div id="main">
<!-- Содержимое страницы -->
</div>
<div id="secondary">
<!-- Вторичное содержимое -->
</div>
<div id="footer">
<!-- Содержимое подвала -->
</div>
</div>
</p><p>Вместо этого я вижу следующее:</p><p>
<!-- Не копируйте этот код! Он неправильный! -->
<footer>
<!-- Содержимое подвала -->
</footer>
</p><p>Честно говоря, это неправильно: <section> - это <b>не обёртка.
</b> Элемент <section> определяет смысловую секцию содержимого для создания структуры документа . Он должен содержать заголовок. Если вы ищете элемент для того чтобы обернуть в него всю страницу (в стиле HTML или XHTML), подумайте, не применить ли стили непосредственно к элементу <body> , как описано у Крока Кеймена . Если же вам всё ещё нужна дополнительная обёртка, используйте <div> . Раз уж Доктор Майк объясняет, что <div> не мёртв , а вам не удаётся найти ничего более удачного, пожалуй, этот элемент будет самым подходящим для создания оформительской обёртки.</p>
<p>Таким образом, корректной разметкой для упомянутого выше примера с использованием HTML5 и пары ролей ARIA будет следующий код. Обратите внимание, что вам, в зависимости от дизайна, всё ещё могут понадобится экстра-элементы <div> .</p><p>
<body>
<header>
<h1>Моя супер-пупер страница</h1>
<!-- Содержимое шапки -->
</header>
<div role="main">
<!-- Содержимое страницы -->
</div>
<aside role="complementary">
<!-- Вторичное содержимое -->
</aside>
<footer>
<!-- Содержимое подвала -->
</footer>
</body>
</p><p>Если вы не уверены, какие элементы использовать, я рекомендую вам обратиться к нашей пошаговой схеме выбора HTML5-элементов для разметки содержимого.</p>
<h2>Используйте <header> и <hgroup> осознанно</h2>
<p>Элемент <hgroup> удалён из спецификации HTML5 и не рекомендован к использованию, <i>прим. редактора.
</i></p>
<p>Нет смысла писать разметку, если этого можно не делать, так ведь? К сожалению, я часто вижу элементы <header> и <hgroup> там, где они совсем не нужны. Вы можете узнать все подробности в наших статьях, посвящённых элементу <header> и элементу <hgroup> , но я коротко резюмирую:</p>
<ul><li>Элемент <header> представляет собой группу вводного содержимого или <a href="/napravleniya-vnedreniya-it-na-transporte-opisanie-sistemy-transportnye.html">навигационных средств</a> и обычно содержит структурный заголовок.</li>
<li>Элемент <hgroup> группирует набор элементов от <h1> до <h6> , представляя собой структурный заголовок в случае, когда заглавие имеет несколько уровней, вроде подзаголовков, альтернативных названий или слоганов.</li>
</ul><h3>Злоупотребление <header></h3>
<p>Думаю, что вы в курсе, что <header> можно использовать в документе несколько раз. Но эта возможность привела к следующим ошибкам:</p><p>
<!-- Не копируйте этот код! Он неправильный! -->
<article>
<header>
<h1>Мой лучший пост</h1>
</header>
<!-- Содержимое записи -->
</article>
</p><p>Если ваш <header> содержит единственный заголовок, избавьтесь от ненужного <header> . Элемент <article> в любом случае гарантирует, что заголовок войдёт в смысловую структуру документа. И поскольку <header> не содержит нескольких элементов, как указано в его описании, зачем вам код, который, в общем-то, не нужен? Будьте проще:</p><p>
<article>
<h1>Мой лучший пост</h1>
<!-- Содержимое записи -->
</article>
</p><h3>Неправильное использование <hgroup></h3>
<p>Раз уж зашла речь о заголовках - я часто вижу неправильное использование <hgroup> . Не следует использовать <hgroup> в сочетании с <header> в случае, когда:</p>
<ul><li>дочерний заголовок всего один или</li>
<li>элемента <hgroup> будет достаточно и без <header> .</li>
</ul><p>Первая проблема выглядит так:</p><p>
<!-- Не копируйте этот код! Он неправильный! -->
<header>
<hgroup>
<h1>Мой лучший пост</h1>
</hgroup>
<p>Ричард Кларк</p>
</header>
</p><p>В этом случае стоит избавиться от <hgroup> и оставить только заголовок:</p><p>
<header>
<h1>Мой лучший пост</h1>
<p>Ричард Кларк</p>
</header>
</p><p>Следующая проблема состоит в очередном использовании элементов там, где они необязательны:</p><p>
<!-- Не копируйте этот код! Он неправильный! -->
<header>
<hgroup>
<h1>Моя компания</h1>
<h2>Основана в 1893 году</h2>
</hgroup>
</header>
</p><p>Когда <hgroup> - это единственный дочерний элемент <header> , то какой смысл в этом <header> ? Если в нём нет дополнительных элементов, соседствующих с <hgroup> , смело избавляйтесь от <header> .</p><p>
<hgroup>
<h1>Моя компания</h1>
<h2>Основана в 1893 году</h2>
</hgroup>
</p><p>Больше примеров использования <hgroup> вы можете найти .</p>
<h2>Не оборачивайте все списки ссылок в <nav></h2>
<p>На момент написания статьи существует более 30-ти новых элементов и неудивительно, что у нас разбегаются глаза, когда дело доходит до создания осмысленной структурной разметки. Поэтому не стоит злоупортреблять всеми доступными сейчас суперсемантическими элементами. Что, к сожалению, часто происходит с элементом <nav> . Спецификация определяет роль <nav> следующим образом:</p>
<blockquote>
<p>Элемент <nav> представляет собой часть страницы, которая ссылается на другие страницы или части текущей, то есть раздел с навигационными ссылками.</p>
<p>Замечание: не все группы ссылок на странице должны быть обёрнуты в элемент <nav> - этот элемент, главным образом, предназначен для группировки главных навигационных блоков. В частности, в подвалах часто содержатся короткие списки ссылок на различные части сайта, вроде правил использования сервиса, <a href="/kak-izmenit-nachalnuyu-stranicu-v-mazile-kak-izmenit-domashnyuyu.html">домашней страницы</a> и копирайтов. Элемента <footer> вполне достаточно для группировки такого рода ссылок; и несмотря на то, что элемент <nav> может быть использован в таких случаях, обычно в этом нет необходимости.</p>
</blockquote>
<p>Ключевая фраза - «главных навигационных блоков». Мы можем дискутировать весь день о значении слова «главный», но для меня это значит:</p>
<ul><li>Самая <a href="/chto-takoe-gps-i-kak-on-rabotaet-samoe-glavnoe-o-gps-navigacii-chto-takoe-gps-i-zachem.html">главная навигация</a>;</li>
<li>Поиск по сайту;</li>
<li>Вторичная навигация (что спорно);</li>
<li>Внутренняя навигация (по длинной статье, например).</li>
</ul><p>И хотя здесь не может быть «правильного» или «неправильного» использования, поверхностный опрос вкупе с моей собственной интерпретацией говорят, что <a href="/v-kakih-sluchayah-ispolzuyutsya-sleduyushchie-graficheskie-formaty-rasprostranennye.html">следующие случаи</a> не подходят для использования <nav> :</p>
<ul><li>Постраничная навигация;</li>
<li>Социальные ссылки, за исключением тех случаев, когда такие ссылки являются основной навигацией, к примеру, на сайтах About Me и Flavours ;</li>
<li>Тэги к записи в блоге;</li>
<li>Категории записи;</li>
<li>Навигация третьего уровня;</li>
<li>Подвалы, набитые ссылками.</li>
</ul><p>Если вы не уверены, стоит ли оборачивать список ссылок в <nav> , просто спросите у себя: «главная ли это навигация?» Чтобы было легче ответить на этот вопрос, обратитесь к следующим правилам:</p>
<ul><li>«Не используйте <nav> , если кажется, что в этом случае может подойти и <section> с заголовком <hx> », - Ян Хиксон, IRC .</li>
<li>Добавите ли вы этот блок в список ссылок «перейти» для улучшения доступности?</li>
</ul><p>Если ответ на оба эти вопроса «нет», то, скорее всего, это не <nav> .</p>
<h2>Общие ошибки с элементом <figure></h2>
<p>Ах, <figure> . Правильным использованием этого элемента вместе с подельником <figcaption> не так-то просто овладеть. Рассмотрим некоторые <a href="/windows-server-nastraivaem-tenevye-kopii-dlya-obshchih-papok-reshenie.html">общие проблемы</a>, которые я вижу при использовании <figure> .</p>
<h3>Не каждая картинка это <figure></h3>
<p>Ранее я советовал вам не писать лишний код там, где этого не требуется. Та же ошибка и здесь. Я видел сайты, где каждая картинка была обёрнута в <figure> . Нет никакой необходимости в добавлении экстра-разметки вокруг картинок только ради самого процесса. Вы просто делаете лишнюю работу и нисколько не улучшаете описание содержимого страницы.</p>
<p>Спецификация обозначает <figure> как «содержимое в потоке, с необязательным заглавием, самодостаточное, обычно упоминаемое в качестве смысловой единицы в основном тексте». Как раз в этом состоит вся красота элемента <figure> , который может быть перемещён из основного содержимого, скажем, в колонку, что никак не повлияет на основной поток документа.</p>
<p>Если это исключительно оформительская картинка, никаким образом не упомянутая в основном документе, то это точно не <figure> . Есть и другие варианты использования, но просто спросите себя: «Нужна ли эта картинка для лучшего понимания контекста?» Если нет, то это вероятно не <figure> , а, возможно, <aside> . Если да, спросите себя: «Можно ли переместить эту картинку в примечания к тексту?» Если ответ на оба вопроса «да», то это, вероятнее всего, <figure> .</p>
<h3>Ваш логотип - это не <figure></h3>
<p>Плавно переходим к следующей проблеме, вышеупомянутые правила применимы и к ней. Вот пара регулярно встречающихся примеров:</p><p>
<!-- Не копируйте этот код! Он неправильный! -->
<header>
<h1>
<figure>
<img src='https://i0.wp.com/logo.png' loading=lazy>
</figure>
Название компании
</h1>
</header>
<!-- Не копируйте этот код! Он неправильный! -->
<header>
<figure>
<img src='https://i0.wp.com/logo.png' loading=lazy>
</figure>
</header>
</p><p>Добавить здесь нечего: это совсем неправильно. Мы можем спорить до посинения насчёт того, должно ли лого находиться внутри <h1> , но мы здесь не за этим. Настоящая проблема - в неправильном употреблении <figure> . Этот элемент должен использоваться, только если он упоминается в документе или контексте общего структурного элемента. Будет честным признать, что ваш логотип вряд ли будет упомянут подобным образом. Просто не делайте так. Всё, что вам нужно, это:</p><p>
<header>
<h1>Название компании</h1>
<!-- и всё остальное здесь -->
</header>
</p><h3>Элемент <figure> - это не только картинки</h3>
<p>Другое распространённое заблуждение насчёт <figure> - что он может быть использован только для картинок. Это не так. Элемент <figure> может быть видео, аудио, графиком (на SVG, к примеру), цитатой, таблицей, блоком кода, фрагментом текста или любой комбинацией этих и многих других элементов. Не ограничивайте использование <figure> только картинками. Наша работа, как энтузиастов от веб-стандартов, заключается в том, чтобы максимально точно описывать содержимое при помощи разметки.</p>
<p>Одной из задач создания новой версии HTML5 было упрощение разметки документа. Решением данной задачи стало создание новых тегов, которые отвечают за структуризацию документа.</p>
<p>Основной принцип построения дерева страницы основывается на дроблении всей страницы на структурные элементы – блоки или секции. К числу этих секций относят такие теги, как <span><
header>
</span> (шапка сайта), <span><
section>,
<
aside>
</span>, и <span><
footer>
</span> (подвал). До момента создания вышеперечисленных тегов верстальщики использовали теги <span><
div>
</span> для структуризации документа с использованием уникальных классов и id. Код, построенный исключительно на <span><
div>
</span> очень сложный для восприятия и не читабельный. Причиной этого является отсутствие логической нагрузки на теге. Это было главным камнем преткновения для поисковых систем.</p>
<p>Данный факт стимулировал появления на свет тегов со смысловой нагрузкой, что стало так называемой «картой» для роботов в дремучем лесу кода.</p>
<h3>Положительные стороны использования новых тегов</h3>
<h4>Поисковая оптимизация</h4>
<p>Первая и весомая положительная сторона использования модернизированного HTML5 это облегчение обработки кода для поисковых роботов. В настоящее время роботы легко отличают вспомогательную информацию на сайте от основной тематики и контента.</p>
<p>Вследствие этого поисковые системы повысят эффективность нахождения уникального контента и плагиата.</p>
<p>Однако стоит отметить, что многие сеошники не уяснили основную суть принципа работы поисковиков по такой разметке, но это дело времени.</p>
<h4>Доступность</h4>
<p>Для наглядного разбора доступности новых методов верстки рассмотрим пример сайта:</p>
<p><img src='https://i2.wp.com/vaden-pro.ru/sites/default/files/razmetka-saita-pod-html5.jpg' width="100%" loading=lazy></p>
<p>Глядя на этот сайт достаточно просто сориентироваться, где находится основной контент, а где вспомогательная информация, а также четко видно, где шапка сайта, менюшки и подвал. Однако при использовании голосовых браузеров очень трудно добраться до сути сайта, к примеру, если это сайт-магазин. Чтобы добраться до сути ассортимента предлагаемого товара пользователю понадобится не дюжее упорство и терпение, которым обладает не каждый.</p>
<p>В таких случаях выходом из ситуации станет использование новых тегов. Они позволят всего одной голосовой командой переходить от названия сайта к меню, основному контенту и вспомогательным элементам навигации сайта.</p>
<p>Эти положительные стороны HTML5 повлияли на неожиданный интерес создателей альтернативных систем поиска, они делают серьезный уклон на семантику документа.</p>
<p>Коротко об основном назначении структурных тегов:</p>
<h3>section</h3>
<p>Данный тег отвечает за структуризацию блоков, связанных чем-либо между собой. Также с помощью этой команды можно делить текст на главы, разделы и подразделы. Обычно в рамках такого тега имеет место заголовок.</p>
<p>Более подробно о использовании этого тега для построения семантической структуры документа можно прочесть в статье "Построение структуры документа в HTML5 используя section "</p>
<p>Для более понятного разъяснения вернемся к примеру разбития объемного текста на главы и параграфы, которые также могут иметь подразделы и подпункты. Обратимся к следующему примеру кода для закрепления материала</p>
<p> <
article>
<
h1>
Заголовок статьи</
h1>
<
p>
Вступительное слово...</
p>
<
section>
<
h1>
Заголовок подраздела статьи</
h1>
<
p>
Контент подраздела</
p>
</
section>
<
section>
<
h1>
Заголовок второго подраздела статьи</
h1>
<
p>
Контент подраздела</
p>
</
section>
</
article>
</p>
<p>Кстати, обратите внимание на наличие нескольких заголовков с маркером h1 это специальный прием, который мы обсудим позже.</p>
<p>Некоторые пользователи утверждают, что <span><
section>
</span> - это не более, чем замена тега блочной верстки <span><
div>
</span>. Однако это утверждение не верно. Существует четкое разграничение, когда применение section уместно, а когда нет. К примеру, при привязки некоторому контейнеру особого стиля нужно обращаться только к <span><
div>
</span>. Также стоит обращать внимание и на смысловую нагрузку, которая есть в блоке- section не употребляется при отсутствии естественного заголовка.</p>
<h3>article</h3>
<p>Опытные веб-мастера называют эту секцию частным случаем тега <span><
section>
</span>. Article выделяет «автономную» (такую, которую в целом можно вырезать из страницы, и при этом она не потеряет своего смысла) часть страницы, которая в свою очередь состоит из взаимосвязанных элементов.</p>
<p>К примерам <a href="/chem-otlichaetsya-aifon-5s-ot-5-otlichiya-apparatnoi-chasti-akkumulyator-i-vremya.html">автономных частей</a> можно отнести анонсы статей на блоге, <a href="/gugl-adsens-vhod-podtverzhdenie-adresa-i-vvod-pin-koda-google-adsense-kak.html">рекламные блоки</a>, различные виджеты (к примеру с погодой).</p>
<p>Однако, в спецификации достаточно заумно описано это понятие, в следствие чего возникло очень много споров по поводу того, что именно использовать: <span><
section>
</span> или <span><
аrticle>
</span>. К основным разногласиям по этому вопросу можно отнести следующие моменты:</p>
<ul><li>для создания главного контейнера веб-страницы следует использовать <span><
section>,
<
аrticle>
</span> или <span><
div>
</span>. С одной стороны все содержимое так или иначе связано между собой, однако сайт можно назвать независимой единицей.</li>
<li>как именно оформлять шапку сайта, а точнее какие теги использовать?</li>
<li>и, наконец, как работать с основным контентом сайта? Нужно использовать <span><
section>
</span> с <span><
аrticle>
</span> внутри или же исключительно пользоваться одним <span><
аrticle>
</span>.</li>
</ul><p>Эта путаница напоминает те времена, когда аналогичные споры возникали при использовании тегов <span><
acronim>
</span> и <span><
abbr>
</span>. В тот раз проблема была решена достаточно просто, но радикально: отказались от использования <span><
acronim>
</span>.</p>
<p>И в связи со всем этим возникает вполне логичный и законный вопрос: зачем использовать <span><
аrticle>
</span>, если можно отказаться от него и работать только с <span><
section>
</span>? В конечном итоге модернизация HTML5 была направлена на облегчения работы веб-мастеров.</p>
<p>Скорее всего в <a href="/v-sluchae-nalichiya-nekorrektnyh-dannyh-v-polyah-komand-fail.html">данном случае</a> отказаться от <span><
аrticle>
</span> будет не корректно, так как мы бы получили абсолютно идентичную разметку в блочном стиле, которая была в <a href="/obnovlenie-po-na-android-6-0-uznaem-tekushchuyu-versiyu-android-otkat-do.html">предыдущей версии</a> HTML. Решением <a href="/otdelnye-voprosy-zashchity-buhgalterskih-dannyh-v-informacionnyh-sistem-ucheta-metody-i-sredstva-zashchit.html">данного вопроса</a> стало бы усовершенствование <span><
section>
</span> таким образом, чтобы были видны четкие различия между основным контентом сайта и вспомогательной информации.</p>
<p>В помощь начинающим мастерам сайтостроения предлагаю несколько особенных черт, по которым можно достаточно просто решить, когда именно нужно использовать <span><
аrticle>
</span>:</p>
<ol><li>Основной подход – имеет ценность для пользователя, привлекает его внимание, тобишь основное содержимое страницы.</li>
<li>Если рационально было бы добавить атрибуты pubdat или cite.</li>
<li>В случае полной автономности рассматриваемого нами фрагмента кода.</li>
</ol><h3>aside</h3>
<p>Создан для отделения основного содержимого страницы от вспомогательного.</p>
<p>Тоесть в него мы можем заключить различного рода цитаты в тексте, <a href="/rezhim-zashchity-ot-sboev-windows-10-chto-vy-mozhete-delat-v-menyu-dopolnitelnye-parametry.html">дополнительные меню</a>, <a href="/kak-ubrat-reklamnyi-banner-s-kompyutera-variant-resheniya-problemy-dlya.html">рекламные баннеры</a> и прочую информацию не имеющую отношения к основному содержимому страницы.</p>
<p>Чаще всего подобная информация на сайте располагается в сайдбаре.</p>
<h3>header</h3>
<p>Служит для четкого выделения заглавной части страницы. В нем располагаются заглавия как всего документа, так и отдельных его частей. Чаще всего внутри этой секции можно встретить такие теги, как <span><
hgroup>
</span> и <span><
h1>-<
h6>
</span>. Однако это предписание не обязательно, в принципе в header могут распологаться любые теги.</p>
<p>Стоит отметить, что в первую очередь данный тег применяют при создании шапки, как указано в примере:</p>
<p> <
header>
<
a href=
"/"
><
img src=
"/logo.png"
alt=
<span>"Vaden Pro/></a>
<ul>
[меню]
</ul>
[поиск]
</header>
</p>
<p>Однако не стоит ограничивать данный тег шапкой для веб-страницы. <span><
header>
</span> он может располагаться внутри <span><
section>,
<
article>,
<
aside>
</span> и в особых исключительных случаях в <span><
nav>
</span>. При таком подходе тег <span><
header>
</span> является <a href="/nedopustimyi-dochernii-element-instrukciya-po-importu-failov-ot.html">дочерним элементом</a> и соответствует заглавию этой отдельной части. Рассмотрим пример, когда <span><
header>
</span> используется внутри <span><
article>
</span>:</p>
<p> <
article>
<
header>
<
h1>
Важный текст</
h1>
<
time>
21.
02.
10</
time>
</
header>
[
Текст публикации]
</
article>
</p>
<p>Стоит отметить, что header собирает воедино заголовок части, однако если эта самая часть состоит только из названия, то применять данный тег не следует:</p>
<p> <
article>
<
header>
<
h1>
Важный текст </
h1>
</
header>
[
Текст публикации]
</
article>
</p>
<p>Это <a href="/noutbuku-ne-hvataet-operativnoi-pamyati-neracionalnoe-ispolzovanie.html">нерациональное использование</a> header, более правильной с точки зрения семантики будет следующая запись кода:</p>
<p> <
article>
<
h1>
Важный текст </
h1>
[
Текст публикации]
</
article>
</p>
<h3>footer</h3>
<p>Опускаясь по структуре сайта все ниже мы постепенно подошли к нашему «подвалу», в котором располагается некоторая описательная информация раздела или сайта в общем. Эта информация отделяется тегом <span><
footer>
</span>:</p>
<p> <
footer>
<
p id=
"copyright"
>&
copy
;
2014
Vaden Pro</
p>
<
p>
Все права защищены</
p>
</
footer>
</p>
<p>В этой части сайта принято располагать информацию о правах на авторство <a href="/mezhdunarodnaya-peresylka-pisma-turkmenistana-pochta-turkmenistana.html">данного ресурса</a>, копирайт, различные ссылки на вспомогательные ресурсы и прочее. Именно поэтому нельзя ограничивать использование тега <span><
footer>
</span> исключительно на <a href="/kak-zakrepit-domashnyuyu-stranicu-kak-sdelat-glavnuyu-stranicu.html">главной странице</a>. рационально будет его использование и в различных разделах ресурса. Также не стоит заблуждаться, что <span><
footer>
</span> обязательно должен находиться в самом низу сайта. К примеру, имеет место такая разметка страницы:</p>
<p> <
article>
<
header>
<
h1>
Важная информация</
h1>
<
time>
05.
04.
2015</
time>
</
header>
<
footer>
<
div class
=
"autor"
>
Данил Гойда</
div>
<
a href=
"#"
>
об авторе</
a>
|
<
a href=
"#"
>
Все публикации автора</
a>
</
footer>
[
сама публикация]
</
article>
</p>
<h3>nav</h3>
<p>Использование nav отвечает за разделение навигационной части сайта и основного контента. Внутри этого блока могут располагаться не только ссылки на другие страницы сайта, но и якорные ссылки по <a href="/kak-sohranit-tekushchuyu-stranicu-kak-sohranit-veb-stranicu-v-pdf-bez-vsyakih.html">текущей странице</a>. Для примера посмотрим на следующий код:</p>
<p> <
header>
<
a href=
"/"
><
img src=
"/logo.png"
alt=
"Vaden Pro"
/></
a>
<
nav>
<
ul>
[
меню]
</
ul>
</
nav>
[
поиск]
</
header>
</p>
<p>Стоит также обратить внимание на то, что формирует не просто перечень ссылок, а самостоятельную секцию со сложной структурой. Смотрим:</p>
<p> <
nav>
<
a href=
""
>
Сложная навигация</
a>
<
section>
<
h1>
Первый раздел сайта</
h1>
<
ul>
<
li><
a href=
""
>
пункт</
a></
li>
[
...
]
</
ul>
</
section>
<
section>
<
h1>
Второй раздел сайта</
h1>
<
ul>
<
li><
a href=
""
>
Пункт</
a></
li>
</
ul>
</
section>
</
nav>
</p>
<p>И не стоит забывать о том, что <span><
nav>
</span> формирует основной навигационный блок веб-страницы. дополнительные навигационные элементы сайта, такие как вспомогательные ссылки в футере или блоки, повторяющие навигацию, не должны выделяться этим тегом.</p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
</div>
<div class="comment_box" id="comments">
</div>
</div>
<div id="sidebar">
<div class="widget widget_nav_menu" id="nav_menu-2">
<div class="menu-mainmenu-container">
<ul id="menu-mainmenu-2" class="menu">
<li class="submenu"><a href="/category/internet/">Интернет</a>
</li>
<li class="submenu"><a href="/category/programs/">Программы</a>
</li>
<li class="submenu"><a href="/category/instructions/">Инструкции</a>
</li>
<li class="submenu"><a href="/category/browsers/">Браузеры</a>
</li>
<li class="submenu"><a href="/category/windows-10/">Windows 10</a>
</li>
<li class="submenu"><a href="/category/android/">Android</a>
</li>
<li class="submenu"><a href="/category/ios/">Ios</a>
</li>
<li class="submenu"><a href="/category/communication/">Связь</a>
</li>
</ul>
</div>
</div>
<div class="widget">
<div class="heading star">Последние записи</div>
<div class="popular_posts">
<div class="news_box">
<a href="/kak-sdelat-krasivyi-shrift-v-skaipe-specialnye-vozmozhnosti.html" class="thumb"><img width="95" height="95" src="/uploads/c1afcb15cc18934c2083c812c47be1aa.jpg" class="attachment-mini size-mini wp-post-image" alt="Специальные возможности в скайп" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy></a>
<div class="element">
<div class="title">
<a href="/kak-sdelat-krasivyi-shrift-v-skaipe-specialnye-vozmozhnosti.html">Специальные возможности в скайп</a>
</div>
</div>
</div>
<div class="news_box">
<a href="/nazvanie-dlya-torgovyh-i-proizvodstvennyh-kompanii-nastroika-podklyucheniya-k.html" class="thumb"><img width="95" height="95" src="/uploads/d460c0cdd6e5b902fa0045dc91ae3933.jpg" class="attachment-mini size-mini wp-post-image" alt="Настройка подключения к интернету по PPPoE в Windows XP Сведения об исправлении" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy></a>
<div class="element">
<div class="title">
<a href="/nazvanie-dlya-torgovyh-i-proizvodstvennyh-kompanii-nastroika-podklyucheniya-k.html">Настройка подключения к интернету по PPPoE в Windows XP Сведения об исправлении</a>
</div>
</div>
</div>
<div class="news_box">
<a href="/video-urok-po-ustanovke-operacionnoi-sistemy-windows-cherez-bios-ili-bios.html" class="thumb"><img width="95" height="95" src="/uploads/e8e7f51b4651c595ca3e98372d23557b.jpg" class="attachment-mini size-mini wp-post-image" alt="Как поменять винду на старом биосе" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy></a>
<div class="element">
<div class="title">
<a href="/video-urok-po-ustanovke-operacionnoi-sistemy-windows-cherez-bios-ili-bios.html">Как поменять винду на старом биосе</a>
</div>
</div>
</div>
<div class="news_box">
<a href="/kak-snyat-kopiyu-zhestkogo-diska-sozdanie-tochnoi-kopii.html" class="thumb"><img width="95" height="95" src="/uploads/8af0adc90f179ac888910383b161320a.jpg" class="attachment-mini size-mini wp-post-image" alt="Создание точной копии системы со всеми программами при помощи Acronis True Image" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy></a>
<div class="element">
<div class="title">
<a href="/kak-snyat-kopiyu-zhestkogo-diska-sozdanie-tochnoi-kopii.html">Создание точной копии системы со всеми программами при помощи Acronis True Image</a>
</div>
</div>
</div>
<div class="news_box">
<a href="/portativnyi-akkumulyator-10400-mah-vneshnie-akkumulyatory-xiaomi.html" class="thumb"><img width="95" height="95" src="/uploads/4e7448a706361c57dce78ae0692750b6.jpg" class="attachment-mini size-mini wp-post-image" alt="Внешние аккумуляторы Xiaomi" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy></a>
<div class="element">
<div class="title">
<a href="/portativnyi-akkumulyator-10400-mah-vneshnie-akkumulyatory-xiaomi.html">Внешние аккумуляторы Xiaomi</a>
</div>
</div>
</div>
</div>
</div>
<div class="widget">
<div class="heading star">Популярное</div>
<div class="popular_posts">
<div class="news_box">
<a href="/kak-dobavit-fotki-v-oblako-chto-takoe-oblachnoe-hranilishche-i-zachem-ono.html" class="thumb"><img width="95" height="95" src="/uploads/fcc4d2d44087b5a90a6e78dc82bc824b.jpg" class="attachment-mini size-mini wp-post-image" alt="Что такое "Облачное хранилище" и зачем оно нужно?" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy></a>
<div class="element">
<div class="title">
<a href="/kak-dobavit-fotki-v-oblako-chto-takoe-oblachnoe-hranilishche-i-zachem-ono.html">Что такое "Облачное хранилище" и зачем оно нужно?</a>
</div>
</div>
</div>
<div class="news_box">
<a href="/ne-obnovlyaetsya-xiaomi-puti-resheniya-problemy-obnovlenie-xiaomi-cherez-tri-tochki-miui-ne.html" class="thumb"><img width="95" height="95" src="/uploads/a7bef9d8b84da40907cac709e07fa301.jpg" class="attachment-mini size-mini wp-post-image" alt="Обновление Xiaomi через три точки Miui не удалось загрузить обновление" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy></a>
<div class="element">
<div class="title">
<a href="/ne-obnovlyaetsya-xiaomi-puti-resheniya-problemy-obnovlenie-xiaomi-cherez-tri-tochki-miui-ne.html">Обновление Xiaomi через три точки Miui не удалось загрузить обновление</a>
</div>
</div>
</div>
<div class="news_box">
<a href="/gromko-rabotaet-kuler-na-noutbuke-chto-delat-esli-silno-shumit.html" class="thumb"><img width="95" height="95" src="/uploads/8e9e00cec38fd86a3217cf3e6e8e1646.jpg" class="attachment-mini size-mini wp-post-image" alt="Что делать, если сильно шумит кулер" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy></a>
<div class="element">
<div class="title">
<a href="/gromko-rabotaet-kuler-na-noutbuke-chto-delat-esli-silno-shumit.html">Что делать, если сильно шумит кулер</a>
</div>
</div>
</div>
</div>
</div>
<div class="widget">
<div class="heading">Новости</div>
<div class="business_news">
<div class="news">
<div class="date">2024-05-29 01:42:15</div>
<a href="/samye-deshevye-internet-magaziny-kitaya-kitaiskie-internet-magaziny-pokupki-iz-kitaya-cherez-internet-n.html" class="title">Китайские интернет-магазины Покупки из китая через интернет на русском</a>
</div>
<div class="news">
<div class="date">2024-05-29 01:42:15</div>
<a href="/obzor-naushnikov-beats-tour-otlichnoe-mobilnoe-reshenie-obzor-naushnikov.html" class="title">Обзор наушников Beats Tour: отличное мобильное решение Beats Mixr: складные и легкие наушники</a>
</div>
<div class="news">
<div class="date">2024-05-29 01:42:15</div>
<a href="/aksessuary-dlya-fitnes-brasletov-fitnes-braslet-xiaomi-mi-band.html" class="title">Фитнес-браслет Xiaomi Mi Band: описание, инструкция, отзывы Браслет мии</a>
</div>
<div class="news">
<div class="date">2024-05-28 01:38:25</div>
<a href="/yandeks-navigator-v-ispanii-kakie-prilozheniya-sleduet-skachat-pered.html" class="title">Какие приложения следует скачать перед поездкой в Испанию?</a>
</div>
<div class="news">
<div class="date">2024-05-27 01:38:39</div>
<a href="/huavei-gr-5-huawei-gr3-sravni-ceny---kupi-vygodno-apparatnaya-platforma-i-proizvoditelnost.html" class="title">Huawei GR3 • Сравни цены - купи выгодно!</a>
</div>
</div>
</div>
<div class="widget ai_widget" id="ai_widget-5">
<div class='dynamic dynamic-13' style='margin: 8px 0; clear: both;'>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="fixed">
<div class="inner">
<div class="footer_l">
<a href="/" class="logo" style="background:none;">viws.ru</a>
<div class="copyright">
<p>viws.ru - Все о современной технике. Поломки, соцсети, интернет, вирусы</p>
<p><span>© 2024 - Все права защищены</span></p>
</div>
</div>
<div class="footer_c">
<ul id="menu-topmenu-1" class="nav">
<li><a href="/feedback.html">Контакты</a></li>
<li><a href="">О сайте</a></li>
<li><a href="">Реклама на сайте</a></li>
</ul>
<div class="footer_menu">
<ul id="menu-nizhnee-1" class="">
<li id="menu-item-"><a href="/category/internet/">Интернет</a></li>
<li id="menu-item-"><a href="/category/programs/">Программы</a></li>
<li id="menu-item-"><a href="/category/instructions/">Инструкции</a></li>
<li id="menu-item-"><a href="/category/browsers/">Браузеры</a></li>
</ul>
<ul id="menu-nizhnee-2" class="">
<li id="menu-item-"><a href="/category/internet/">Интернет</a></li>
<li id="menu-item-"><a href="/category/programs/">Программы</a></li>
<li id="menu-item-"><a href="/category/instructions/">Инструкции</a></li>
<li id="menu-item-"><a href="/category/browsers/">Браузеры</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">jQuery(function($) { $(document).on("click", ".pseudo-link", function(){ window.open($(this).data("uri")); } );} );</script>
<script type='text/javascript' src='https://viws.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.2'></script>
<script type='text/javascript' src='https://viws.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script>
<script type='text/javascript' src='https://viws.ru/wp-content/themes/delo/assets/scripts/theme.js'></script>
<script type='text/javascript'>
var q2w3_sidebar_options = new Array();
q2w3_sidebar_options[0] = { "sidebar" : "sidebar", "margin_top" : 60, "margin_bottom" : 200, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-8','ai_widget-5'] } ;
</script>
<script type='text/javascript' src='https://viws.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script>
<script async="async" type='text/javascript' src='https://viws.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.1'></script>
</body>
</html>
...
...
...
внутри
Можно создавать родительские элементы
Заметки о природе
...
...
Исторические заметки
...
...
5. Элемент
Категории контента:
потоковое содержимое, секционное содержимое.
Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого)
. Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов:
6. Элемент
Категории контента:
потоковое содержимое.
Представляет собой нижний колонтитул содержащей его секции или корневого элемента. Обычно содержит информацию об авторе статьи, данные о копирайте и т.д. Если используется как колонтитул всей страницы, содержимое дополняется сведениями об авторских правах, ссылками на условия использования, контактную информацию, ссылками на связанное содержимое и т.п.
В одном веб-документе может быть несколько элементов
7. Элемент
Категории контента:
потоковое содержимое.
Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента
8. Элемент
Категории контента:
потоковое содержимое.
Элемент
Элемент
Пудель
О породе
9. Элемент
Категории контента:
потоковое содержимое, корневое секционное содержимое.
Элемент
Элемент
10. Элемент
Элемент
11. Элемент
Категории контента:
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime , в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:
Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD . Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):
12. Элемент
Категории контента:
потоковое содержимое, текстовое содержимое.
Текст, помещенный внутрь тега , выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.
13. Элемент
Категории контента:
потоковое содержимое, текстовое содержимое.
Отделяет фрагмент текста, который должен быть изолирован от остального текста для двунаправленного форматирования текста. Используется для текстов, написанных одновременно на языках, читающихся слева направо и справа налево.
14. Элемент
Категории контента:
потоковое содержимое, текстовое содержимое.
Одиночный тег, показывает браузеру место, где можно добавить разрыв длинной строки в случае необходимости.
15. Элементы для описания Восточно-Азиатских символов
Категории контента:
потоковое содержимое, текстовое содержимое.
Элемент позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов
— один и более элементов
Элементы
Элемент
Элемент
Сегодня мы поговорим о семантике в HTML5. Я уже писал небольшой обзорный пост про . Рекомендую с ней предварительно ознакомиться, перед прочтением этой статьи. Сейчас мы разберемся с этим вопросом более подробно, о том как правильно и грамотно составлять семантическую структуру HTML5 документа.
В этой статье мы будем постепенно создавать html страницу, и оформлять ее семантическими HTML5 тегами.
Рисунок - Семантическая структура для HTML5 страницы.
DOCTYPE и meta теги в заголовке страницы
Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head:
Я добавил тег который отвечает за ключевые слова. И тег который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега