Html5 новые теги: Новые теги | htmlbook.ru

старые теги нового назначения / Хабр

waldeh 26 сен 2011 в 12:04

Время на прочтение 3 мин

Количество просмотров 33K

Из песочницы

Всем известно, что теги <b>, <i>, <s>, <small> являются презентационными, а следовательно, исходя из парадигмы «структура, представление, поведение» их использование не приветствуется. Куда более привычными представляются элементы <strong>, <em>, <del>. Так было на протяжении долгих лет практики разработки. Однако многое поменялось в семантике этих элементов с приходом HTML5. Теперь у нас 4 новых тега со смыслом и каша в голове.

<b> vs <strong> Если раньше все учебники по вёрстке пестрили фразами вроде «используйте <strong> вместо <b> », и это было наполовину верно, то сегодня такая привычка может сыграть злую семантическую шутку. А дело всё в том, что авторы HTML5 предлагают использовать <b> для выделения отрывков текста с целью обратить внимание читателя, однако не подразумевая усиления значимости текста или интонации. Спецификация приводит примеры использования для разметки ключевых слов в документе

<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

и лидов (первый абзац статьи в журналистике)

<article>
<h3>Kittens 'adopted' by pet rabbit</h3>


<p><b>Six abandoned kittens have found an unexpected new mother figure — a pet rabbit.</b></p>
<p>Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.</p>
</article>

В свою очередь <strong>, как и раньше, означает повышенную значимость своего содержимого.

<i> vs <em> Отныне <i> содержит текст, выбивающийся из общего окружения, но не имеющий эмоциональной окраски. На мой взгляд, <i> логично использовать там, где типографская традиция предполагает курсив (например, слова на иностранном языке, термины и др.)

<i>Per aspera ad Astra</i> — в переводе с латыни изречение означает «Через тернии к звёздам».

<em> же означает эмфатическое ударение, эмоциональный акцент на данном отрывке текста. Это тот случай, когда в речи мы выделяем слова голосом (интонацией, громкостью и др.)

Казнить <em>нельзя</em>, помиловать.

Внимательно читайте договор!

«Текст мелким шрифтом» (информация, являющаяся юридической формальностью, как то лицензия предприятия или юридический адрес и др.) мы, как правило, размечали элементом с классом, задающих в визуальных  ПА более мелкий шрифт. Теперь же в нашем арсенале появился новый старый семантический элемент — <small>.

Холивар о

<s> Раньше <s> был ни чем иным, как зачёркнутый текст. Теперь <s> представляет информацию, которая утратила свою актуальность.
У нас также есть элемент <del>, результатом обработки которого по умолчанию в визуальных ПА является зачёркнутый текст. Он означает изменения в документе, и на первый взгляд их назначение может показаться одинаковым. Однако здесь есть тонкий момент. Рассмотрим пример страницы товара в интернет-магазине.
На ней может быть указано две цены, одна из которых зачёркнута. Её мы размечаем элементом <s>. Это значит, что старая цена утратила свою актуальность (не важно когда это было, важен сам факт). Как проверить, что не <del>? <del> подразумевает изменения, внесённые в документ(важно то, что в некоторый момент времени документ был изменён). В нашем же случае, в новом документе уже содержится неактуальная информация.

Новая семантика и старый доктайп

Если по каким-то непонятным причинам вы не можете заменить доктайп на новый и формально верстаете в HTML 4.01 — не отчаивайтесь. Используйте старые новые элементы с новым смыслом и со временем вы скажете себе «спасибо». Возможно, кто-то скажет, что это неправильно, но ведь эти элементы, кроме <s> даже не являются невалидными. Кроме того, HTML5 разрабатывался с расчётом на обратную совместимость, это же относится и к новой семантике старых элементов. Радикально ничего не изменилось, а добавилась лишь семантическая перчинка.

Теги:

• HTML5
• семантика
• веб-стандарты

Хабы:

• CSS

Стоит ли использовать новые семантические теги html5

