Семантические теги html5


Семантическая верстка сайта html5Привет, уважаемые читатели блога.

Мы с вами уже не раз касались темы верстки сайта, в частности, рассматривали основы работы с html-кодом и редактирования css-стилей. Сегодня мы пойдем дальше и разберемся с тем, что такое семантическая верстка сайта, для чего она нужна и как ее применять на практике. Для понимания данной темы важно предварительно изучить хотя бы основные принципы html и css, либо же постигать новую информацию по ходу прочтения сегодняшней статьи, обращаясь за разъяснениями к более ранним статьям на моем блоге.

Содержание:

  1. Что такое семантическая верстка: суть и значение
  2. Примеры использования
  3. Основные теги HTML5

Семантическая верстка в HTML

Семантика в языкознании означает смысл, значение слова или речевого оборота.


уже встречали данный термин, когда рассматривали сбор семантического ядра для сайта. И в том контексте, и в сегодняшней статье определение «семантический» указывает на то, что в основе лежит смысл. А стало быть, семантическая верстка – это верстка, построенная на смысловой структуре. В отличие от так называемой верстки на дивах (div – html-тег), все элементы семантической верстки подчинены смысловой иерархии. И самый наглядный пример для объяснения – это использование тегов заголовков и подзаголовков h1, h2, h3 и т.д.Семантическая разметка страницы

Это теги семантической разметки. И если изначально в html для выделения подзаголовков использовались теги <b> или <strong>, то сегодня такое акцентирование для заголовков почти не употребляется. Вместо этого теги h1 и h2 вобрали все необходимые функции для выделения названий разделов жирным увеличенным шрифтом. Кроме того, эти теги дают гораздо больше информации о тексте, как самим веб-разработчикам, так и роботам, обрабатывающим веб-страницы. Т.е. ранее html-верстка была более описательной, уделялось внимание внешним атрибутам элементов, которые составляли общую структуру отдельными блоками. В семантической же верстке – основной акцент делается на подчинении структурных элементов общей смысловой иерархии, где каждый блок имеет свое назначение для целого.


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

Когда каждому структурному элементу сайта соответствует определенный тег, код становится упорядоченным и понятным. При этом описание стилей элементов выводятся в отдельный css-файл. Для того, чтобы увидеть насколько страницы вашего сайта структурированы можно проделать простой эксперимент. Отключите на время в браузере поддержку CSS и JavaScript и посмотрите, где на вашем ресурсе названия статей, содержание, подзаголовки и т.д. Можете ли вы разобраться в структуре вашего сайта, используя только html-разметку?

Примеры семантической верстки HTML5

Еще один наглядный пример, где ясно видно отличие семантической верстки от прошлых стандартов html, — использование тега <em> (от английского emphasis – акцент). Тег <em> заменил тег <i> (выделение курсивом). Для тега <em> в файле стилей может задаваться отображение курсивом, подчеркиванием, полужирным. Но значение данного тега – именно акцентирование текста, к примеру, для выделения нового термина. Однако, в случае, когда нужно употребить цитату, в семантической верстке будет уже использоваться тег <cite>, хотя ранее оба эти элемента (и новый термин, и цитата) были бы заключены в тег <i> (выделены курсивом).


А теперь приведем пример, как верстка дивами заменяется семантической.

Пример обычной верстки:

Замена на семантическую:

Здесь мы использовали теги семантической верстки: section, article, h1, p.

Стили прописываются, как правило, в отдельном в файле (в случае с WordPress в style.css) следующим образом:

В случае верстки с div, данное описание выглядело бы так:

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

Распространенные теги HTML5 для семантической верстки

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

<header> — задает шапку сайта или раздела, в него обычно включен заголовок, а также внутрь могут помещаться другие теги, кроме более высоких по иерархии (html, body, head и т.п.)

<article> — тег, в который заключают элементы статьи: непосредственно текст, изображения, комментарии

<section> — разделяет веб-документ на смысловые секции, есть возможность вкладывать один тег section в другой


<footer> — подвал сайта, где содержится информация о контактах, адреса, ссылки, авторство и прочее

<nav> — тег html5 для навигации по сайту, в него помещаются наиболее приоритетные ссылки, хотя допустимо использование нескольких тегов на странице

<aside> — блок неосновного контента, как правило, боковая панель (сайдбар): рекламные блоки, рубрики, метки и т.д.

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

Прописываем такой код в редакторе Notepad или Блокноте:

Теперь запустим документ, как html-файл.

Далее нам необходимо задать стили для каждого элемента. В нашем случае, добавим тег <style> с описаниями в уже созданный html-файл. Если же вы вносите изменения на сайте на WordPress, добавляйте правки в файл стиле style.css.

Итак, общий вид нашего файла style.css будет таким:

Подробно изучив приведенный код, вы увидите, что для каждого тега (header, section, article, footer) заданы расположение, ширина, цвет заливки или шрифта.

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

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


  • <video> — воспроизведение и управление видео;
  • <audio> — добавление и управление аудио на странице;
  • <canvas> — область для создания изображений и других объектов Javascript;
  • <command> — кнопка или переключатель внутри тега <menu>;
  • <menu> — создание меню и контейнер для тега <command>;
  • <datalist> — список вариантов, доступный после ввода в текстовом поле (пример такого списка – подсказки Google);
  • <figure> — группирование элементов (например, изображения с подписями);
  • <hgroup> — группирование заголовков и подзаголовков;
  • <mark> — смысловое выделение текста;
  • <meter> — вывод значений в заданном диапазоне, как правило, числовые данные;
  • <ruby> — добавление аннотации сверху или снизу основного текста (пример – транскрипция под словами);
  • <source> — вставка аудио- или видеофайла внутри тегов audio, video;
  • <time> — текст внутри тега приобретает значение даты, времени;

