Полезные статьи по HTML5

[alanvanduke]

Добрый день.

Сегодня на Хабре выложили статью по поводу целесообразности использования новых тэгов HTML5.

Избегаем распространенных HTML5 ошибок

Хотелось бы, чтобы это не было одним сообщением в теме, а предлагаю здесь делиться рецептами «правильного» использования HTML5 разметки.

Edited July 28, 2011 by alanvanduke

[Vlad]

Перевод весьма вольный, а местами просто неточный, из-за чего меняется весь смысл фразы. К примеру, в переводе сказано, что

Не все группы ссылок следует помещать в элемент nav. Его следует использовать для основной навигации.

Тогда как оригинал

the element is primarily intended for sections that consist of major navigation blocks

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

Ну, и где здесь "следует"?! Манипуляция сознанием прямо. К тому же пример в спецификации содержит два <nav> для первичной и вторичной навигации. В статье же, явно сказано, что <nav> для вторичной навигации использовать спорно.

[Nekromancer]

Там же на хабре в комментах была приведена ссылка на другой перевод - http://web-standards.ru/articles/avoiding-html5-mistakes/. Я не читал не тот не тот, но полагаю этот лучше.

[Vlad]

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

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

[buddah]

Плюсую Влада. Тоже тошнит от трясучки над семантикой, а тем-более с появлением хтмл5..

Edited July 28, 2011 by buddah

[Great Rash]

Это потому что вы не SEOшники и вам не платят з/п за то, что некий сайт в гугле на первом месте оказывается

[Vlad]

Погоди, скоро наряду с сеошником новая профессия появится "семантик", который будет "повышать вашу семантику до невероятных размеров".

[buddah]

Enlarge your SEMANTICS for 14 days!

Edited July 28, 2011 by buddah

[Softlink]

Вот кстати, еще неделю назад хотел завести тему на счет html и семантики.

Ввели эти новые теги в HTML5, по сути они все нужны только для семантики, за исключением некоторых функциональных, типа placeholder, audio, video и т.д. Может ли это означать, что в обозримом будущем поисковые машины, будут жестко упираться в семантику сайта? Не придется ли верстальщикам переделывать сайты с учетом всех этих требований? В противном случае, зачем так много уделять внимания этому понятию. Ясное дело, что надо все-таки соблюдать "меры приличия" и заголовки делать именно заголовками, но вот эти article, aside, menu и т.д. зачем оно так рьяно пиарится?

[sigma77]

Это потому что вы не SEOшники и вам не платят з/п за то, что некий сайт в гугле на первом месте оказывается

Всегда думала, что сеошники самые что ни на есть антисемантики...

[buddah]

Ясное дело, что надо все-таки соблюдать "меры приличия" и заголовки делать именно заголовками, но вот эти article, aside, menu и т.д. зачем оно так рьяно пиарится?

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

Edited July 28, 2011 by buddah

[alanvanduke]

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

Edited July 28, 2011 by alanvanduke

[Vlad]

Вот кстати, еще неделю назад хотел завести тему на счет html и семантики.

Ввели эти новые теги в HTML5, по сути они все нужны только для семантики, за исключением некоторых функциональных, типа placeholder, audio, video и т.д. Может ли это означать, что в обозримом будущем поисковые машины, будут жестко упираться в семантику сайта? Не придется ли верстальщикам переделывать сайты с учетом всех этих требований? В противном случае, зачем так много уделять внимания этому понятию. Ясное дело, что надо все-таки соблюдать "меры приличия" и заголовки делать именно заголовками, но вот эти article, aside, menu и т.д. зачем оно так рьяно пиарится?

Ответы уже есть сейчас, а не в некотором будущем.

Первое. Семантические теги на данном этапе развития веба НЕ НУЖНЫ. Они ориентированы на самый широкий класс устройств, включая речевые браузеры, устройства для слепых, смартфоны, где семантика направлена на помощь, в первую очередь, людям, которые используют эти устройства. Опять же, смартфоны из этого списка можно исключить, на них показывается тот же сайт или слегка перевёрстанный под меньшее разрешение.

Второе. Поисковикам наплевать на семантические теги. Яндекс и Гугл воспринимают семантику сайта, но не тегами, а микроформатами и микроданными. Вот с их учётом и надо верстать сайт.

Вывод. Плевать на новые теги. Но мне нравится их использовать, они "красивые", поэтому буду.

[Great Rash]

Всегда думала, что сеошники самые что ни на есть антисемантики...

Поисковики - самые антисемантики. SEOшники лишь рабы поисковиков.

[Softlink]

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

Вывод. Плевать на новые теги. Но мне нравится их использовать, они "красивые", поэтому буду.

Согласен, мне тоже нравится "логичный, красивый и понятный"=красивый код.

[Nekromancer]

Всегда думала, что сеошники самые что ни на есть антисемантики...

Поисковики - самые антисемантики. SEOшники лишь рабы поисковиков.

Вы уже сами заговариваетесь. Поисковикам ужасно пофиг на семантику, на семантику в таком понимании в котором вы её видите. Как правильно заметил Влад, поисковики обращают внимание лишь на определённые места, точнее выделяют некоторые из них, например в заголовках h1-h6, strong, b, ... Но это не в коей мере не определяет в каком месте документа должны стоять эти теги. Единственно наверно, что следует учитывать это правильное формирование HTML разметки, то есть заключение всех свойств атрибутов в кавычки и закрывание всех тегов которые это требуют. Вообще, если говорить о HTML5, то теги которые там добавлены просто упрощают немного жизнь верстальщика, в тех местах где например вместе <div id="header"></div> проще просто написать <header></header>.

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

