Article html5

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

  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

В формате разметки HTML5 появились новые элементы, которые служат заменой для обычных блочных элементов с атрибутами class и id, например <div class="article"> или <div id="page">.

Рассмотрим три элемента, которые легко можно спутать друг с другом:

  • div — «базовый контейнер», который мы все знаем и любим. Это обычный блочный элемент без какого-либо семантического значения.
  • section — «документ или раздел приложения». Обычно содержит верхний (header) и нижний (footer) колонтитулы. Это несколько схожих по смыслу статей, подраздел одной большой статьи, главная часть страницы (например, раздел новостей) или страница интерфейса с закладками.
  • article — «независимая часть документа или сайта». Эта часть должна иметь смысл вне зависимости от остального содержания. Например, это может быть статья в блоге или форуме, комментарий. Так же как и section внутри этого тега могут размещать верхний и нижний колонтитулы.

Описание на whatwg.org

Разница между div, section и article

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

Элемент section

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

Так же этот элемент служит для разбивки текста на разделы.

Элемент article

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

Что выбрать?

Если проводить аналогию с HTML4, то можно сравнить эти теги с p и blockquote. Оба тега — блочные элементы, но blockquote, как разновидность p, имеет значение «блок цитируемого текста». То же самое и с section и article: тег section обозначает близкий по смыслу текст, а тег article обозначает осмысленную часть этого текста.

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

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

  1. Будет ли содержимое иметь осмысленное значение само по себе, например, при публикации в RSS-потоке? Если да, то выбираем article
  2. Если части содержимого объединены общим значением, то выбираем section
  3. Наконец, если нет никакого семантического значения, то выбираем div

Элемент section, за редким исключением, не должен использоваться, если у него нет заголовка. Если при автоматическом построении содержания документа будут встречаться не именованные разделы, то, вероятно, разметка сделана не верно. Однако наличие не именованных элементов nav и aside может быть вполне типичным явлением.

Итак, элемент section не стоит использовать если:

  1. требуется блочный элемент для декорирования. Это функция элемента div
  2. в этом месте для разметки содержимого больше по смыслу подходят элементы article, aside или nav
  3. у раздела нет естественного заголовка

Элементы section и article используются аналогично div в HTML4. Они не должны встречаться внутри p, blockquote или address.

Пример использования

<header>  <h1>Название сайта</h1>  <nav>  <ul>  <li><a href="page1.html">Страница 1</a></li>  <li><a href="page2.html">Страница 2</a></li>  <li><a href="page3.html">Страница 3</a></li>  </ul>  </nav> </header> <section>  <h2>Свежие статьи</h2>  <article>  <h2>Заголовок статьи 1</h2>  <p>Текст статьи</p>  </article>  <article>  <h2>Заголовок статьи 2</h2>  <p>Текст статьи</p>  <aside>Дополнительная информация, относящаяся к статье 2</aside>  </article> </section> <aside>  <section>  <h3>Blogroll</h3>  </section>  <section>  <h3>Реклама</h3>  </section> </aside> <footer>  <p>Копирайты</p> </footer> 

По мотивам http://oli.jp/2009/html5-structure1/

You May Also Like

About the Author: admind

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

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

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

Adblock
detector