Смарт ТВ 

Структура страницы HTML5. Примечание. Пользовательские агенты

В этой статье мы рассмотрим, какие элементы необходимо использовать при построении базовой структуры HTML документа.

Если вы посмотрите на сайт «HTML5 Herald », то увидите, что он разделен следующим образом:

  • шапка сайта с логотипом и заголовком;
  • панель навигации;
  • содержимое тела разделено на три столбца;
  • статьи и рекламные блоки в столбцах;
  • подвал сайта, содержащий информацию об авторе и авторских правах.

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

Элемент header

Первым элементом структуры HTML , который мы рассмотрим, является элемент header . Спецификация описывает его кратко — «группа вводных или навигационных элементов ».

Вопреки мнению, вы можете использовать header , чтобы представить каждый раздел контента. Когда мы используем здесь слово «раздел », мы не ограничиваемся разделами, разбитыми с помощью элемента section. Технически мы говорим о том, что в HTML5 называется «секционным контентом ». Это означает любой фрагмент контента, которому может потребоваться собственный заголовок, даже если это приведет к тому, что на одной странице будет несколько таких фрагментов.

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

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

Элемент section

Спецификация дает для него такое определение :

Элемент section представляет собой общий раздел документа или приложения. Раздел в этом контексте представляет собой тематическую группу контента, как правило, с заголовком.

Далее поясняется, что section не должен использоваться в качестве универсального контейнера для добавления стилей или скриптов. Если мы не можем использовать section в качестве общего контейнера — например, чтобы получить желаемый макет через CSS – то, что для этого использовать? В этом нам поможет элемент div , который не имеет определенного семантического значения.

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

Некоторые примеры корректного использования элемента section в структуре HTML страницы :

  • отдельные разделы интерфейса с вкладками;
  • сегменты страницы «О нас » может включать разделы, посвященные истории компании;
  • различные части длинной страницы «условий обслуживания »;
  • различные разделы сайта онлайн-новостей — статьи могут быть сгруппированы в разделы, посвященные спорту, политике и экономическим новостям.
Корректное использование section

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

Вкратце :

  • section является общим элементом, поэтому, если требуется более конкретный семантический элемент (например, article , aside или nav ), используйте их.
  • section имеет семантическое значение. Это означает, что контент, который он содержит, связан. Если вы не можете кратко описать весь контент, который хотите добавить в раздел, используя всего несколько слов, то нужно использовать семантически нейтральный контейнер — скромный div .

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

В структуре сайта HTML разрешается вкладывать элементы section в существующие элементы section, если это необходимо. Например, для сайта новостей раздел «Мировые новости» можно разделить на разделы для каждого крупного региона.

Элемент article

Элемент article во многом аналогичен элементу section , но есть и существенные различия. Определение спецификации гласит:

Элемент article представляет собой полный или самодостаточный набор в документе, на странице, в приложении или на сайте. Он может независимо распространяться или повторно использоваться.

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

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

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

Как и в случае с section , элементы article могут быть вложены в другие article . Также можно вложить элемент section внутрь article , и наоборот.

Элемент nav

Можно предположить, что элемент nav будет использоваться практически в каждой структуре HTML файла . Он представляет собой то, что подразумевается: группу навигационных ссылок. Хотя наиболее распространенное использование для nav будет заключаться в размещении маркированных списков ссылок. Есть и другие варианты. Например, можно обернуть в элемент nav абзац текста, содержащего основные ссылки навигации страницы или раздела.

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

Примечание: Пропуск ссылок навигации

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

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

«Пользовательские агенты (например, программы чтения с экрана ), предназначенные для пользователей, которые могут получить пользу от навигационной информации, опущенной при первоначальном рендеринге, или получить пользу от немедленного доступа к навигационной информации, могут использовать элемент в качестве способа определения, какой контент на странице сначала пропустить или предоставить по запросу ».

Примечание. Пользовательские агенты

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

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

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