Напоследок, смотрите познавательный видео-урок по основам html5, его тегами и примерами их использования:

При должной устремленности, вы обязательно сможете освоить необходимые  знания. Верьте в свои силы.

До новых встреч!

pro-wordpress.ru

Какие теги добавили в язык HTML5?

В язык HTML5 добавили множество новых тегов:

— теги семантически описывающие структуру страницы,
— теги описывающие новые технологии,
— теги обогащающие язык HTML.

Семантика HTML5 на уровне структуры страницы

Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение структуры страницы:

<header> </header> — теги обрамляющие элементы дизайна верхней части сайта, так называемая "шапка страницы". Также теги header можно использовать как верхнюю часть тега section.

<nav> </nav> — теги обрамляющие основное меню на сайте.

<article>


</article> — теги обрамляющие основной контент страницы: статью, запись в блоге, новость, первую запись форума и т.п.

<aside> </aside> — теги обрамляющие сайдбар. Сайдбар — это так называемая "боковая панель", которая обычно содержит блоки рубрик (категорий), облака тегов (меток), список последних записей и т.п. Тегами aside также можно обрамлять счетчики, виджеты (например комментарии от вконтакта), социальные кнопки.

<footer> </footer> — теги обрамляющие нижнюю часть сайта, так называемый "подвал страницы", который может содержать имя автора (компании), контакты (адреса, телефоны), правовую информацию (копирайты) и т.п. Также теги footer можно использовать как нижнюю часть тега section, т.е. сами теги footer будут находиться между тегами section

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

Естественно, всё это пока находится лишь на уровне рекомендаций, и вы можете вставлять данные теги куда угодно, используя их вместо тегов <div>


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

Семантика HTML5 на уровне текста

Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение текста страницы:

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

<time> </time> — теги предназначены для создания дат и/или времени в формате
ISO вида: YYYY-MM-DDThh:mm:ss, такой формат понятен компьютерным программам. Теги time могут обрамлять дату или текст, если тег обрамляет текст, то в него добавляют атрибут datetime, значением которого выступает дата и/или время в формате ISO.

<details> </details> — теги предназначены для хранения информации, которая либо скрыта, либо отображена (работает наподобие спойлера).

<summary> </summary> — теги обрамляют заголовок, если по нему щелкнуть то появится текст (можно использовать в качестве спойлера), находятся между тегами details.

Дополнительные теги языка HTML5

Список новых тегов HTML5, обогощающих язык:

<meter>


</meter> — теги предназначены для вывода статического индикатора шкалы, при котором результат измерения не меняется. Для работы нужно минимальное и максимальное значения.

<progress> </progress> — теги предназначены для вывода динамического индикатора шкалы (например шкалы загрузки файла), при котором результат измерения меняется в реальном времени.

<command /> — тег должен находиться между тегами menu, используется при создании сценариев на JavaScript.

<menu> </menu> — между этими тегами помещают тег command.

<output> </output> — теги предназначены для вывода работы скрипта.

<datalist> </datalist> — теги предназначены для создания списка, который будет выводится при наборе в текстовом поле.

<figcaption> </figcaption> — теги обрамляют описание какого-либо объекта (например изображения), находятся между тегами figure..

<figure> </figure> — теги группируют различные объекты страницы имеющие свои описания, например изображения с описанием, товары с описанием и т.д.

<hgroup>


</hgroup> — теги предназначены для группировки заголовков h*

<keygen /> — тег используется для генерации открытых/закрытых пар ключей, шифрования/расшифровки данных, создания/проверки цифровой подписи.

<ruby> </ruby> — теги обрамляют текст и аннотацию к нему.

<rt> </rt> — теги находятся между тегами ruby, предназначены для обрамления аннотации.

<rp> </rp> — теги предназначены для браузеров которые не поддерживают теги ruby.

<wbr /> — тег указывает браузеру в каком месте переносить слово, если это слово не вмещается в окно браузера.

Теги HTML5 описывающие новые технологии

В HTML5 появилась возможность использования множества технологий и API, которые являются частью языка HTML5, а не сторонними плагинами, вот некоторые из них:

<audio> </audio> — теги предназначены для воспроизведения аудиофайлов, без использования сторонних программ (плагинов, расширений).

<video> </video> — теги предназначены для воспроизведения видеофайлов, без использования сторонних программ (плагинов, расширений).

<source /> — тег предназначен для указания пути к аудио/видео файлам, находится внутри тегов audio и video.

<canvas> </canvas> — теги предназначены для создания специальной области на сайте, в которой можно создавать векторные фигуры и с помощью языка программирования JavaScript, манипулировать ими. Canvas в будущем, должен заменить Flash-технологию (угу в теории…).

Читать далее: Устаревшие теги HTML5

html-5.ru

HTML5 Уважаемые хабровчане, представляю вам вольный перевод статьи Avoiding common HTML5 mistakes. Здесь мы рассмотрим частые ошибки в HTML5 разметке с точки зрения семантики, и как их избежать.

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

Не используйте тег <section> в качестве обёртки для оформления

Одна из наиболее общих проблем, замеченных мною, — банальная замена <div>’ов на структурные элементы HTML5, особенно на <section>’ы. Т.е. когда то, что в XHTML или HTML4 выглядит так:

<!-- Код в стиле HTML 4 -->  <div id="wrapper">   <div id="header">    <h1>My super duper page</h1>   <!-- Содержимое хедера -->   </div>   <div id="main">   <!-- Контент страницы -->   </div>   <div id="secondary">   <!-- Дополнительный контент -->   </div>   <div id="footer">   <!-- Содержиме футера -->   </div>  </div>  

Переписывают так:

<!-- Не используйте этот код! Он неверен! -->  <section id="wrapper">   <header>    <h1>My super duper page</h1>   <!-- Содержимое хедера -->   </header>   <section id="main">   <!-- Контент страницы -->   </section>   <section id="secondary">   <!-- Дополнительный контент -->   </section>   <footer>   <!-- Содержимое футера -->   </footer>  </section>