Поисковик анализирует не строение сайта, а контент. Зачем ему знать где у вас хедер, снизу или сверху?)

Edited July 28, 2011 by Nekromancer

[Softlink]

Поисковик анализирует не строение сайта, а контент. Зачем ему знать где у вас хедер, снизу или сверху?)

Я немного не это имел ввиду.

Вот есть допустим два похожих тега <b> и <strong>, оба вроде бы выделяют текст жирным шрифтом(это из визуальных признаков), однако, многие вторят, что strong дает еще некий приоритет перед <b> в глазах Яндекса или Гугла. Соответственно, может ли такая запись:

<h2>Заголовок</h2>
<article>текст статьи</article>

, быть приоритетней, ну гипотетически хотя бы, например такой:

<h2>Заголовок</h2>
<p>текст статьи</p>

Я к чему все это говорю, это мы сейчас так сидим и рассуждаем, а вот сделает Гугл html5 своим девизом и все, будем переписывать все сайтики. Может стоит уже начинать верстать с учетом семантики новых тегов, а не их красоты, дабы в будущем внезапно на голову не упала груда работы?

[Vlad]

Похоже, что само слово "семантика" стало заезженным, что перестали понимать её назначение. Семантика в вебе это назначение и поведение элементов, а также представление информации для роботов (машин). Первая часть этой фразы говорит о том, что тег, допустим, <table> предназначен для создания таблицы. Представлением же информации для машин тег <table> не занимается, потому что машинная обработка нужна для получения данных. Вот эти данные и нужно каким-то образом обозначить, чтобы тот же поисковик понял, что "Вася" это имя человека, а не кличка собаки или название деревни. Для этого Яндекс активно и поддерживает микроформаты, потому что они облегчают ему жизнь. Но верно и обратное, сайты с микроформатами гипотетически имеют преимущество перед рядовыми сайтами, потому что поисковик через снипеты их выделяет. Аналогично поступает и Гугл, только с микроданными.

Так что да, семантика много значит для поисковика. Только надо обозначать, о какой семантике идёт речь.

[Great Rash]

Но это не в коей мере не определяет в каком месте документа должны стоять эти теги.

Вы не помните истерию SEOшников когда контент должен был полюбому стоять выше сайдбара в коде?

[Nekromancer]

Ну скорее код должен выглядеть не так, а так:

<article>
<h2>Заголовок</h2>
<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p>
</article>

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

Но это не в коей мере не определяет в каком месте документа должны стоять эти теги.

Вы не помните истерию SEOшников когда контент должен был полюбому стоять выше сайдбара в коде?

Не, ну что они хотят, если код для правильно отображения должен выглядеть так.

<div id="body">
<div id="side"></div>
<div id="content"></div>
</div>

<style>
#side {float: right}
</style>

Edited July 28, 2011 by Nekromancer

[SelenIT]

А я давно говорил, что "семантика" в вебе — это SE-мантика

Но теперь, по моим последним впечатлениям, понятие "семантика разметки" всё теснее вползает в тему "доступность содержания": абсолютно пофигу, чем размечено меню внутри — моднявым списком, кондовыми дивами, дремучей таблицей или первобытно-минималистичными текстовыми ссылками, но вот возможность скомандовать читалке "Skip navigation!" крайне желательна — и для этого как-то этот navigation этой читалке нужно всё-таки выделить...

Вы не помните истерию SEOшников когда контент должен был полюбому стоять выше сайдбара в коде?

Кстати, внезапно вспомнил, что не так давно столкнулся с тем, что не только поисковикам есть дело до того, что контент, а что нет

Edited July 28, 2011 by SelenIT

[Shift-Web]

>> Поисковик анализирует не строение сайта, а контент. Зачем ему знать где у вас хедер, снизу или сверху?)

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

Завтра айфоны отсохнут или мутируют в контактную линзу, управляюемую лучами добра или зла, исходящими от ваших мыслительных флюид(образно). Тем более, по некоторым заявлениям, HTML6 не будет. Всё это планируется, как долгосрочная модель, на которую фичи будут постепенно навешиваться.

А что, например, с данными? Это тоже очень удобно эффективно. Гораздо проще сделать стандарт и, если ему последуют, подкрутить парсеры, нежели делать дубовые алгоритмы, которые ещё очень долго будут дубовыми(в отношении SEO).

Эт давно уже реализовано на самом деле на серьёзных проектах. Просто "мы" в танке, или не хотим.

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

Хрень какая-то. А что же это ещё? Любой элемент, кроме пустышек и мет, это есть обёртка. Где хоть в одном авторитетном месте написано, что я не могу сделать так?

Edited July 28, 2011 by Shift-Web

[SelenIT]

Про секции это почти буквальная цитата из текущей спеки:

Note: The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

А с точки зрения этого outline, т.е. по прямому назначению, секция равносильна "куску от заголовка включительно до следующего заголовка исключительно". Философский вопрос, конечно, а нужна ли она тогда вообще...)

[Shift-Web]

А с точки зрения этого outline, т.е. по прямому назначению, секция равносильна "куску от заголовка включительно до следующего заголовка исключительно". Философский вопрос, конечно, а нужна ли она тогда вообще...)

И это значит, что я не могу сделать скажем 2 секции? В одной структура с основным каркасом и содержимым, в другой ещё что-то косвенно относящееся к сайту. На счёт того, нужна она или нет - соглашусь. Бесполезный тег, и длинный.

[SelenIT]

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

А для "чего-то косвенно относящегося" всё же явно будет лучше <aside>, я полагаю