Данное решение в конечном итоге зависит от вас. Ян Хиксон , главный редактор спецификации HTML5 WHATWG , прямо ответил на этот вопрос: «Используйте [его] там, где бы вы использовали class = nav ».

Элемент aside

Представляет часть страницы, которая «связана с содержимым вокруг элемента aside и может рассматриваться отдельно от этого содержимого ».

Элемент aside можно использовать для обертывания части контента, которая имеет отношение к:

  • Конкретному контенту (например, статья или раздел );
  • Целой странице или документу, как это обычно делается при добавлении боковой панели на страницу или сайт.

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

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

Варианты использования элемента aside в структуре index html : боковая панель, дополнительный список ссылок или блок рекламы. Следует также отметить, что элемент aside (как и в случае с элементов header ) не определяется его позицией на странице. Он может располагаться сбоку или в другом месте.

Элемент footer

Как и в случае с элементом header , может быть несколько элементов footer на одной странице, и вы должны использовать footer вместо .

Элемент footer , согласно спецификации, представляет собой футер для раздела контента, являющегося его ближайшим предком. Разделом контента может быть весь документ или элемент section , article , aside .

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

Основной принцип построения дерева страницы основывается на дроблении всей страницы на структурные элементы – блоки или секции. К числу этих секций относят такие теги, как < header> (шапка сайта), < section>, < aside> , и < footer> (подвал). До момента создания вышеперечисленных тегов верстальщики использовали теги < div> для структуризации документа с использованием уникальных классов и id. Код, построенный исключительно на < div> очень сложный для восприятия и не читабельный. Причиной этого является отсутствие логической нагрузки на теге. Это было главным камнем преткновения для поисковых систем.

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

Положительные стороны использования новых тегов Поисковая оптимизация

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

Вследствие этого поисковые системы повысят эффективность нахождения уникального контента и плагиата.

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

Доступность

Для наглядного разбора доступности новых методов верстки рассмотрим пример сайта:

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

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

Эти положительные стороны HTML5 повлияли на неожиданный интерес создателей альтернативных систем поиска, они делают серьезный уклон на семантику документа.

Коротко об основном назначении структурных тегов:

section

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

Более подробно о использовании этого тега для построения семантической структуры документа можно прочесть в статье "Построение структуры документа в HTML5 используя section "

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

< article> < h1> Заголовок статьи < p> Вступительное слово... < section> < h1> Заголовок подраздела статьи < p> Контент подраздела < section> < h1> Заголовок второго подраздела статьи < p> Контент подраздела

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

Некоторые пользователи утверждают, что < section> - это не более, чем замена тега блочной верстки < div> . Однако это утверждение не верно. Существует четкое разграничение, когда применение section уместно, а когда нет. К примеру, при привязки некоторому контейнеру особого стиля нужно обращаться только к < div> . Также стоит обращать внимание и на смысловую нагрузку, которая есть в блоке- section не употребляется при отсутствии естественного заголовка.

article

Опытные веб-мастера называют эту секцию частным случаем тега < section> . Article выделяет «автономную» (такую, которую в целом можно вырезать из страницы, и при этом она не потеряет своего смысла) часть страницы, которая в свою очередь состоит из взаимосвязанных элементов.

К примерам автономных частей можно отнести анонсы статей на блоге, рекламные блоки, различные виджеты (к примеру с погодой).

Однако, в спецификации достаточно заумно описано это понятие, в следствие чего возникло очень много споров по поводу того, что именно использовать: < section> или < аrticle> . К основным разногласиям по этому вопросу можно отнести следующие моменты:

  • для создания главного контейнера веб-страницы следует использовать < section>, < аrticle> или < div> . С одной стороны все содержимое так или иначе связано между собой, однако сайт можно назвать независимой единицей.
  • как именно оформлять шапку сайта, а точнее какие теги использовать?
  • и, наконец, как работать с основным контентом сайта? Нужно использовать < section> с < аrticle> внутри или же исключительно пользоваться одним < аrticle> .