Это просто неправильно: <section> не обёртка. Этот элемент означает семантический блок Вашего контента, использующийся для построения «структуры документа» (document outline), и должен содержать заголовок. Если Вам нужен элемент для обёртки, попробуйте обойтись <body> (Kroc Camen может предложить кое-что). Если это не решает проблему необходимости дополнительных обёрток, используйте старые добрые <div>’ы. С приходом HTML5 <div>’ы не умерли, и именно они отлично подходят в этом случае.

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

<body>   <header>    <h1>My super duper page</h1>   <!-- Содержимое хедера -->   </header>   <div role="main">   <!-- Контент страницы -->   </div>   <aside role="complementary">   <!-- Дополнительный контент -->   </aside>   <footer>   <!-- Содержимое футера -->   </footer>  </body>

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

Используйте <header> и <hgroup> только при необходимости

Нет смысла писать код, если в этом нет необходимости, правда? Увы, но я часто наблюдаю, как <header> и <hgroup> там, где они не нужны. Вы можете почитать об элементах <header> и <hgroup> подробнее, я же коротко обозначу ключевые моменты:

  • Элемент <header> представляет группу вводных или навигационных средств и обычно содержит заголовок секции
  • Элемент <hgroup> группирует набор элементов <h1>-<h6>, представляя заголовок секции в случае, если он состоит из нескольких уровней (подзаголовки, альтернативные заголовки и т.д.)
Избыток элементов <header>

Я уверен, Вы прекрасно знаете, что элемент <header> можно использовать несколько раз в документе. Поэтому часто встречается такое:

<!-- Не используйте этот код! Здесь header не нужен! -->  <article>   <header>    <h1>My best blog post</h1>   </header>   <!-- Содержимое статьи -->  </article>

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

<article>    <h1>My best blog post</h1>   <!-- Содержимое статьи -->  </article>
Неправильное использование <hgroup>

И снова о заголовках: я часто вижу некорректное использование элемента <hgroup>. Не следует использовать <hgroup> вместе с <header>, если:

  • Присутствует только один заголовок
  • <hgroup> хорош сам по себе (т.е., без <header>).

Первый случай:

<!-- Не используйте этот код! Здесь hgroup не нужен -->  <header>   <hgroup>    <h1>My best blog post</h1>   </hgroup>   <p>by Rich Clark</p>  </header>

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

<header>   <h1>My best blog post</h1>   <p>by Rich Clark</p>  </header>

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

<!-- Не используйте этот код! Здесь header не нужен -->  <header>   <hgroup>    <h1>My company</h1>   <h2>Established 1893</h2>   </hgroup>  </header>

Если единственный ребёнок <header>’а это <hgroup>, зачем нужен <header>? Если у Вас нет дополнительных элементов в <header>’е (т.е. сестринских по отношению к <hgroup>), просто уберите <header>.

<hgroup>   <h1>My company</h1>   <h2>Established 1893</h2>  </hgroup>

Подробнее об элементе <hgroup> можно почитать тут.

Не обрамляйте все ссылки в <nav>

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

Элемент nav представляет секцию страницы, связывающую её с другими страницами или частями текущей (секцию с навигационными ссылками).

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

WHATWG HTML spec

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

  • Первичная навигация
  • Поиск по сайту
  • Вторичная навигация (спорно)
  • Внутристраничная навигация (внутри длинной статьи, например)

Хотя в этом случае сложно судить, что есть правильно, а что — нет, я считаю, что не стоит заключать в <nav>:

  • Переключатели страниц
  • Социальные ссылки (хотя возможны исключения в случаях, когда социальные ссылки являются основной навигацией. Например, сайты вроде about.me или flavours.me)
  • Теги поста
  • Категории поста
  • Третичная навигация
  • Объемные футеры

Если Вы не уверены, обрамлять ли список ссылок в <nav>, задайте себе вопрос: «Это основная навигация?». Примите во внимание следующее:

  • “Не используйте <nav>, если Вы считаете, что <section> с заголовком <hx> тоже подойдёт” — Hixie в IRC
  • Возможно стоит добавить «Перейти к» для удобства?

Если ответ на эти вопросы — «Нет», это, видимо, не место для <nav>.

Общие ошибки в использовании элемента <figure>

Ах, <figure>. Разобраться с правильным использованием этого элемента, как и его собрата <figcaption>, непросто. Давайте взглянем на некоторые общие ошибки, касающиеся этого элемента.

Не каждое изображение <figure>

Ранее, я советовал не писать больше кода, чем необходимо. Здесь похожая ситуация. Я встречал сайты, где каждая картинка была обрамлена в <figure>. Не нужно использовать больше разметки только для того, чтобы использовать больше разметки. Вы просто создаете себе больше работы, но никак не улучшаете описание своего контента.

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

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

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

Ваш логотип — не <figure>

Тоже самое касается и логотипа. Часто я вижу такое применение:

<!-- Не используйте этот код! Он неверен! -->  <header>   <h1>   <figure>   <img src="/img/mylogo.png" alt="My company" class="hide" />   </figure>   My company name   </h1>  </header>
<!-- Не используйте этот код! Он неверен! -->  <header>    <figure>   <img src="/img/mylogo.png" alt="My company" />   </figure>  </header>

Тут нечего добавить. Это просто неверно. Можно долго спорить о том, должен ли логотип быть в <h1>, но мы сейчас не об этом. Настоящая ошибка — злоупотребление элементом <figure>. <figure> следует использовать только когда Вы ссылаетесь на него в документе. Вряд ли Вы где-нибудь будете ссылаться на свой логотип. Достаточно этого:

<header>   <h1>My company name</h1>   <!-- Еще что-нибудь -->  </header>
<figure> может быть не только изображением

Другой частый случай недопонимания элемента <figure> заключается в предположении, что его можно применять только для картинок. Но это не так. В <figure> может быть заключено видео, аудио, графики (в SVG, например), цитата, таблица, блок кода, стихотворение или любая комбинация перечисленного. Не ограничивайте себя в использовании <figure> одними картинками. Наша задача как приверженцев веб-стандартов — описать контент нашей разметки.

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

Не используйте ненужный атрибут type

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

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

<!-- Не используйте этот код! Его разметка перегружена! -->  <link type="text/css" rel="stylesheet" href="css/styles.css" />  <script type="text/javascript" src="js/scripts"></script>

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

<link rel="stylesheet" href="css/styles.css" />  <script src="js/scripts"></script>

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

Некорректное использование атрибутов форм

Вы, должно быть, уже в курсе, что в HTML5 введено множество новых атрибутов форм. Мы рассмотрим их в ближайшее время, сейчас же я коротко расскажу, как делать не стоит.

Логические атрибуты

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

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

  • autofocus
  • autocomplete
  • required

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

<!-- Не используйте этот код! Он неверен! -->  <input type="email" name="email" required="true" />
<!-- Еще один плохой пример -->  <input type="email" name="email" required="1" />

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

<!-- Не используйте этот код! Он неверен! -->  <input type="email" name="email" required="false" />

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

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

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

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

<input type="email" name="email" required />

habr.com

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

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

 

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

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

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Заголовок страницы</title>     <meta name="keywords" content="Ключевые слова, и, фразы, через, запятую">     <meta name="description" content="Описание контента страницы, 1-2 предложения."> </head> <body>

Я добавил тег <meta name="keywords" content=""> который отвечает за ключевые слова. И тег <meta name="description" content=""> который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега <title>. Title страницы должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.

Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные <div> теги, то есть это блочные элементы. Но если <div> не имеет семантической нагрузки, то header, nav, main и другие — уже нужно использовать только осмысленно.

 

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

Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.

<!-- Header страницы -->     <header>             <h1>Site title</h1>     </header>

Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.

<!-- Header страницы -->     <header>             <h1>Site title</h1>             <p>site slogan</p>     </header>

Замечание по поводу тега H1

Следует заметить что в HTML5 тег H1 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.)

До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.

 

Навигация на странице

Оформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.

<!-- Главная Навигация по сайту -->     <nav>         <ul>             <li><a href="#">Home</a></li>             <li><a href="#">Portfolio</a></li>             <li><a href="#">Gallery</a></li>             <li><a href="#">Contacts</a></li>         </ul>     </nav>

 

Контент на странице

Основное содержимое страницы оформляется в тег main. Это может быть одна статья, или несколько превью статей если речь идет о странице блога с несколькими записями. Нельзя помещать сайдбар, хедер страницы, футер или главную навигацию в тег main!

<!-- Основное содержимое страниц --> <main>          ...основной контент страницы...  </main>

 

Оформление статьи

Тег article — служит для обертки статей. В общем этот тег содержит в себе блок контента, который может быть вынут из контекста страницы, и использован отдельно в другом месте. Это может быть статья (полный тескт статьи или превью), пост на форуме, и т.п.

На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime="2015-09-30" или с указанием часов минут и секунд datetime="2015-09-30T15:25:55". Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.

<main> ... <!-- Статья -->     <article>          <!-- Шапка статьи если в шапке у нас больше чем заголовок -->         <header>                      <!-- Заголовок статьи -->             <h1>Article title</h1>                          <!-- Дата публикации статьи  -->             <time datetime="2015-09-30T15:25:55" pubdate>30 Сентября</time>                      </header>          <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>          <!-- Подзаголовок страницы -->         <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>                  <footer>             <a href="#">Читать далее</a>             <a href="#">Комментарии</a>         </footer>      </article> ... </main>

Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.

 

Сайдбар или колонка с виджетами

Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:

<!-- Сайдбар --> <div class="sidebar">          <!-- Виджет в сайдбаре -->         <aside>             <h1>Widget title</h1>             ...         </aside>          <!-- Виджет в сайдбаре -->         <aside>             <h1>Последние записи</h1>             ...         </aside>           <!-- Виджет в сайдбаре -->         <aside>             <h1>Популярные комментарии</h1>             ...         </aside>          </div>

 

Тег section

Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента <section> вне контекста самой страницы. Рекомендуется использовать теги (<h1> – <h6>) для обозначения темы секции.

В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег <section>. Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section, наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section, но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»

Пример использования тега section в списке с перечислением городов:

<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>      <section>         <header>             <h3>Boston</h3>         </header>         <p>That's Beantown to its friends.</p>     </section>      <section>         <header>             <h3>Minneapolis</h3>         </header>         <p>It's so <em>nice</em>.</p>     </section>  </section>  <small>Accommodation not provided.</small>

 

Подвал сайта — Footer

Подвал сайта оформляется тегом <footer>

<!-- Подвал сайта --> <footer>         <p class="copyright">© 2015 Rightblog.ru Copyright</p> </footer>

 

Заключение

Для проверки структуры страницы можно использовать инструмент HTML5 outliner. Он показывает структуру страницы блокам и заголовкам.

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

В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org

 

Важное замечание по использованию HTML5 тегов. В спецификации не указаны жесткие правила по использованию семантических тегов, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа.

 

Статьи и материалы по теме:
http://html5forwebdesigners.com/semantics/
http://habrahabr.ru/post/214407/
http://www.adobe.com/devnet/archive/dreamweaver/articles/understanding-html5-semantics.html
http://www.smashingmagazine.com/2011/11/html5-semantics/
http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx
http://www.w3schools.com/html/html5_semantic_elements.asp

rightblog.ru

