Структура страницы HTML5

13.05.2019

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

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

Рисунок - Семантическая структура для HTML5 страницы.

DOCTYPE и meta теги в заголовке страницы

Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head:

Заголовок страницы

Я добавил тег который отвечает за ключевые слова. И тег который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега . <a href="/kak-pravilno-sostavit-zagolovok-stranicy-principy/">Title страницы</a> должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.</p><p>Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные <div> теги, то есть это блочные элементы. Но если <div> не имеет семантической нагрузки, то header, nav, main и другие — уже нужно использовать только осмысленно.</p><h3>Заголовок страницы</h3><p>Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.</p><p>  <header> <h1>Site title</h1> </header> </p><p>Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.</p><p>  <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 использовался для подзаголовков, или для разделов <a href="/glavnaya-st-skaip-skachat-bystro-kak-proverit-svyaz-i-izobrazhenie/">главной статьи</a>. 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="/samoe-glavnoe-o-gps-navigacii-chto-takoe-gps-i-zachem-on-nuzhen-chto-takoe-gps-i-kak/">главную навигацию</a> в тег main!</p><p>  <main> ...основной контент страницы... </main> </p><h3>Оформление статьи</h3><p>Тег article — служит для обертки статей. В общем этот тег содержит в себе блок контента, который может быть вынут из контекста страницы, и использован отдельно в другом месте. Это может быть статья (полный тескт статьи или превью), пост на форуме, и т.п.</p><p>На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный <a href="/vyravnivanie-elementov-css-vyravnivanie-dopolnitelnym-inline-elementom/">inline элемент</a>. У тега 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="/s-chego-dolzhen-nachinatsya-kazhdyi-html-dokument-bazovaya-struktura-html/">структуры HTML</a> документа.</p> <p>Если вы посмотрите на сайт «<span>HTML5 Herald </span>», то увидите, что он разделен следующим образом:</p> <ul><li>шапка сайта с логотипом и заголовком;</li> <li>панель навигации;</li> <li>содержимое тела разделено на три столбца;</li> <li>статьи и <a href="/dfp-google-cistema-upravleniya-reklamoi-doubleclick-for-publishers-reklamnye-bloki/">рекламные блоки</a> в столбцах;</li> <li>подвал сайта, содержащий информацию об авторе и авторских правах.</li> </ul><p>Прежде чем мы определим, какие HTML-элементы подходят для <a href="/pravopisanie-n-i-nn-v-raznyh-chastyah-rechi-chto-delat-esli-kompyuter-ne-mozhet/">разных частей</a> страницы, давайте рассмотрим ряд других вопросов. Прежде всего, мы познакомимся с несколькими новыми семантическими элементами HTML5 , которые можно использовать, чтобы разделить страницу и сделать структуру документа более осмысленной.</p> <h2>Элемент header</h2> <p>Первым элементом структуры HTML , который мы рассмотрим, является элемент header . Спецификация описывает его кратко — «<span>группа вводных или навигационных элементов </span>».</p> <p>Вопреки мнению, вы можете использовать header , чтобы представить каждый раздел контента. Когда мы используем здесь слово «раздел », мы не ограничиваемся разделами, разбитыми с помощью элемента section. Технически мы говорим о том, что в HTML5 называется «<span>секционным контентом </span>». Это означает любой фрагмент контента, которому может потребоваться собственный заголовок, даже если это приведет к тому, что на одной странице будет несколько таких фрагментов.</p> <p>Элемент header может использоваться для включения вводного контента или средств навигации, которые являются специфическими для любого раздела страницы, или применяются ко всей странице.</p> <p>Хотя элемент header часто размещается в верхней части страницы или раздела, его определение не зависит от положения. В структуре сайта может быть указано, что заголовок статьи или записи в блоге может размещаться справа, слева или даже ниже контента. Независимо от этого, все равно можете использовать header для описания контента.</p> <h3>Элемент section</h3> <p>Спецификация <span>дает для него такое определение </span>:</p> <p>Элемент <span>section представляет собой общий раздел документа или приложения. Раздел в этом контексте представляет собой тематическую группу контента, как правило, с заголовком. </p> <p>Далее поясняется, что section не должен использоваться в качестве универсального контейнера для добавления стилей или скриптов. Если мы не можем использовать section в качестве общего контейнера — например, чтобы получить желаемый макет через CSS – то, что для этого использовать? В этом нам поможет <a href="/vertikalnoe-i-gorizontalnoe-vyravnivanie-po-centru-gorizontalnoe-ivertikalnoe-centrirovanie-na/">элемент div</a> , который не имеет определенного семантического значения.</p> <p>Возвращаясь к определению из спецификации, содержимое элемента section должно быть «тематическим », поэтому неправильно использовать его для группировки несвязанных фрагментов контента.</p> <p>Некоторые примеры корректного использования элемента section в структуре HTML страницы :</p> <ul><li>отдельные разделы интерфейса с вкладками;</li> <li>сегменты страницы «О нас » может включать разделы, посвященные истории компании;</li> <li>различные части <a href="/zalipaet-knopka-gromkosti-na-telefone-vozmozhnosti-knopok/">длинной страницы</a> «<span>условий обслуживания </span>»;</li> <li>различные разделы сайта онлайн-новостей — статьи могут быть сгруппированы в разделы, посвященные спорту, политике и экономическим новостям.</li> </ul><h4>Корректное использование section</h4> <p>Каждый раз, когда веб-дизайнерам предоставляется новая <a href="/voprosy-o-semanticheskoi-razmetke-semanticheskaya-razmetka-i-json-ld-chto-takoe/">семантическая разметка</a>, будет обсуждаться, что является <a href="/stranicah-paginacii-zachastuyu-vidoizmenyaetsya-lish-isklyuchenie-paginacii-iz/">правильным использованием</a> этих элементов, какую цель преследовало ее введение в спецификации и т. д.</p> <p>Вкратце :</p> <ul><li>section является <a href="/strochnye-elementy-osnovy-html-obshchie-pravila-blochnye-i-strochnye-elementy/">общим элементом</a>, поэтому, если требуется более конкретный <a href="/semanticheskaya-struktura-dlya-html5-stranicy-semantika-v-html5-osnovy/">семантический элемент</a> (<span>например, article , aside или nav </span>), используйте их.</li> <li>section имеет семантическое значение. Это означает, что контент, который он содержит, связан. Если вы не можете кратко описать весь контент, который хотите добавить в раздел, используя всего несколько слов, то нужно использовать семантически нейтральный контейнер — скромный div .</li> </ul><p>В некоторых случаях есть место для свободной интерпретации. Если чувствуете, что имеет смысл использовать именно <a href="/logicheskoei-fizicheskoe-formatirovanie-i-zadat-stil-dlya-ukazannogo/">данный элемент</a>, а не другой, делайте это. Даже если кто-либо упрекнет вас в этом, дискуссия, которая возникнет в результате, может быть интересной и познавательной для всех, кто в ней участвует.</p> <p>В структуре сайта HTML разрешается вкладывать элементы section в существующие элементы section, если это необходимо. Например, для сайта новостей раздел «Мировые новости» можно разделить на разделы для каждого крупного региона.</p> <h3>Элемент article</h3> <p>Элемент article во многом аналогичен элементу section , но есть и существенные различия. <span>Определение спецификации </span> гласит:</p> <p>Элемент <span>article представляет собой полный или самодостаточный набор в документе, на странице, в приложении или на сайте. Он может независимо распространяться или повторно использоваться. </p> <p>Ключевыми моментами этого определения являются самодостаточный набор и независимо распространяться. В то время как section может содержать любой контент, который может быть сгруппирован тематически, article должен представлять собой единый контент, который может использоваться сам по себе. Это различие может быть трудно различимо для вас.</p> <p>Поэтому, когда вы сомневаетесь, попробуйте протестировать синдикацию: если часть контента может быть переиздана на другом сайте без изменения, или если ее можно выложить как обновление через RSS , у нее есть признаки article .</p> <ul><li>сообщение на форуме;</li> <li>журнальная или газетная статья;</li> <li>запись в блоге;</li> <li>комментарий, оставленный пользователем в блоге или к статье.</li> </ul><p>Как и в случае с section , элементы article могут быть вложены в другие article . Также можно вложить элемент section внутрь article , и наоборот.</p> <h3>Элемент nav</h3> <p>Можно предположить, что элемент nav будет использоваться практически в каждой структуре <a href="/otkryt-html-fail-onlain-preobrazovanie-html-faila-v-tekstovyi-dokument-ms/">HTML файла</a> . Он представляет собой то, что подразумевается: группу навигационных ссылок. Хотя наиболее распространенное использование для nav будет заключаться в размещении <a href="/html-vlozhennye-numerovannye-spiski-markirovannyi-i-numerovannyi-spisok/">маркированных списков</a> ссылок. Есть и другие варианты. Например, можно обернуть в элемент nav абзац текста, содержащего основные ссылки навигации страницы или раздела.</p> <p>В любом случае элемент nav должен быть зарезервирован для навигации, и это его первостепенное значение. Рекомендуется избегать использования nav для <a href="/kakie-nuzhny-programmy-dlya-kompyutera-kakie-byvayut/">краткого списка</a> ссылок, размещаемого в подвале сайта.</p> <h4>Примечание: Пропуск ссылок навигации</h4> <p>Решение, применение которого вы видели на многих сайтах — это ссылка «<span>пропустить навигацию» </span>. Идея состоит в том, чтобы позволить пользователям экранных дикторов быстро пропустить основную навигацию сайта, если они уже прослушали ее.</p> <p>При каждом переходе на <a href="/kak-udalit-stranicu-novom-instagram-kak-udalit-stranicu-v-instagrame/">новую страницу</a> нет смысла слушать главное меню навигации сайта! Элемент nav может помочь в решении этого вопроса. Если <a href="/sintez-rechi-skachat-golosa-ark-fail-ekrannyi-diktor-dlya/">экранный диктор</a> видит элемент nav, он может позволить пропустить навигацию, не требуя <a href="/css-vyravnivanie-vnutri-bloka-ssylki-i-dopolnitelnaya-literatura-position-i/">дополнительной ссылки</a>. В спецификации указано:</p> <p>«<span>Пользовательские агенты (<span>например, программы чтения с экрана </span>), предназначенные для пользователей, которые могут получить пользу от навигационной информации, опущенной при первоначальном рендеринге, или получить пользу от немедленного доступа к навигационной информации, могут использовать элемент в качестве способа определения, какой контент на странице сначала пропустить или предоставить по запросу </span>».</p> <h4>Примечание. Пользовательские агенты</h4> <p>При изучении спецификации структуры HTML 5 вы столкнетесь с термином «<span>пользовательский агент </span>». Он обозначает браузер, который пользователь использует для доступа к содержимому веб-страницы. Причина, по которой в спецификации не говорят просто «браузер », заключается в том, что пользовательские агенты могут включать в себя программы чтения с экрана или другие технологические средства.</p> <p>Можно использовать nav более одного раза на странице. Если у вас есть основная панель навигации сайта, она обертывается в элемент nav . Кроме этого, если есть вторичный набор ссылок, указывающих на разные части текущей страницы, его тоже можно обернуть в элемент nav .</p> <p>Некоторые разработчики считают, что nav подходит для разбивки на страницы или ссылок «<a href="/hlebnye-kroshki-na-wordpress-bloge-s-plaginom-i-bez-poshagovaya/">хлебных крошек</a> ». А также для формы поиска, которая является основным средством навигации по сайту.</p> <p>Данное решение в конечном итоге зависит от вас. Ян Хиксон , главный редактор спецификации HTML5 WHATWG , прямо ответил на этот вопрос: «<span>Используйте [его] там, где бы вы использовали class = nav </span>».</p> <h3>Элемент aside</h3> <p>Представляет часть страницы, которая «<span>связана с содержимым вокруг элемента aside и может рассматриваться отдельно от этого содержимого </span>».</p> <p>Элемент aside можно использовать для обертывания части контента, которая имеет отношение к:</p> <ul><li>Конкретному контенту (<span>например, статья или раздел </span>);</li> <li>Целой странице или документу, как это обычно делается при добавлении боковой панели на страницу или сайт.</li> </ul><p>Элемент aside не должен использоваться для обертывания разделов страницы, которые являются частью основного содержимого.</p> <p>Другими словами, aside не должен быть основным родительским элементом. Содержимое aside может размещаться само по себе, но оно все равно должно быть частью большего целого.</p> <p>Варианты использования элемента aside в структуре index html : боковая панель, дополнительный список ссылок или блок рекламы. Следует также отметить, что элемент aside <span>(как и в случае с элементов header </span>) не определяется его позицией на странице. Он может располагаться сбоку или в другом месте.</p> <h3>Элемент footer</h3> <p>Как и в случае с элементом header , может быть несколько элементов footer на одной странице, и вы должны использовать footer вместо <div id = "footer">.</p> <p>Элемент footer , согласно спецификации, представляет собой футер для раздела контента, являющегося его ближайшим предком. Разделом контента может быть весь документ или элемент section , article , aside .</p> <p>Одной из задач создания <a href="/obnovlenie-mobilnoi-versii-vkontakte-novaya-versiya-mobilnogo-vk-chto/">новой версии</a> HTML5 было упрощение разметки документа. Решением данной задачи стало создание новых тегов, которые отвечают за структуризацию документа.</p> <p>Основной принцип построения дерева страницы основывается на дроблении всей страницы на <a href="/osnovnye-strukturnye-elementy-okna-sostoyaniya-okon-v-windows-izmenenie/">структурные элементы</a> – блоки или секции. К числу этих секций относят такие теги, как <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 это облегчение обработки кода для <a href="/poiskovyi-robot-kto-takie-poiskovye-roboty/">поисковых роботов</a>. В настоящее время роботы легко отличают вспомогательную информацию на сайте от основной тематики и контента.</p> <p>Вследствие этого поисковые системы повысят эффективность нахождения <a href="/gde-brat-unikalnye-stati-to-gde-brat-unikalnyi-kontent-teksty-iz/">уникального контента</a> и плагиата.</p> <p>Однако стоит отметить, что многие сеошники не уяснили основную суть принципа работы поисковиков по такой разметке, но это дело времени.</p> <h4>Доступность</h4> <p>Для наглядного разбора доступности новых методов верстки рассмотрим пример сайта:</p> <p><img src='https://i1.wp.com/vaden-pro.ru/sites/default/files/razmetka-saita-pod-html5.jpg' width="100%" loading=lazy></p> <p>Глядя на этот сайт достаточно просто сориентироваться, где находится основной контент, а где вспомогательная информация, а также четко видно, где шапка сайта, менюшки и подвал. Однако при использовании <a href="/kak-v-yandekse-ustanovit-golosovoi-poisk-vklyuchenie-funkcii/">голосовых браузеров</a> очень трудно добраться до сути сайта, к примеру, если это сайт-магазин. Чтобы добраться до сути ассортимента предлагаемого товара пользователю понадобится не дюжее упорство и терпение, которым обладает не каждый.</p> <p>В таких случаях выходом из ситуации станет использование новых тегов. Они позволят всего одной <a href="/skachat-yandeks-brauzer-s-golosovym-pomoshchnikom-alisa-kak-skachat-i/">голосовой командой</a> переходить от названия сайта к меню, основному контенту и вспомогательным элементам навигации сайта.</p> <p>Эти <a href="/drugie-soc-seti-nachnem-s-polozhitelnyh-storon-socialnyh-setei/">положительные стороны</a> HTML5 повлияли на неожиданный интерес создателей <a href="/operacionnye-sistemy-na-baze-linux-kakie-naibolee-izvestny-alternativnye/">альтернативных систем</a> поиска, они делают серьезный уклон на семантику документа.</p> <p>Коротко об основном назначении структурных тегов:</p> <h3>section</h3> <p>Данный тег отвечает за структуризацию блоков, связанных чем-либо между собой. Также с помощью этой команды можно делить текст на главы, разделы и подразделы. Обычно в рамках такого тега имеет место заголовок.</p> <p>Более подробно о использовании этого тега для построения <a href="/semanticheskaya-struktura-dlya-html5-stranicy-semantika-v-html5/">семантической структуры</a> документа можно прочесть в статье "Построение структуры документа в HTML5 используя section "</p> <p>Для более понятного разъяснения вернемся к примеру разбития объемного текста на главы и параграфы, которые также могут иметь подразделы и подпункты. Обратимся к <a href="/2-faktornuyu-avtorizaciyu-chto-sleduet-zapomnit-primery-dvuhfaktornoi-i/">следующему примеру</a> кода для закрепления материала</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>. Также стоит обращать внимание и на <a href="/teksty-optimizirovalis-pereoptimizirovalis-no-ne/">смысловую нагрузку</a>, которая есть в блоке- section не употребляется при отсутствии естественного заголовка.</p> <h3>article</h3> <p>Опытные веб-мастера называют эту секцию частным случаем тега <span>< section> </span>. Article выделяет «автономную» (такую, которую в целом можно вырезать из страницы, и при этом она не потеряет своего смысла) часть страницы, которая в свою очередь состоит из взаимосвязанных элементов.</p> <p>К примерам автономных частей можно отнести анонсы статей на блоге, рекламные блоки, различные виджеты (к примеру с погодой).</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>И в связи со всем этим возникает вполне логичный и <a href="/detektor-lzhi-pochemu-my-obmanyvaem-sebya-i-drugih-pravila-kotorye/">законный вопрос</a>: зачем использовать <span>< аrticle> </span>, если можно отказаться от него и работать только с <span>< section> </span>? В конечном итоге модернизация HTML5 была направлена на облегчения работы веб-мастеров.</p> <p>Скорее всего в <a href="/mogut-li-razblokirovat-aifon-vosstanovlenie-bez-sohraneniya/">данном случае</a> отказаться от <span>< аrticle> </span> будет не корректно, так как мы бы получили абсолютно идентичную разметку в блочном стиле, которая была в <a href="/kak-vernut-proshivku-android-predydushchei-versii-otkat-do-predydushchei-versii/">предыдущей версии</a> HTML. Решением данного вопроса стало бы усовершенствование <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="/kak-ustanovit-dopolnitelnoe-menyu-recovery-ustanovka-kastomnogo/">дополнительные меню</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> является дочерним элементом и соответствует заглавию этой отдельной части. Рассмотрим пример, когда <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="/komp-pishet-ne-hvataet-pamyati-chto-delat-nedostatochno-operativnoi-pamyati/">нерациональное использование</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="/kak-naiti-veterana-vov-po-imeni-i-familii-obzor-poleznyh-resursov-v-seti-bazy/">данного ресурса</a>, копирайт, различные ссылки на вспомогательные ресурсы и прочее. Именно поэтому нельзя ограничивать использование тега <span>< footer> </span> исключительно на <a href="/kak-zaiti-na-startovuyu-stranicu-kak-sdelat-glavnuyu-stranicu-yandeksa/">главной странице</a>. рационально будет его использование и в <a href="/reinstalling-mac-os-x-updating-and-reinstalling-the-operating-system-using-various-methods/">различных разделах</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-udalit-tekushchuyu-stranicu-v-vorde-kak-udalit-stranicu-v-vorde/">текущей странице</a>. Для примера посмотрим на следующий код:</p> <p> < header> < a href= "/" >< img src= "/logo.png" alt= "Vaden Pro" /></ a> < nav> < ul> [ меню] </ ul> </ nav> [ поиск] </ header> </p> <p>Стоит также обратить внимание на то, что формирует не просто перечень ссылок, а самостоятельную секцию со <a href="/strukturnye-komponenty-virusa-kletochnoe-stroenie-virusov-osobennosti/">сложной структурой</a>. Смотрим:</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> <br><p>Каждый, даже самый непродвинутый пользователь, хоть раз сталкивался с таким понятием, как HTML. Что же это такое и для каких целей его использовать? Аббревиатуру HTML можно расшифровывать как Hypertext Markup Language. Проще говоря, это язык, используемый для разметки гипертекста. HTML сложно отнести к языкам программирования, это понятие скорее относится к области размещения элементов в браузере. При <a href="/perenapravlenie-na-stranicu-html-perenapravleniya-s-pomoshchyu-htaccess/">помощи HTML</a> можно показать обозревателю, как должны располагаться элементы на странице сайта, когда пользователь откроет сайт. </p> <p>HTML-элемент – рисунки, текст, анимация и все, что мы помещаем на странице. HTML помогает расположить эти элементы на странице, выбрать текст заголовков, создать переход на другую страницу и другое. </p> <h2><span>Что такое теги и для чего они нужны? </span></h2> <p>Если открыть код любой страницы HTML, то можно заметить, что состоит она из множества непонятных, на первый взгляд, символов. Эти символы являются <a href="/osnovy-html-dlya-nachinayushchih-osnovy-yazyka-web-programmirovaniya/">основой HTML</a> – это теги. Некоторые теги требуют обязательного закрытия, хотя <a href="/istoriya-poyavleniya-brauzera-internet-explorer-obzor-sovremennyh/">современные браузеры</a> иногда и игнорируют ошибку подобного рода, но пренебрегать правилами нельзя, это может нарушить структуру документа, некоторые же теги не требуют закрытия вовсе. Нужно быть внимательными. </p> <p>HTML -документ состоит из следующих обязательных, основополагающих тегов, без которых невозможна страница в сети: </p><p> <!DOCTYPE html><br><head> Заголовок<br></head> <br><body><br>Тело<br></body><br></html> </p><p>Теги <b>< </b> <b>!DOCTYPE html> </html> </b> всегда открывают и закрывают документ, DOCTYPE объясняет непонятливому браузеру, как стоит разбирать этот документ, в старых <a href="/skachat-samuyu-poslednyuyu-versiyu-flesh-pleera-onlain-html-igry/">версиях HTML</a> доктайп имел <a href="/222222-kakoi-cvet-cvet-v-stilyah-mozhno-zadavat-raznymi-sposobami-po/">разные значение</a>, в современной пятой версии допустимо вышепредставленное написание, поэтому не будем углубляться в подробности и используем его. Между ними помещаются все остальные теги.</p> <p>Сам документ делится на «голову» и «тело» документа. Для этого используются теги <b><body> </body> </b> и <b><head> </head> </b>. Не сложно догадаться, что тег <body> это тело документа со всеми элементами, которые отображаются на странице, а <head> это голова, в которой содержатся скрипты, метаданные и проч. Содержимое тега head физически мы не видим, но он имеет колоссальное значение для продвижения и функционирования страниц сайта.</p> <p>Внутри <a href="/kartinka-v-html-vse-o-tege-img-img-html-teg-dlya-vstavki-kartinki-src/">тегов html</a> помещают другие теги, не забывают про голову и тело документа, например,</p><p> <b>Содержимое 1</b><p>Содержимое 2</p><div>Содержимое 3</div> </p><p>В первом случае выделяем текст жирным, во втором добавляем абзац, а в третьем добавляем <a href="/pozicionirovanie-elementov-html-css---pozicionirovanie-blochnyh/">блочный элемент</a> div с текстом внутри.</p> <p>Тег <b><title> . Это обязательный тег, с его помощью размещается необходимый заголовок страницы сайта. Его оптимальная длина 60-70 символов, будьте внимательны. Это название будет отображаться в выдаче поисковика и на вкладке браузера и необходимо для SEO-продвижения. Его необходимо поместить между тегами