Эта путаница напоминает те времена, когда аналогичные споры возникали при использовании тегов < acronim> и < abbr> . В тот раз проблема была решена достаточно просто, но радикально: отказались от использования < acronim> .

И в связи со всем этим возникает вполне логичный и законный вопрос: зачем использовать < аrticle> , если можно отказаться от него и работать только с < section> ? В конечном итоге модернизация HTML5 была направлена на облегчения работы веб-мастеров.

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

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

  • Основной подход – имеет ценность для пользователя, привлекает его внимание, тобишь основное содержимое страницы.
  • Если рационально было бы добавить атрибуты pubdat или cite.
  • В случае полной автономности рассматриваемого нами фрагмента кода.
    • aside

    Создан для отделения основного содержимого страницы от вспомогательного.

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

    Чаще всего подобная информация на сайте располагается в сайдбаре.

    header

    Служит для четкого выделения заглавной части страницы. В нем располагаются заглавия как всего документа, так и отдельных его частей. Чаще всего внутри этой секции можно встретить такие теги, как < hgroup> и < h1>-< h6> . Однако это предписание не обязательно, в принципе в header могут распологаться любые теги.

    Стоит отметить, что в первую очередь данный тег применяют при создании шапки, как указано в примере:

    < header> < a href= "/" >< img src= "/logo.png" alt= "Vaden Pro/>

      [меню]
    [поиск]

    Однако не стоит ограничивать данный тег шапкой для веб-страницы. < header> он может располагаться внутри < section>, < article>, < aside> и в особых исключительных случаях в < nav> . При таком подходе тег < header> является дочерним элементом и соответствует заглавию этой отдельной части. Рассмотрим пример, когда < header> используется внутри < article> :

    < article> < header> < h1> Важный текст < time> 21. 02. 10 [ Текст публикации]

    Стоит отметить, что header собирает воедино заголовок части, однако если эта самая часть состоит только из названия, то применять данный тег не следует:

    < article> < header> < h1> Важный текст [ Текст публикации]

    Это нерациональное использование header, более правильной с точки зрения семантики будет следующая запись кода:

    < article> < h1> Важный текст [ Текст публикации]

    footer

    Опускаясь по структуре сайта все ниже мы постепенно подошли к нашему «подвалу», в котором располагается некоторая описательная информация раздела или сайта в общем. Эта информация отделяется тегом < footer> :

    < footer> < p id= "copyright" >& copy ; 2014 Vaden Pro < p> Все права защищены

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

    < article> < header> < h1> Важная информация < time> 05. 04. 2015 < footer> < div class = "autor" > Данил Гойда < a href= "#" > об авторе | < a href= "#" > Все публикации автора [ сама публикация]

    nav

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

    < header> < a href= "/" >< img src= "/logo.png" alt= "Vaden Pro" /> < nav> < ul> [ меню] [ поиск]

    Стоит также обратить внимание на то, что формирует не просто перечень ссылок, а самостоятельную секцию со сложной структурой. Смотрим:

    < nav> < a href= "" > Сложная навигация < section> < h1> Первый раздел сайта < ul> < li>< a href= "" > пункт [ ... ] < section> < h1> Второй раздел сайта < ul> < li>< a href= "" > Пункт

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

    Здесь мы рассмотрим частые ошибки в HTML5 разметке с точки зрения семантики, и как их избежать.

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

    Не используйте тег в качестве обёртки для оформления Одна из наиболее общих проблем, замеченных мною, - банальная замена "ов на структурные элементы HTML5, особенно на "ы. Т.е. когда то, что в XHTML или HTML4 выглядит так:
    My super duper page Переписывают так:
    Это просто неправильно: не обёртка. Этот элемент означает семантический блок Вашего контента, использующийся для построения «структуры документа» (document outline), и должен содержать заголовок. Если Вам нужен элемент для обёртки, попробуйте обойтись (Kroc Camen может предложить кое-что). Если это не решает проблему необходимости дополнительных обёрток, используйте старые добрые "ы. С приходом HTML5 "ы не умерли , и именно они отлично подходят в этом случае.

    Принимая во внимание все вышесказанное, было бы хорошо разметить пример выше с использованием HTML5 так:
    My super duper page

    Если Вы не уверены, какой элемент использовать, то я советую Вам воспользоваться нашей блок-схемой выбора элемента (прим. переводчика: см. в самом низу записи ).

    Используйте и только при необходимости Нет смысла писать код, если в этом нет необходимости, правда? Увы, но я часто наблюдаю, как и там, где они не нужны. Вы можете почитать об элементах и подробнее, я же коротко обозначу ключевые моменты:
    • Элемент представляет группу вводных или навигационных средств и обычно содержит заголовок секции
    • Элемент группирует набор элементов -, представляя заголовок секции в случае, если он состоит из нескольких уровней (подзаголовки, альтернативные заголовки и т.д.)
    Избыток элементов Я уверен, Вы прекрасно знаете, что элемент можно использовать несколько раз в документе. Поэтому часто встречается такое:
    My best blog post

    Если Ваш содержит только один заголовочный элемент, то он не нужен. В данном случае элемент уже гарантирует, что заголовок будет включен в «структуру документа» (document outline), и раз не содержит нескольких элементов (согласно определению), его можно безопасно удалить. Достаточно просто этого:
    My best blog post

    Неправильное использование И снова о заголовках: я часто вижу некорректное использование элемента . Не следует использовать вместе с , если:
    • Присутствует только один заголовок
    • хорош сам по себе (т.е., без ).
    Первый случай:
    My best blog post

    by Rich Clark

    В этом случае просто уберите hgroup.
    My best blog post

    by Rich Clark

    Второй случай - это еще один пример использования элемента без необходимости.
    My company Established 1893

    Если единственный ребёнок "а это , зачем нужен ? Если у Вас нет дополнительных элементов в "е (т.е. сестринских по отношению к ), просто уберите .
    My company Established 1893

    Не обрамляйте все ссылки в В HTML5 было введено 30 новых элементов, чтобы дать нам возможность создавать структурированную и осмысленную разметку. Но не следует злоупотреблять новыми семантическими элементами. К сожалению, это как раз то, что происходит с . Спецификация описывает так:Элемент nav представляет секцию страницы, связывающую её с другими страницами или частями текущей (секцию с навигационными ссылками).

    Примечание: Не все группы ссылок следует помещать в элемент nav. Его следует использовать для основной навигации . Часто в футерах размещают небольшой список ссылок на различные страницы сайта (Главная, Помощь, соглашение об использовании, etc ). В этом случае одного footer"а должно быть достаточно. Хотя ничто не мешает использовать nav, в этом нет необходимости.

    WHATWG HTML spec

    Ключевая фраза - «основная навигация». Можно долго спорить о том, что понимать под основной, но для меня это:

    • Первичная навигация
    • Поиск по сайту
    • Вторичная навигация (спорно)
    • Внутристраничная навигация (внутри длинной статьи, например)
    Хотя в этом случае сложно судить, что есть правильно, а что - нет, я считаю, что не стоит заключать в :
    • Переключатели страниц
    • Социальные ссылки (хотя возможны исключения в случаях, когда социальные ссылки являются основной навигацией. Например, сайты вроде about.me или flavours.me)
    • Теги поста
    • Категории поста
    • Третичная навигация
    • Объемные футеры
    Если Вы не уверены, обрамлять ли список ссылок в , задайте себе вопрос: «Это основная навигация?». Примите во внимание следующее:
    • “Не используйте , если Вы считаете, что с заголовком тоже подойдёт” - Hixie в IRC
    • Возможно стоит добавить «Перейти к» для удобства?
    Если ответ на эти вопросы - «Нет», это, видимо, не место для .Общие ошибки в использовании элемента Ах, . Разобраться с правильным использованием этого элемента, как и его собрата , непросто. Давайте взглянем на некоторые общие ошибки, касающиеся этого элемента.Не каждое изображение Ранее, я советовал не писать больше кода, чем необходимо. Здесь похожая ситуация. Я встречал сайты, где каждая картинка была обрамлена в . Не нужно использовать больше разметки только для того, чтобы использовать больше разметки. Вы просто создаете себе больше работы, но никак не улучшаете описание своего контента.

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

    Вышеупомянутая блок-схема выбора элемента поможет Вам справиться с .

    Если изображение несет только презентационную нагрузку, и на него нигде в документе не ссылаются, это определенно не . Иначе, задайте себе вопрос: «Необходимо ли это изображение в текущем контексте для понимания?». Если нет, это, видимо, не (возможно, ). Если да, спросите себя, «Могу ли я переместить это в приложение?». Если ответ на оба вопроса Да, то, возможно, подойдёт.

    Ваш логотип - не Тоже самое касается и логотипа. Часто я вижу такое применение:
    My company name
    Тут нечего добавить. Это просто неверно. Можно долго спорить о том, должен ли логотип быть в , но мы сейчас не об этом. Настоящая ошибка - злоупотребление элементом . следует использовать только когда Вы ссылаетесь на него в документе. Вряд ли Вы где-нибудь будете ссылаться на свой логотип. Достаточно этого:
    My company name может быть не только изображением Другой частый случай недопонимания элемента заключается в предположении, что его можно применять только для картинок. Но это не так. В может быть заключено видео, аудио, графики (в SVG, например), цитата, таблица, блок кода, стихотворение или любая комбинация перечисленного. Не ограничивайте себя в использовании одними картинками. Наша задача как приверженцев веб-стандартов - описать контент нашей разметки.

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

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

    В HTML5 нет необходимости указывать атрибут type для элементов и . Хотя от них может быть непросто избавиться, если они автоматически добавляются Вашей CMS, нет смысла включать их в код, если Вы пишете его самостоятельно или можете управлять шаблонами. Т.к. все браузеры по-умолчанию считают, что все скрипты написаны на JavaScript, а стили - это CSS, такая разметка становится избыточной:

    Вместо этого Вы можете просто написать:

    Помимо прочего, Вы также можете сократить количество кода, расходующегося на указание кодировки. Глава Марка Пилгрима о семантике в книге Dive into HTML5 описывает все такие практики.

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

    Некоторые из новых атрибутов форм являются логическими, т.е. их наличие в разметке определяет поведение элементов. В том числе это:

    • autofocus
    • autocomplete
    • required

    Я редко встречаю их, но в случае с required я видел такое:

    В конечном счете, это ничем плохим не грозит. Клиентский HTML парсер встретит атрибут required в разметке и применит соответствующие правила. Но что если сделать по-другому и написать required=«false»?

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

    Логическое значение возможно применить тремя способами: (Второе и третье характерны для XHTML)

    • required
    • required=""
    • required=«required=»

    Применительно к нашему примеру выше, мы могли бы написать так (в HTML):

    Теги:

    • html5
    • верстка
    • семантика
    Добавить метки

    Каждый, даже самый непродвинутый пользователь, хоть раз сталкивался с таким понятием, как HTML. Что же это такое и для каких целей его использовать? Аббревиатуру HTML можно расшифровывать как Hypertext Markup Language. Проще говоря, это язык, используемый для разметки гипертекста. HTML сложно отнести к языкам программирования, это понятие скорее относится к области размещения элементов в браузере. При помощи HTML можно показать обозревателю, как должны располагаться элементы на странице сайта, когда пользователь откроет сайт.

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

    Что такое теги и для чего они нужны?

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

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


    Заголовок


    Тело

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

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

    Внутри тегов html помещают другие теги, не забывают про голову и тело документа, например,

    Содержимое 1

    Содержимое 2

    Содержимое 3

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

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

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

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


    Заголовок



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

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

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

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

    Текст

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

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


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

    От автора: я вновь приветствую вас на блоге webformyself. А может вы здесь и впервые. Сегодня мы рассмотрим, из чего состоит структура html5 страницы и как она поменялась с выходом этой новой спецификации.

    Как изменилась структура

    Прежде всего, я хотел бы сказать, что до появления html5 явной структуры как таковой вообще не существовало. Как верстались все шаблоны? В большинстве случаев использовался метод блочной верстки, ставший сегодня стандартным. В качестве контейнеров для элементов использовались обычные div с разными идентификаторами.

    Например, шапка обычно обозначалась как div с идентификатором header, блок с основной информацией называли main или content, боковая колонка получила идентификатор sidebar.

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

    В связи с этим, в html5 назревало появление новых элементов – семантических блоков, которые были призваны заменить обычные div, придать разметке больше смысла.

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

    Новые семантические блоки в разметке

    Стоит отметить, что подходящий тег придумали практически для любого элемента на веб-странице. Например, для шапки. По стандарту ее всегда делали так: div id = “header”. Теперь необходимость в этом отпала – появился контейнер header. Да, это парный тег и в него помещается все содержимое шапки.

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

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

    Так вот, к чему это я? У статьи (новости, обзора и т.д.) тоже может быть своя шапка, своя заключительная часть и т.д. Соответственно, на странице может быть несколько header-ов, каждый со своим классом.

    К слову, подвал сайта, самая нижняя его часть, формируется в html5 тегом footer. Для вас это будет очевидным, если вы сверстали хотя бы несколько типичных макетов – именно такой класс обычно дают этому блоку.

    Теперь о меню. Раньше оно тоже не имело своего собственного, уникального контейнера, который мог бы его отличать. Оно тоже формировалось в помощью div. Естественно, для такого важного элемента на странице тоже придумали свой тег – nav (navigation). Он тоже не обязательно должен быть одним на странице – на некоторы веб-ресурсах можно наблюдать несколько разных меню и все же по своему смыслу в него рекомендуется заключать самые важные ссылки на странице.

    Вы наверное, замечали, как сильно может отличаться основное содержимое от того, что показывается в боковой колонке? Если подумать, то это вообще разные секции шаблона. Вот именно – секции! Наверняка подобным образом думали и разработчики спецификации html5, поэтому они создали тег – section. Его общий смысл заключается в том, что он содержит в себе часть документа (секцию), в целом независимую от других, у которой может быть свой заголовок и т.д.

    Пример новой разметки

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

    Шапка Главное меню Сайдбар Заголовок Второстепенная информация о статье Сама статья Подвал

    < header > Шапка< / header >

    < nav > Главноеменю< / nav >

    < section id = “sidebar ”> Сайдбар< / section >

    < section id = “content ”>

    < h1 > Заголовок< / h1 >

    < aside > Второстепеннаяинформацияостатье< / aside >

    < article > Самастатья< / article >

    < / section >

    < footer > Подвал< / footer >

    Конечно, это очень простой пример. В реальности еще к этим элементам добавляются какие-то стилевые классы. Здесь мы с вами применили два абсолютно новых тега – article и aside. Как вы понимаете, тег article обозначает основную информацию на странице, причем исключительно ее текст.

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

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

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

    Конечно, представленный выше вариант разметки является лишь одним из примеров, на каждом реальном сайте по-разному. Например, в любой section можно добавить header и footer – они будут обозначать начало и конец секции, второстепенная информация может находиться ниже самой статьи, а не выше. Тут много разных вариантов, причем вы разбираем только структуру блога, на других типах веб-ресурсов все может быть совсем по-другому. Например, вот другой вариант разметки, и он тоже имеет право на жизнь:

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