Семантические теги HTML5

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

Тег <DOCTYPE>

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

Теги <header> и <nav>

Для шапки сайта в HTML5 предусмотрен специальный тег <header>.
Еще одним новшеством HTML5 является тег <nav>, он используется как контейнер для основной навигации, меню, расположенного, как правило, в header.

Теги <main> и <aside>

Для основного содержимого сайта в HTML5 введен новый семантический тег <main>. Тег этот должен быть единственным на странице.

Блоки второстепенной (или вспомогательной) информации заключаются в тег <aside>. Это могут быть блоки меню, расположенные в левой части веб-страницы, блоки форм выбора каких-то категорий и т.п.

Теги <section> и <article>

На видеоуроке также будут рассмотрены такие новые семантические теги HTML5, как <section> и <article>.
Тег <section> используется для разделения логических блоков, а тег <article> — для выделения независимых блоков, т.е. новости, статьи, записи в блоге и т.п.

Тег <footer>

И, наконец, для выделения подвала сайта HTML5 ввел такое новшество, как тег <footer>.
Со всеми этими тегами вы познакомитесь на нашем занятии.

Это последний наш видеоуок курса по основам HTML. Вы молодцы! Вы прошли его вместе с нами до конца, заложив тем самым фундамент для строительства своего блестящего будущего в веб-разработке. Теперь можно смело переходить к изучению еще одного нашего видеокурса «Основы CSS»

Приятного всем просмотра! Учитесь с удовольствием!

loftblog.ru

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

Твитнуть

В HTML4 благодаря использованию CSS Вы могли создавать страницы с хорошо понятной для пользователей визуальной структурой, но были ли эти страницы также понятны для поисковых систем или браузеров?

Например, как поисковый робот может отличить содержимое документа от навигационного меню если они размечены с помощью одинаковых div элементов?

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

Тэг Описание
<footer> Определяет футер.
<header> Определяет заголовочный блок сайта.
<nav> Определяет навигационное меню.

Так выглядела общая структура документа в HTML4.

Структура HTML4 Документа

Так будет выглядеть общая структура документа в HTML5 с использованием новых тэгов разметки.

Структура HTML5 Документа

С помощью тэга <section> Вы можете группировать логически связанное содержимого в документе.

Если логически связанное содержимое является автономным (может использоваться в других документах независимо от остального содержимого на странице) необходимо использовать вместо <section> тэг <article>.

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

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

Данным тэгом могут выделяться: цитаты, дополнительная информация к статье, словарь с терминами, список ссылок и т.д.

С помощью тэга <mark> Вы можете выделить «важную» часть в тексте.

В журналах и газетах иллюстрации часто сопровождаются подписями. В HTML4 невозможно было создавать подписи не прибегая к использованию CSS.

В HTML5 это проблема решена добавлением новых тэгов: <figure> и <figcaption>.

www.wisdomweb.ru

Семантические теги в языке HTML

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

Политика спецификации HTML5 заключается в том, чтобы каждый HTML-тег имел свою семантику. Давайте приведем простой пример, например есть теги <s> </s> они делают текст зачёркнутым. Раньше поисковая система зайдя на сайт и увидев этот тег, никак не реагировала на него, теперь она должна понимать, что это не просто зачеркнутый текст, а например что это обозначение старого ценника у товара или устаревшей (не актуальной) информации.

Ниже рассмотрены наиболее популярные теги, имеющие на данный момент семантический акцент.

abbr — текст размещённый между этими тегами, в HTML5, воспринимается как аббревиатура или акроним. В HTML4 для акронимов существовал свой тег acronym.

address — содержит адрес (контактные данные создателя сайта). Может содержать почтовый адрес, емаил, телефон. Вместо него лучше использовать микроразметку hCard.

blockquote — длинная цитата занимающая целый абзац p (теги цитаты обрамляют абзац). Семантический акцент — цитата взятая из внешних источников.

cite — названия произведений, романов, картин, стихов, песен и т.д.

del — старый, удалённый текст.

dfn — данным тегом обрамляется впервые встречающийся термин в тексте.

ins — новый, добавленный текст.

em — наклонный шрифт, ключевое слово, усиление голоса, логическое ударение на слово в предложении. Например тег i, хоть и делает шрифт наклонным, но не имеет семантического акцента.

q — короткая цитата являющаяся частью абзаца p

s — ошибочная или устаревшая информация, но при этом оставленная на странице (например старый ценник).

strong — жирный шрифт, ключевое слово, усиление голоса, изменение интонации, текст высокой степени важности. Например тег b, хоть и делает шрифт жирным, но не имеет семантического акцента.

Некоторые семантические теги появившиеся в HTML5

<article> </article> — основной контент страницы, тег HTML5,
Семантический акцент: поисковая система считает, что информация расположенная между этими тегами, является основной на HTML-странице.

<aside> </aside> — боковая панель (сайдбар) сайта, тег HTML5,
Семантический акцент: поисковая система считает, что информация расположенная между этими тегами, является частью сайдбара (боковой панели).

<footer> </footer> — подвал сайта, тег HTML5,
Семантический акцент: поисковая система считает, что информация расположенная между этими тегами, является подвалом сайта.

На данный момент в этой статье рассмотрены лишь некоторые семантические теги, в будущем мы рассмотрим семантический акцент каждого HTML-тега по отдельности.

PS: развитие языка HTML, движется в направлении семантики, когда для каждой значимой информации, будет создаваться свой собственный тег. Чтобы более яснее представить себе что такое семантика, почитайте статьи посвящённые микроразметке.

Читать далее: Список всех HTML-тегов по алфавиту.

gabdrahimov.ru