Еще одним важным одиночным мета-тегом, который необходимо писать в head проекта становится кодировка документа. Она необходима, чтобы не произошло путаницы с предполагаемой и фактической кодировкой, иначе отображение всего вашего важного контента может превратиться в набор невнятных символов. Самая распространенная кодировка для кириллицы - utf-8, использование других кодировок, на основе windows считается дурным тоном сейчас.

Для поисковой системы большое значение имеют еще два мета-тега, которые прописываются в голове документа, это Keywords (ключевые слова) и Description (краткое описание). В них пишется информация не для пользователей, а для поисковиков, чтобы рассказать о ключевых моментах статьи и ее кратком описании (Длина до 120 символов). Значение для поисковых сиситем этих тегов сейчас остается загадкой, раньше ключевики большое влияние оказывали на выдачу, сейчас ситуация спорная.

Заголовок

Почти все теги имеют парную структуру: <> и . Это контейнер. Все, что помещается между ними, например, «Заголовок» - содержимое контейнеров.

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

Атрибуты тегов.

Теги могут обладать атрибутикой. Наподобие параметра bgcolor:

Текст

Таким образом тег имеет атрибут bgcolor со значением «grey». Так можно сделать фон документа серым. Набор атрибутов у каждого тега различается, все зависит от функционала данного элемента.