Кто только открывает для себя волшебный мир верстки и веб-дизайна, обязательно натыкается на кучу споров в интернете, какой стандарт использовать: html 4. 01, xhtml или html5. Если войны по первым двум идут уже несколько лет, так что тут еще как-то понятно. А вот с новичком  html5 (хотя «новичком» его можно назвать номинально, поскольку разработка его идет уже несколько лет) есть куча вопросов.

Поддержка большинства стандартов html5 уже реализована во всех новых браузерах, а для старых браузеров есть решения на javascript типа html5shiv.js или modernizer.js.

Основное преимущество html5 преподносится в том, что верстка становится семантической.

Семантическая верстка: что за зверь?

Теоретически, интернет смотрят не только нормальные люди с нормальными руками, нормальными глазами и на нормальных компьютерах/ноутбуках.  Но есть еще люди с физическими недостатками типа слепоты или низкого зрения, которые смотря через специальные браузеры, которые читают вслух страницы. А есть еще и компьютерные боты, которые качают страницы, анализируют и обрабатывают их для своих целей – поисковые роботы.

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

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

Семантика в старых версиях html4 и xhtml

В старых стандартах выразить структуру документа можно только иерархией заголовков h2-h6. Все.

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

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

Новые семантические теги в html5

Основные нововведения таких блочных тегов: header, nav,  main, article, section, aside и footer.

Классная идея! Вместо тега <div id=”header”> писать просто <header>. С одной стороны вроде и код меньше, с другой стороны вроде и понятнее верстка получается. Как бы для этого и разрабатывались новые теги на основании анализа верстки множества страниц.

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

Увы, если посмотреть рунет, то можно увидеть просто кучу «веб-мастеров» с юкоза (увы, и не только там), которые приводят такую схему  верстки страницы:

Типа замените свои дивы и будет вам щастье!

Семантика на моих проектах

Ну, раз такое счастье стало доступно, то почему бы не применить это на практике? Сказано-сделано. И на своих сайтах я заменил часть div на новомодные теги.

И стал ждать манны небесной от поисковых систем. Один апдейт, второй,  третий. А страницы не выходят в топ. Плохо, но может контент не тот. Может сезонный спад.

Так прошел год. Я уже и забыл о своем эксперименте. Пока не попал под фильтр АГС от Яндекса и не стал копать.

На уважаемом сайте htmlbook.ru, читая еще одну статья про семантическую верстку на html5, нашел интересный сайт-сервис, по семантическому анализу страницы  HTML5 Outliner. Причем можно внести как адрес, так и кусок кода.

После просмотра своих страниц я очень расстроился! Оказалось, что куча непонятных секций, а сам контент имеет 2-3 уровень! Да еще и после «неизвестных секций». А вот у seo-гуру почему-то все красиво укладывается в структуру и часто без всяких нововведений. Обидно, блин!

Семантические теги на самом деле

Вот только если открыть спецификацию html5 на официальном сайте w3c и прочитать её даже с переводчиком, оказывается, что не все так просто.

Тупая подстановка вместо div — header  и так далее совершенно не срабатывает и срабатывать не будет.

Из-за чего такой сыр-бор с семантикой?

По моему скромному мнению, такое разночтение состоит из 2 основных причин:

1. Примеры и переводы из-за бугра идут на простейших страницах без деталей и привязки к реальным страницам со сложной структурой реальных проектов;
2. Синдром «троечника» — попыткой объяснить сложные вещи простыми выводами (тут вспоминаем анекдот про Волка,  Зайца и науку логику).

Большая часть «гуру» не разобралась как действует на самом деле алгоритм и тупа стала писать статьи. А еще большая часть «мини-гуру» просто копировать статьи и передирать их у себя на сайте.

Увы, в эту ловушку попал и я.

А вот серьезные люди уже 3 года назад обсуждали эту проблему!  Увы, тогда я как-то пропустил их статьи.

Пример косяков с семантикой новых тегов html5