Комментарии +

  1. Владимир Кузнецов 27 июля 2011 в 19:37

    Быстро проверить корректность структуры документа мне помогает инструмент h5o http://code.google.com/p/h5o/

    Когда article, section, nav остается без заголовка (а это сразу выявляется в структуре), то нужно либо дать блоку осмысленный заголовок, либо заменить его на div. Памятуя об этом правиле, можно избежать неуместного использования новых тегов, мне кажется.

  2. Лев Солнцев 27 июля 2011 в 19:43

    Стоить отметить комментарии к оригинальной статье, в которых говорится, что Internet Explorer не распознает атрибут required. Так, используя jQuery, запрос вида $('input[required]') при наличии <input required/> ничего не вернёт в Internet Explorer 8 и ниже. Но $('input[required=""]') при <input required=""/> даст результат.

  3. B@rmaley.e> 27 июля 2011 в 22:31

    Забавно, я перевел эту же статью для Хабра, но эту заметил только сейчас (после обновления RSS фида).

  4. Вадим Макеев 27 июля 2011 в 22:33

    B@rmaley, статья хорошая — понятное дело, хочется перевести.

  5. Антон Платонов 28 июля 2011 в 0:22
     <script href="js/scripts"></script> 

    Атрибут href тут правильно указан вместо привычного src, или это ошибка?

  6. Вадим Макеев 28 июля 2011 в 0:30

    Антон, спасибо — это была опечатка в оригинальной статье, поправил.

  7. Петр 28 июля 2011 в 4:19

    Не «экстра-элементы div», а «дополнительные элементы div». То же самое насчёт «экстра-разметки вокруг картинок» (лучше: «избыточной разметки вокруг картинок»). В остальном перевод хороший.

  8. Сергей 28 июля 2011 в 8:22

    Кажется пропущен предлог «с» в предложении «Правильным использованием этого элемента вместе подельником не так-то просто овладеть.»

  9. Вадим Макеев 28 июля 2011 в 10:37

    Петр, что касается «экстра-элементов div», то согласен — там смысл немного другой, поправил. А вот что касается экстра-разметки, то это уже профессиональная лексика, ничего не поделаешь, все говорят именно экстра-разметка.

    Сергей, поправил, спасибо.

  10. crwin 28 июля 2011 в 10:53

    Не планируете перевести статьи html5doctor? Отпала бы необходимость в подобных «разоблачениях».

  11. Вадим Макеев 28 июля 2011 в 10:56

    crwin, у нас уже переведены статьи «Элементы small и hr», «Элементы i, b, em и strong» и ещё две (про hgroup и figure) лежат в черновиках. Доктор HTML5 — это самое интересное из того, что сейчас можно переводить, так что всё будет.

  12. Петр 28 июля 2011 в 12:33

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

  13. Павел Ловцевич 28 июля 2011 в 12:36

    Не согласен с автором по поводу неуместности использования nav для постраничной разбивки. Зачем «дробить» и ветвить код разные типы навигации?

  14. Роман Комаров 28 июля 2011 в 14:52

    Обожемой, они советуют вместо одного враппера использовать <body>. У такого решения слишком много проблем. Ну т.е. конечно, они потом говорят, что и див всё-ещё можно применять, но блин. Использование <body> для раскладки — очень, очень плохо.

    А от <hgroup>, всё же, надо избавиться. Лучшее правило его применения — просто забыть про него.

  15. Павел Ловцевич 28 июля 2011 в 19:50

    Кстати, да. Первое, что приходит на ум — при сужении области body, нельзя будет за его пределы вынести блок. Например, при оверлее (эффекте lightbox), если body уже доступного места в окне браузера, то и оверлей не затемнит всю рабочую область браузера, а только область body.

  16. exessqd 31 августа 2011 в 10:54

    Не дело верстальщика описывать семантику страницы.

    Для кого она нужна? Для поисковиков в первую очередь, и в наименьшей степени для альт. устройств (т.к. все популярные визуальные устройства поддерживают CSS, а для screen reader’ов достаточно обозначить структуру т.е. навигацию nav и область контента article.)

    Все популярные визуальные устройства поддерживают CSS — обьясню получше, то что ты сейчас делаешь менюшку ul>li совершенно не отличается от div>div, div>span, span>span или любой другой чистой конструкции. (при необходимости эти конструкции меняются но то что нужно поисковикам будь то h1,h2,h3,h4,h5,h6,section,figure,details,nav,article,strong,em, и т.д.)

    Если семантика html5 нужна в большей стпени поисковикам то и заниматься ей должны те кто понимает в поисковиках — сеошники.
    (Что кстати на данный момент совершенно бесполезно т.к. не один поисковик не учитывает html5 семантику.)

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

  17. Вадим Макеев 31 августа 2011 в 13:08

    exessqd, семантика не нужна этим гопникам от IT или «сеошникам», им нужно сайт в топ вытащить, нагенерив уникального контента и засрав интернет дорвеями. Не вижу смысла пересказывать здесь свой доклад «Вёрстка со смыслом», вся аргументация в нём. А ещё в статье «Семантическая вёрстка», не забудьте про вторую её часть.

    Но если коротко: семантика — это методология, общий язык для разработчиков.

  18. exessqd 1 сентября 2011 в 11:20

    Видел я и доклад, и статьи читал.

    Сначала скажу я подразумеваю под бесполезной семантикой — это использование dl,dt,dd,ul,ol,li,p и т.д. вне области контента. Давайте назовем это «списковая семантика».

    Какая бывает семантика и кому она нужна?

    Семантика контентной области(h1,h2,h3,h4,h5,h6,hgroup,em,strong и т.д.) — нужна поисковикам, невизуальным устройствам.

    Структурная семантика(nav,article,aside,header,footer) — нужна
    поисковикам(в будущем), невизуальным устройствам.

    Списковая семантика — нужна никому.

    По моему мнению в статье приводится единственная адекватная причина делать «списковую семантику» — это доступность.

    Вопрос здесь в том — доступность для кого?
    Для альт. устройств, они бывают визуальные и невизуальные.

    Визуальные — телефоны(поддержка css неполная), смартфоны (полная поддержка), ридеры(полная поддержка).

    Т.е. CSS — универсален для всех визуальных устройств.
    Никто не выключает свой CSS чтобы посмотреть будет! твои dl,dt,dd,ul,ol,li,p никто не увидит.

    Невизуальные — screen readers(читалки), не учитывают списки т.е. никто твои dl,dt,dd,ul,ol,li,p не услышит.

    Как вообще появилась списковая семантика?

    Я предпологаю это было так: Какой-то перец в году 1998 выключил стили и увидел: «Опа, что-то моя страница смотрится как-то хреново, дайка я списочками все расхерачу» Он хорошо знал что такое язык разметки и сразу вспомнил «Блин! Ещё отцы основатели идеологии языков разметки говорили что оформления сайта не должно зависеть от конкретного устройства а список он и в африке список»

    Хватит творить херню и называть это семантикой, списковая семантика бесполезна.

    P.S.
    Чтобы ваш сайт был доступен с читалок не обязательно стилизовать структурные теги, делая ужасный javascript’овый fallback для старых браузеров, достаточно обернуть ваш код в них.

    Было

     <article class="content"></article> 

    Стало

     <article><div class="content"></div></article> 

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

  19. Вадим Макеев 1 сентября 2011 в 17:26

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

  20. alexben 4 сентября 2011 в 10:37

    И так, я не согласен по поводу употребления тега

     <footer> 

    , именно так, как использует Макеев Вадим. Говорим о семантике, так для кого она нужна? Конечно — прежде всего для верстальщика. А поглядывая исходный код блога pepelsbey.net, невольно улыбаешься накой черт использовать тег

     <footer> 

    если можно использовать div или тот-же «спанчик» с классом — и ничего НЕ потеряешь. Какой логикой пользуется автор? Остается только догадываться.
    Аргументы которые он приводит в своем докладе — буквально притянуты за уши.

    Ну и статья достаточно не однозначна,особенно понравилось высказывание:

    И хотя здесь не может быть «правильного» или «неправильного» использования, поверхностный опрос вкупе с моей собственной интерпретацией говорят, что следующие случаи не подходят для использования :
    Постраничная навигация;

    http://pepelsbey.net/pres/sense-coding/
    Идем по этой посылочке и находим код, где сам Апостол нам показывает, как можно использовать nav.
    Как видите у каждого есть свои взгляды, на правильное (семантичное) использование тегов по стандарту HTML 5.
    Только это все условно и не стоит этой теме придавать особое значение. Читайте стандарты и старайтесь их не нарушать.
    А как правильно подскажет Ваша логика, а не абсурд который пишут мнимые проповедники.

  21. exessqd 5 сентября 2011 в 9:49

    если можно использовать div или тот-же «спанчик» с классом — и ничего НЕ потеряешь.

    Ничего не потеряешь кроме того что с этой или этой штуки никто не поймет что это кокретно футер, а если и поймут то быстро перейти к нему не смогут.

  22. alexben 6 сентября 2011 в 5:20

    exessqd, завуалированный ответ получился. Очень похожий на спам.
    Раскроете до конца свою мысль?

  23. exessqd 6 сентября 2011 в 16:44

    Раскрыл подробно из двух предыдущих комментариев, но раз ты спрашиваешь.

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

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

     Я "a href="http://ya.ru""ссылка"/a" Я "em"эмоцианальный"/em" Я "strong"важный"/strong" Я "small"второстпенный"/small" Я "s"неточен"/s" Я "cite"название работы"/cite" Я "q"цитата"/q" Я "dfn"термин"/dfn" Я "abbr title="""Абревиатура"/abbr" Я "time"время 2009-10-21"/time" Я "code"код"/code" Я "var"переменная"/var" Я "samp"програмный вывод"/samp" Я "kbd"названия клавиш"/kbd" Я "sup"нижний индекс"/sup" Я "sub"верхний индекс"/sub" Я "i"доп-выделение"/i" Я "b"ключевое слово"/b" Я "u"замечание"/u" Я "mark"подсветка"/mark" Я "br" разрывашка Я "wbr" перенос сплошного текста 

    то есть элементы разметки отражают смысл содержимого а не его оформление.

    Была и другая причина — независимсоть от устройства вывода.

    Оформление нужно людям, программам нужен смысл.

    В HTML5 пошли ещё дальше и придумали структурную семантику
    section,nav,article,aside,hgroup,footer,address
    Чтобы программы могли отличать не только текст но и области содержимого.

    Кому это нужно?

    На данный момент это нужно двум типам программ, поисковым роботам(чтобы лучше индексировать сайт, пока не работает) и альтернативным устройствам (screen readers — тип программ которые читают текст с экрана монитора, для слепых людей)

    Человек использующий screen readers уже сейчас может, на странице размеченной структурными тегами, быстро переходить от одной части страницы к другой не читая при этом весь текст(особенно если это seo текст^^ ).

    Что будет дальше?

    W3C уже давно старается реализовать концепт «семантической паутины».

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

    По сути искусственный интеллект который знает твой образ жизни, твои привычки, чего ты хочешь и дает тебе информацию которая будет тебе полезна в данный момент. Не нужно будет искать, нужно просто набрать или даже подумать(?).

    Но пока skynet не появился мы можем спать спокойно.

    P.S. Зачатки skynet можно усмотреть в проекте wolframalpha

  24. alexben 7 сентября 2011 в 4:05

    Мой не «идеальный искусственный интеллект» отказывается воспринимать конкретно тег footer, именно так, как его использует уважаемый, Вадим Макеев.
    Хотя и не нарушает спецификации 🙂 он (прошу прощения) пытается играть на 2 фронта. Да, именно идя на поводу спецификации подстраивает свою логику.
    Я всего лишь хотел сказать, а не должно ли быть наоборот?
    Использовать правила игры во благо логике…
    Ну можно представить футер у блока, пусть даже у всех блоков/разделов. Но в комментариях зачем?

    exessqd — из всего что я понял, Вас должно огорчить то момент, что использование h1 во всех новых узлах, (т.е. употребление его многократно) может «сказочно» отразится на поисковых системах. На сколько помню, это 2 элемент важности в seo, после title.

  25. Вадим Макеев 7 сентября 2011 в 10:06

    alexben, да что ж вы пристали к Вадиму Макееву? Шоколад, как говорится, не виноват. Если можно использовать футер там, куда он логически подходит, то почему вам, как разработчику, как человеку с интеллектом, не хватает гибкости мышления, чтобы видеть в комментарии самостоятельное содержимое, которое может иметь мета-информацию, помещённую в футер?

    И ещё просьба: обратите внимание на правила оформления комментариев и оборачивайте блочные фрагменты кода в <source> (что станет pre > code), а не просто в code — это только для строчного кода.

  26. alexben 7 сентября 2011 в 23:50

    видеть в комментарии самостоятельное содержимое

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

  27. exessqd 9 сентября 2011 в 11:40

    alexben, согласен, все правильно.
    И зачем было так кричать?

  28. Seva 10 ноября 2011 в 14:35

    Добрый день немного не по теме, но как правильнее верстать формы? а именно связь label и input например… Список определений проситься, но итак ведь есть связь for id и в придачу в спецификации везде параграфом разметка идёт…

  29. Вадим Макеев 24 ноября 2011 в 12:43

    Seva, для форм есть fieldset, legend, label и остальные элементы, уже непосредственно сами формы. Сочетая их по назначению вместе со стерильными элементами, вроде div и span, на мой взгляд, можно написать любые формы.

  30. Seva 24 ноября 2011 в 14:14

    тоесть вы считаете что внутри формы не нужно использовать дополнительные семантические теги типа p, dl, ul, ol и т.д.

    а для разметки либо если позволяет css без лишних тегов или если не позволяет то добавить стирильных? но тогда почему в спецификации они параграфами размечают?

  31. Seva 6 апреля 2012 в 14:54

    Как правильно использовать aside ?
    Например страница с описанием страны, на ней есть блок новостей относящихся к этой стране. он должен быть в aside или section, ведь по сути это раздел и имеет отношение к описанию страны, но и является самостоятельным содержимым косвенно относящимся к странице с описанием страны.

    Или например блок комментариев к новости, вроде как имеет косвенное содержимое то есть aside, но само по себе существовать не может получается section.

  32. Fktrctq 8 мая 2012 в 13:51

    Подскажите пожалуйста какие теги div блоков заменить на теги HTML5
    http://s019.radikal.ru/i604/1205/3b/56722aa5076e.jpg пример вёрстки

  33. m1ron 30 июня 2012 в 14:17

    Кардинально не согласен с утверждением, что нельзя использовать как контейнер для страницы.
    Если рассматривать один html-документ, то логика на вашей стороне.

    Но если рассматривать html-документ как всего лишь один раздел, кусок, секцию целого проекта, тогда использвание тега section логически оправдано.
    Более того, если поместить все разделы(секции) сайта в один HTML-документ, то логическая структура проекта не нарушится (разделы сайта останутся в section, все логично). А в вашем случае они останутся в DIV’ах. Где семантика?

  34. Роман 21 августа 2013 в 20:17

    Прочитал комментарии к постам. Много спора о семантики блочных и строковых элементов. Кто — то не видит смысла использования, а другие обратное. Если разобраться тогда вообще можно не использовать семантические элементы в коде страниц, а взять не смысловые — блочный div, и строковый span, и сверстать только из них с применениями стилями CSS. Ведь по большому счету все элементы созданы для удобства их использовании для создания каркаса и вложений, а так же и строковые. Никто не принуждает использовать тот или иной стиль верстки, так как и программированию . Есть только рекомендации их использования. ))))

  35. Alex 13 октября 2013 в 2:44

    «Избегаем популярных ошибок в HTML5»
    А с чего вообще автор взял, что это ошибки?
    W3C дает лишь рекомендации по оформлению, а не четкие правила как в математике. Если же это рекомендация, то какие могут быть споры?

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

  36. Евгений 13 июня 2014 в 14:18

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

    Избыточно:

    <header>  <nav>  <ul>  <li><a href="#">Раздел раз</a></li>  <li><a href="#">Раздел два</a></li>  </ul>  </nav> </header> <article>  ... </article> <footer>  ... </footer>

    Странно, что на одном уровне находятся и:

    <nav>  <ul>  <li><a href="#">Раздел раз</a></li>  <li><a href="#">Раздел два</a></li>  </ul> </nav> <article>  ... </article> <footer>  ... </footer>

    Главное меню не в , а содержит только один элемент:

    <header>  <ul>  <li><a href="#">Раздел раз</a></li>  <li><a href="#">Раздел два</a></li>  </ul> </header> <article>  ... </article> <footer>  ... </footer>
  37. Евгений 13 июня 2014 в 14:20

    Ко второму примеру заголовок:
    «Странно, что на одном уровне находятся <nav> и <footer>»

    К третьему:
    «Главное меню не в <nav>, а <header> содержит только один элемент»

  38. Илья 12 сентября 2014 в 13:02

    Тег hgroup по текущим реалиям deprecated
    Было бы неплохо указать об этом в статье

  39. Вадим Макеев 12 сентября 2014 в 13:34

    Илья, добавили указание, спасибо.

  40. Полина 4 августа 2015 в 13:06

    Очень полезная статья для начинающих верстальщиков. Спасибо!! 😉

web-standards.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.