Все теги и атрибуты находятся в свободном доступе. Зайдя в поисковую систему, можно с легкостью найти все теги и параметры, а также их значения. По сути, документ HTML состоит и этих элементов, меняя которые можно построить структуру сайта. Например, на сайта http://htmlbook.ru вы найдете подробное описание всех элементов HTML страницы, тегов, атрибутов, примеров использования. Научиться применять

Дата публикации: 01.12.2017 .

Лаклан Хант

Оригинал статьи на английском: http://www.alistapart.com/articles/previewofhtml5

Иллюстрации: Кевин Корнелл

Перевод: Влад Мержевич

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

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

Работа над HTML5 началась в 2004 году и в настоящее время осуществляется в рамках совместных усилий между W3C HTML WG и WHATWG . Многие ключевые игроки участвуют в работе W3C, в том числе представители четырех основных поставщиков браузеров: Apple, Mozilla, Opera и Microsoft, а также ряд других организаций и частных лиц со своими интересами и опытом.

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

Структура

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

, описывая каждый атрибутом id или class .

На рисунке показано типичное расположение двух колонок сверстанных с использованием

с атрибутами id и class. Макет содержит шапку, подвал и горизонтальную навигацию ниже заголовка. Основное содержание включает статью и боковую панель справа (сайдбар).

Использовать элементы

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