То есть возьмем header. Обычно в нем баннер был со ссылкой, может быть вспомогательное меню (главная, обратная связь, карта сайта), кнопки социальных сетей. Ну, и, возможно, главная навигация по сайту.

Такую структуру можно представить так:

А вот если тупо заменить на header и на nav получается

Я даже не поленился и нашел картинки под это дело.
<header>


<h2>Название сайта</h2>
<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>
<h3>Свежие статьи</h3>
<article>
<h3>Заголовок статьи 1</h3>
<p>Текст статьи</p>
</article>
<article>
<h3>Заголовок статьи 2</h3>
<p>Текст статьи</p>
<aside>Дополнительная информация, относящаяся к статье 2</aside>
</article>
</section>
<aside>
<section>
<h4>Blogroll</h4>
</section>
<section>
<h4>Реклама</h4>
</section>
</aside>
<footer>
<p>Копирайты</p>
</footer>

И тогда получается структура вот такая.

1. Название сайта
   1. Untitled Section
   2. Свежие статьи
      1. Заголовок статьи 1
      2. Заголовок статьи 2
         1. Untitled Section
   3. Untitled Section
      1. Blogroll
      2. Реклама

То есть получилась «неизвестная секция» у которой еще одна «неизвестная секция». А контент уже будет от этой секции присоединяться ВТОРЫМ уровнем.

А основную секцию еще кидаем в article + aside. Ой! Еще одна неизвестная секция, да еще и на одном уровне появляется.

Получается, что «хотели как лучше, а получилось как всегда» (с) Черномырдин.

Семантика новых тегов в html5: просто и ясно!

Если сформулировать в двух словах, то

Новые теги — это РАЗДЕЛ!

Все. Точка. Разделы могут быть вложены друг в друга. Но это РАЗДЕЛЫ! С заголовком и другими частями.

Если у такого РАЗДЕЛА нет заголовка, то новыми тегами пользоваться нельзя! Категорически!

И смотреть нужно на эти теги нужно только в виде статьи, а не части страницы!

Header и footer – это части раздела. У них тоже должны быть свои секции, заголовки, текст. Подвал страницы — это не footer! Если у вас в подвале галерея, текст, копирайты  и так далее и все это добро в секциях и с заголовками, то тогда можно использовать. А если это просто полоса со ссылкой и footer нужен лишь для выделения цветом, то используйте простой div.

C header то же самое: если один заголовок, то тег не нужно использовать от слова «совсем».

Article – это статья. Если нельзя все скопировать между этими тегами и перенести на другой сайт, то этим тегом пользоваться нельзя! Если статья одна на страницу – тоже нельзя. У статьи должна быть структура: заголовки – текст – секции — врезка. И только так.

Aside – это врезка в СТАТЬЮ. Не «сайдбар», а именно врезка как в книге с формулами для пояснения основного текста. Во врезке может быть меню навигации по статье, реклама, цитата, картинка, факт и так далее.

Nav — это не любое меню со ссылками на сайте. А лишь главное меню раздела. И не стоит пересыпать этим тэгом сайт. Кстати, и ul-li тоже не очень подходит для меню.

Section — вот самый простой и сложный одновременно тег! Он указывает на раздел, может быть вложенным в другие разделы. Но в нем так же должно быть обязательно заголовок! Поэтому делать в версте сайдбар лучше именно div, а вот виджет уже оформлять с заголовком именно section.

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

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

Предвосхищаю вопрос по h2-h6: в теории в каждой секции теперь можно использовать h2. В теории. Еще раз подчеркиваю! На практике h2 – это заголовок главной статьи. Без ссылки.  Все.

h2 – заголовок статьи. Не сайта.

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

Заключение

Думайте, читайте первоисточники. Не верьте всяким «гуру». В интернете много обмана, вранья. Очень легко попасть на всякий информационный мусор.

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

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

новых тегов в HTML5 | HTML-плюшки

Поиск

27 января 2015 г.

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

Новые семантические/структурные элементы

HTML5 предлагает новые семантические элементы для определения различных частей веб-страницы:

  

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