понятие и примеры семантического кода
Если вы тот, кто использует div теги для всего что есть на сайте, эта статья для вас. Мы сфокусируемся на том, как писать чистый семантический HTML код, используя валидную разметку. Вы увидите на практике, как можно минимизировать количество div тегов в вашем HTML коде. Вы научитесь семантической верстке не только в теории, но и на примерах. Написание правильных семантических шаблонов упрощает жизнь не только себе, но и команде в целом. Ну и проще для браузеров, которые интерпретируют код. Чем меньше кода, тем быстрее грузиться страница. Это также позволяет сохранить время и простоту понимания кода, при создании больших проектов. Другими словами, семантическая верстка – это необходимое условие создания качественного сайта.
Понятие семантической верстки
Семантика в HTML верстке – это соответствие тегов к информации находящейся внутри них. Семантика кода также достигается путем уменьшения количества тегов. Таким образом, мы создаем чистый, читабельный, валидный HTML код. Такая страница будет быстрее грузиться и ранжироваться поисковыми системами.
Как достигнуть семантики кода?
Это просто, главное делать все проще и стараться как можно больше все выносить в CSS стили, а JS код в отдельный файл. По классике, на одной HTML странице должен подключаться только один CSS файл и один JS файл. По поводу HTML, на каждом сайте своя ситуация. Ведь каждый из них уникален. Сейчас рассмотрим основные моменты, на которых претыкаются верстальщики:
- Заголовки должны выделяться тегами h2, h3, h4, h5, но никак не B и STRONG.
- При создании меню лучше всего использовать UL список, внутри которого будут лежать LI элементы меню. Этим мы показываем, что ссылки равносильные. Если имеются пункты второй вложенности, соответственно создаем внутри первичного LI элемента еще один UL список.
- Все служебные картинки (иконки, стрелки, пульки…) должны быть прописаны в CSS коде. В HTML, тег IMG должен использоваться только для больших картинок. Большие, понятие растяжимое, скажем так, начиная с превьюшек 100 x 100 и выше.
- Параграф блока текста создается с помощью P тега, но никак не DIV.
- Не использовать атрибуты STYLE внутри HTML тега. Все стили выносить в отдельный CSS файл.
- То же самое по поводу JavaScript.
- Соблюдать иерархию и логику документа. Более важные элементы страницы должны стоять в начале HTML кода, менее в конце. С помощью CSS стилей и DIV блоков, этого достичь не сложно, при любой схеме шаблона.
- Может быть, еще что-то забыл… если да, поправьте меня в комментариях к статье.
Для большей ясности сути вопроса, смотрите схему семантической разметки текста:
Семантическая верстка на практике – примеры HTML + CSS кода
Теперь закрепим все эти принципы семантической верстки на практике. Будем разбирать конкретные ситуации.
Удаляем ненужные div теги
Я видел, что многие люди создают div тег около form или ul. Зачем создавать дополнительный div, который вам не нужен? Вы можете достичь такого же результата, дописав несколько указаний в CSS файле.
Пример 1:
Пример ниже показывает, как вы можете убрать div тег и дописать тот же стиль к form селектору.
Пример 2:
Иногда мы обвертываем контент в div блок, чтобы создать отступы, как показано на примере слева. Но если каждый из блоков имеет заголовок h5, мы можем просто применить margin отступ к h5 селектору и убрать лишний div тег.
Используем семантическую разметку кода
Как упоминалось ранее, вы всегда должны использовать семантическую разметку для HTML кода. Но этого нельзя достичь без CSS файла стилей.
Пример:
Картинка ниже показывает разницу между div разметкой и семантической разметкой без css стилей.
Минимизируем использование div тегов
Может быть, вы видели шаблоны, где div теги везде… они меня бесят. Имели ли вы лишний закрывающий тег /div, или не закрытый div? Я уверен, каждый верстальщик сталкивался с подобной проблемой, когда рядом стоит 3-4 div тега. Чтобы не путаться, нужно минимизировать использование div, так будет проще отслеживать ошибки.
Вместо использования div для создания навигационного пути, можно использовать p тег.
Пример 2:
Пример ниже показывает, как можно использовать CSS, чтобы избавиться от двух лишних div тегов. Результат будет таким же.
Заключение
Пожалуй, это все. Если вы знаете еще техники, обязательно расскажите мне в комментариях. Если имеете вопросы по поводу семантической верстки, также задайте в комментариях ниже.
Дальше: Контент для людей, работает ли он для SEO?
Дискуссия по теме 26 Комментариев
Добавить комментарий
Mikhail 29.07.2019 ? 00:01
По поводу меню не согласен, может со временем всё помегялось, но для одноуровневого не нужно городить ul. А ещё надо заменить p.date на time.
Shaman 01.04.2018 ? 13:42
Посыл правильный, но не хватает просто опыта у автора. Дивы это не зло, где просто понимать куда и сколько реально надо, а вот хлебные крошки оборачивать в p это просто жесть нереальная. p вообще то для абзацев теста нужен, это тоже самое что использовать ul li что бы сделать блоки горизонтальные типа каких нибудь преимуществ на лэндах
Альбатрос 28.02.2015 в 23:47
Не так давно только читал как ребята с пенкой у рта доказывали что разметка должна быть «ДИВной», теперь уже у них семантическая… и не дай бог див увидят, сразу антиСемитом назовут..
Любитель div 10.10.2014 в 02:49
<div> <div> Не самый лучший пример заменять блочный элемент <div> не блочным <p>. А ещё в хороших программах есть такая замечательная подстветка тегов. Запутаться…. ну нереально. </div> </div> <!— end wrap—>
Александр 16.04.2015 в 13:55
Кто Вам сказал, что <p> — это не блочный элемент? Учите мат. часть http://htmlbook.ru/samlayout/blochnaya-verstka/blochnye-elementy
Михаил 29.09.2014 в 13:30
Никогда не закрываю <P> и <LI>. Разница визуально отсутствует. Это тоже семантика?
Тарас 30.09.2014 в 19:07
Вообще то надо закрывать. Когда то это может вылезти боком в каком то из браузеров и их версиях. Ну и семантика само собой.
Надежда 07.06.2013 в 13:26
Возник вопрос. Удаление не нужных тегов div и есть семантика? Почему в крошках лучше использовать p, а не nav к примеру? Может подскажете статью про семантическую верстку с использованием HTML5?
Тарас 19.06.2013 в 22:45
Вот неплохие реккомендации от самого поисковика, собственно для него то все и стараются сверстать корректно: http://help.yandex.ru/webmaster/?id=1122752 И там же есть рубрика вопросов по семантической верстке: http://help.yandex.ru/webmaster/?id=1127476
Надежда 21.06.2013 в 14:28
Там принципы разметки именно для схемы, по этой же теме есть микроформаты. Но там нет ни слова о том, что нужно использовать те или иные теги, атрибуты схемы и классы микроформатов можно располагать в любых элементах. Все еще не понятно, почему же нужно использовать разметку абзаца для навигации. 🙁
Тарас 21.06.2013 в 14:36
Сколько людей, столько и мнений. Используйте div, главное не злоупотребляйте.
Тарас 21.06.2013 в 14:41
Alex 21.05.2013 в 20:32
Резюме. Читайте больше стандартов и меньше «откровений «специалистов», и у вас будет меньше глупых ошибок и стереотипов. P.S. Автор или модератор, объедините по возможности в один комментарий, или хотя бы поменяйте «Заполните правильно все поля» на нечто более информативное.
Alex 21.05.2013 в 20:30
Css код (приблизительно и схематично) #articles_list,#articles_list>li{list-style:none;clear:both;} #articles_list>li{}/*стиль начального текста статьи*/ #articles_list>li>h4>a{}/*стиль заголовка*/ #articles_list>li>div{float:left;background:…;}/*Дата публикации*/ #articles_list>li>div>span{display:block;}/*месяц (вторая строка в дате)*/ #articles_list>li>a{}/*стиль ссылки «читать далее»*/ Один див все-таки нужен. Согласно w3c — стандартизирующей организации web (в частности — html), <div> — контейнер, а <p> — абзац текста, что уместнее для блока даты публикации с точки зрения семантики — решайте сами.
Alex 21.05.2013 в 20:30
А теперь — маленький пример семантичного на мой взгляд кода. Тот же список заголовков статей, который разбирает автор аж в двух примерах. html код <ul> <li> <h4><a href=»…» title=»»>Заголовок статьи</a></h4> <div>21<span>мая</span></div> начало статьи, без параграфов, только бр’ы <a href=»…» title=»»>читать далее</a> </li> <li> <h4><a href=»…» title=»»>Заголовок статьи</a></h4> <div>21<span>мая</span></div> начало статьи, без параграфов, только бр’ы <a href=»…» title=»»>читать далее</a> </li> </ul>
Alex 21.05.2013 в 20:26
Верстку можно считать семантичной, если она удовлетворяет двум требованиям: 1) теги должны использоваться по назначению; 2) страница без стилей не должна принципиально отличаться о страницы со стилями. Есть еще одно требование, имеющее опосредованное отношение к семантичности — верстка должна быть валидной, то есть соответствовать определенному стандарту языка разметки. Тупым избавлением от div семантичности не достичь. Могу привести массу примеров, где div не только желательно, но и необходимо использовать. За подробностями — в почту. Но речь не о том. Автор видимо несколько нечетко представляет себе зачем и для чего уменьшать глубину дерева тегов на странице. Браузеру не настолько принципиально минимальное количество дивов на странице, насколько важна минимальная вложенность элементов. Быстрее всего работают страницы, на которых теги расположены линейно а не иерархически.
Игорь 02.04.2013 в 17:42
Тарас, покажите пожалуйста пример семантической верстки такого блока: шапка, внутри слева логотип. p.s.: У вас комментарии на сайте ограничены всего одним вопросом, нет возможности продолжить тему после вашего ответа.
Тарас 03.04.2013 в 23:45
Вам действительно нужна помощь? или пытаетесь что-то доказать? Более чем уверен, у Вас хватает знаний как это реализовать. Так или иначе у меня нету времени. Извнините.
Игорь 27.03.2013 в 06:47
Удаляем ненужные div теги — Пример 2: И как же вы сделаете уникальный отступ между блоками? Лишний стиль или класс дописывать? Вообще все эти примеры хороши, тогда когда стили CSS пишутся отдельно чуть ли не для каждого элемента. Это стиль верстки когда что вижу то и верстаю по порядку. При такой верстке дублирование стилей неизбежно, а соответственно и превращение CSS файла в помойку. А если страница верстается последовательно начиная от общей структуры, углубляясь внутрь, выделяя общие стили (что значительно сократит CSS и придаст более читаемый вид), то помещать содержимое внутрь div с заранее определенными и прописанными классами — это более удобно и более быстро.
Тарас 27.03.2013 в 17:00
Если Вам нужна простота а не семантика, делайте все через div
Игорь 27.03.2013 в 06:33
Вместо: <div> <a href=»#» title=»»>Главная</a> / О компании </div> использовать: <p> <a href=»#» title=»»>Главная</a> / О компании </p> Только потому что вас «бесит»?
Тарас 27.03.2013 в 16:52
Можно использовать это не значит нужно использовать. Делайте как Вам угодно… повидимому это Вас бесит, потому что привыкли делать по другому. В статье описан вариант, а не единое правило для всех.
antonov 10.02.2013 в 20:54
пригодится спасибо дружище!!!вопрос.если делать небольшой сайт ну к примеру 4-5 страниц без сms,пару картинок влияет ли на скорость загрузки?вернее на сколько.или не стойт мне беспокойтся.Вот хоть убей я с самого начало привык писать так(где ты показываешь»так не рекомендую делать»)Вот так и делаю,придется переделывать.
Тарас 10.02.2013 в 23:24
Смотря какие по весу картинки. Если страница суммарно будет весить 100-400 кб, это нормально, будет грузить быстро.
Артем 04.01.2013 в 19:12
«Удаляем не нужные div теги» «Не нужные» пишется слитно. А за статью спасибо.
Тарас 04.01.2013 в 22:23
Исправил! Спасибо за Ваш вклад в качество сайта!
Добавить комментарий
Семантическая верстка сайта, помогите роботу понять ваш сайт
Чем глубже вы изучаете html и web разработку, тем чаще слышите одно загадочное слово “семантика”. В этой статье мы разгадаем загадку, и расскажем что такое семантическая верстка. Разберем основные теги которые используются для описания семантической структуры.
Что такое семантическая верстка?
Семантическая верстка — это изучение значений слов и выражений. В html ничто иное как написание элементов со смыслом. Семантический элемент четко описывает свое значение как для браузеров, так и для разработчиков.
Давайте взглянем на отличие семантического элемента от обычного.
Например div или span — простые элементы, глядя на них мы не можем понять какого типа контент в них содержится. Это может быть просто текст, картинка, или другие теги.
Теперь семантические form, table, и article здесь уже совсем другое дело. Только прочитав названия мы можем с легкостью понять что внутри этих тегов. Пример верстки обычной и семантической:
<!— обычная блочная верстка —> <div> <img src=»/pictures.jpg» alt=»»> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis.</p> <a href=»»>Читать Далее</a> </div> <!— семантическая верстка —> <article> <img src=»/pictures.jpg» alt=»»> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque facere repellat. Maxime quod dolor exercitationem commodi, perspiciatis laborum, sunt, magni illo ipsam molestiae a ullam amet adipisci et omnis!</p> <a href=»»>Читать Далее</a> </article>
<!— обычная блочная верстка —> <div> <img src=»/pictures.jpg» alt=»»> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis.</p> <a href=»»>Читать Далее</a> </div>
<!— семантическая верстка —> <article> <img src=»/pictures.jpg» alt=»»> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque facere repellat. Maxime quod dolor exercitationem commodi, perspiciatis laborum, sunt, magni illo ipsam molestiae a ullam amet adipisci et omnis!</p> <a href=»»>Читать Далее</a> </article> |
Надеюсь на этом этапе вы уловили разницу между типами тегов. Хочу сразу отметить, что это не единственные теги, их много, а с появлением html5 стало еще больше. Дальше мы познакомимся с ними.
Почему семантическая верстка сайта так важна?
Хорошо написанный CSS может скрыть от глаз пользователя плохую верстку html. Но мы не можем скрыть ее от поисковых роботов, плагинов браузера, читалок и других инструментов и девайсов.
Исходя из этого семантическая верстка является обязательной, если вы хотите чтобы ваш сайт был доступен любым посетителям с разнообразных устройств, и хорошо ранжировался в поисковых системах. Не стоит забывать и о тексте, который тоже должен быть хорошо структурирован, чтобы пользователям было комфортно его читать.
Как реализовать семантическую верстку страницы?
Существует одно единственное правило, при написании мы должны использовать теги которые в конкретном случае могут наиболее точно передать значение и тип контента, поисковым роботам и программам. Если нет подходящих тегов, то используем обычные т.к. div
Мы можем сгруппировать наиболее распространенные и важные элементы на четыри группы:
- Теги структуры документа
- Текстовые теги
- Медиа теги
- Корреляционные теги
Теги структуры документа
В прошлом элемент div был основным с помощью которого создавалась структура html документа, W3C обратили внимание на то, что разработчики использовали в названиях id и class слова header, footer, menu и т.д. Которые описывали смысловое содержимое элемента. Так и появились новые семантические теги в HTML5.
header: Элемент который используется как контейнер для логотипа, названия сайта и меню. Также для определения заголовков, в статьях и т.д.
footer: Используется в основном для описания нижней части страницы, обычно содержит информацию об авторе, контакты, копирайт, дополнительное меню и кнопку которая ведет к верху страницы.
main: Элемент высокого уровня, используется как контейнер для уникального содержимого на странице, которое не повторяется на других страницах сайта.
nav: элемент для создания навигации по сайту. nav обычно находится в header (хедере) и footer (футере), а также может быть использован в aside (сайдбаре) сайта.
section: Описывает разделы документа, должен содержать в себе заголовок h2 — h6
aside: Используется для идентификации контента, который связан с основным контентом на странице. Например, aside элемент может содержать определение термина в статье, рекламные объявления, дополнительную информацию на странице.
article: Это самодостаточный элемент который используется для описания статьи сайта, блога так же публикации на форуме. Может содержать элемент header и footer.
Текстовые теги
Существует множество тегов для работы с текстом на странице, но не все они семантические. К примеру можно использовать span для стилизации текста, но информацию о содержимом браузеру он не передает.
h2, h3, h4, h5, h5 и h6: используются для обозначения заголовков. Самый высокий уровень, или самым главным, заголовком является h2, за ним идут в порядке убывания важности заголовки уровня h3 — h6.
strong: тег придает тексту важности, как правило, отображается полужирным шрифтом.
mark: используется для выделения текста в определенном контексте. Например, он может быть использован, чтобы выделить каждое вхождение ключа поиска на странице результатов поиска.
cite: тегом обычно помечают названия книг, песен, фильмов, тв-передач.
blockquote и q: элементы используются для вставки цитаты из текста другого источника.
time: тег может быть использован, чтобы сказать браузеру, поисковикам и другим устройствам, что конкретная часть контента представляет собой время и дату.
Медиа теги
HTML5 также включает в себя три тега, которые определяют тип медиа контента. Теги подсказывают браузеру как именно отображать данный контент. а так же они придают смысловое значение для контента.
audio: Используется для добавления одного или нескольких аудио на страницу, отображается в виде аудио плеера.
video: подобен аудио тегу, но используется для добавления видео контента в документ.
picture: Элемент picture дает разработчикам возможность более гибко отображать картинку на странице. Часто используется в адаптивной верстке, так как может содержать сразу несколько картинок которые отображаются при определенных медиа условиях.
Корреляционные теги
Некоторые теги используются для создания связи между другими элементами. К примеру тег маркированного списка ul говорит браузеру что элементы li связаны и должны появляться в определенном порядке. Есть еще теги:
ol: тег нумерованного списка, аналогичен с тегом ul
figure: используется для группировки такого контента как картинки, графики, может содержать заголовок figcaption.
address: описывает контактную информацию на странице. И связывает ее с автором статьи или страницы.
Если вы новенький в html то попробуйте применить все эти теги для создания семантической верстки страницы уже в следующем проекте. Не используйте элементы если не уверены нужен ли он там или нет, использование правильного тега очень важный момент. Лучше потратьте немного времени для глубокого его изучения. Это даст свои плоды в будущем.
comments powered by HyperCommentsпереход к семантической разметке — главная цель HTML / Habr
Первоначально технология HTML (hypertex markup language) была предназначена для описания смысловой структуры веб-документа, то есть для определения частей текста, в которых находятся различные по типу и содержанию части страницы как например заголовки, абзацы, сноски, иллюстрации, гиперссылки и так далее. Говоря академическим языком, HTML создан для семантической разметки документа.Напомню, что семантика — это раздел языкознания изучающий отношения и способы выделения смысловых структур в речи. К примеру определение членов предолжения (подлежащее, сказуемое, дополнение, определение), изучение отношений и заложенного в них смысла (что является субъектом/объектом действия, а что уточняет их описание и т.д.).
До HTML задача семантической разметки документов решалась с помощью:
- TeX (технологии 1978го года) для макетирования академических публикаций
- SGML (технологии 1968го года) для более широкого спектра задач. SGML очень похож на своего потомка XML за исключением ряда правил, которые в некоторых случаях заметно усложняют чтение разметки, как например разрешение не ставить угловые скобки в тэгах.
Другими словами, если TeX был адаптирован строго под нужды макетирования университетских докладов, научных работ и тому подобного, SGML позволял создавать структуры информации подобные Реляционным Базам Данных, то есть реализоваывать ER-модели (entity-relationship).
(пример ER-модели)
(пример ER-отношений)
ER-модель — способ определения сущностей в базе данных и отношений между ними. Примеры ER-отношений: один к одному, один ко многим, многие ко многим, отношения ассоциации (связь сущностей), аггрегации (обощения и включения одной сущности в другую) и так далее.
Тим Бернерс Лии создавая Web в конце 80ых, взяв за основу SGML, упростил синтаксис, создал перечень предопределенных тэгов для макетирования веб-страницы, правила использования которых задал с помощью DTD (технология из семейства SGML которая регламентирует порядок использования тэгов — то есть перечень разрешенных атрибутов, вложенных тэгов, разрешение на текстовый контент и так далее) и мы получили HTML 1.0
Таким образом HTML основанный на SGML первоначально был призван для описания структуры документа в контексте ER-отношений ее частей, то есть определения структуры и содержания документа в терминах сходных к базам данных.
Теперь представьте ситуацию, когда в прикладной программе для того чтоб подвинуть GUI-кнопку на несколько пикселей в какую-либо сторону Вам приходится редактировать структуру базы данных. Парадоксально, но в соверменном вебе это в порядке вещей — очень часто для того чтоб визуально подвинуть какой-либо элемент (GUI-кнопку) приходится изменять HTML-структуру (базу данных)!
Развитию такой ситуации послужила очень острая конкуренция браузеров начавшаяся еще в 90ых, во время которой HTML расширился большим количеством тэгов предназначенных для создания исключительно визуальных эффектов, а не для выделения семантических единиц в структуре веб-документа. Объединение разметки смысловых частей документа и их внешнего оформления в одном месте послужило тому, что современный Интернет оказался совершенно не предназначеным для пользователей с ограниченными возможностями, для которых визуальное оформление веб-сайтов создает существенные препятствия для чтения информации. Более того отображение веб-страниц на устройствах с нестандартными размерами экрана (смартфоны) вместо переключения таблицы стилей требует вдобавок переработки всей структуры веб-документа, что очень неудобно.
К счастью, новые веб-стандарты двигают HTML5 в сторону грамотного отделения структуры веб-сайта от способа его визуальной стилизации, но для верного использования таких методов необходимо изменить само восприятие верстки веб-страниц. Ведь если раньше верстальщик в первую очередь ориентировался на присланный макет от дизайнера, то теперь важно в первую очередь опираться на информационную структуру страницы, ее семантические части и их отношения. И только после, в качестве второго шага, смотреть как можно привязать к уже созданной структуре веб-страницы визуальные элементы и динамический функционал.
Резюмируя — заданная HTML’ом DOM-модель веб-страницы должна восприниматься в качестве базы данных с содрежанием и структурой веб-документа и ни в коем случае не должна меняться в зависимости от изменения стилистических элементов на странице.
Расставив все элементарные точки над «семантикой» / Habr
Как сказал Robots: « а если без шуток, …, дилетантам лучше читать и учиться, а создание топиков оставить профессионалам.»
В ходе многих статей, которые в последствии назывались «непрофессиональными», расставляю для будущих писателей все точки над… Дабы больше не возникало нареканий в вашу сторону.
Не раз боролся Delka (Зенич Игорь) за семантичность кода, который пишут в статьях и который в последствии может использоваться как некий учебник для начинающих, тем самым осуществляя нарастание ошибок.
В этой статье я объединил (скомпилировал) уже изложенные мысли (!) многих людей, но почему-то так и не донесенные до большинства. (www.flack.ru, www.pepelsbey.net и некоторые другие)
(все дельные дополнения коментариями будут включены)
Оригинал статьи на временно.нет
Часть 1. Теория.
Семантика — наука о понимании определённых знаков, последовательностей символов и других условных обозначений;
В данный момент мы говорим о семантике в HTML-верстке. Поэтому заведомо не будем проводить все её связи с лингвистикой.
Прежде всего, семантика в вёрстке — это совокупность смысловых отношений, возникающих в документе. Однако для существования таких отношений необходим документ, который возникает благодаря внедрению HTML-разметки в простой текст.
Семантика невозможна без валидности, несмотря на явную разность этих двух понятий. Вы можете сверстать валидный сайт, но без структурной разметки это будет всего лишь популизм.
Так же семантика невозможна без внедрения в код микроформатов.
Микроформаты — это способ внедрения специфических семантических данных в HTML.
Но, стоп, это не все. Стоит заведомо сказать, что семантика как таковая делится на три раздела, которые все три стоит учитывать:
- Правильное применение HTML-элементов;
- Именование элементов;
- Комбинация именованных элементов;
Вывод части: Поэтому, для тех, кто в танке, давайте прежде чем выкладывать свои коды, все таки думать.
Часть 2. Перед практикой.
То, с чего должна начинаться верстка, это с указания правильного DOCTYPE`а.
Согласно спецификациям HTML и XHTML тег DOCTYPE (что означает «объявление типа документа») сообщает валидатору, какую именно версию (X)HTML вы используете в своей странице. Этот тег должен всегда находиться в первой строке каждой страницы. Тег DOCTYPE — ключевой компонент web-страниц, претендующих на соответствие стандартам: без него ваш код и CSS не пройдут проверку валидатором.
Все подробности уже давно бережно описаны Джеффри Зельдмана в переводе Макса Россомахина «Почему так важен DOCTYPE»
Часть 3. The «начало»
Так как мы хотим добиться не только валидной семантическй разметки, но еще и кроссбраузерной, я рекомендую использовать «сброс стилей». Для этого воспользуемся статьей Эрика Мейера.
И так. Что бы все таки окончательно убедиться для чего используются те или иные элементы (если вы не уверены 😉 необходимо обратиться к спецификации HTML 4.01.
Отрывок спецификации о элементе ADDRESS:
The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document.
В добавлении: POSH — Plain Old Semantic HTML – (использование HTML-элементов по их назначению) — «старый добрый семантический HTML».
Часть 4. Учимся думать.
Ну что ж. Давайте приведем пример. Самое просто что есть это простой неупорядоченный список. Чаще всего это меню сайта. Как можно его сверстать, держа в голове «верстка дивами, именование элементов …»
Пункт 1<br>
Пункт 2<br>
… <br>Теперь давайте посмотрим спецификацию и выберем что же наиболее нам подходит для семантически правильного решения данного вопроса.
Мы выбираем неупорядоченный список
c элементами списка внутри, а визуальное форматирование — в CSS. Почему мы так решили? Ответ вполне очевиден: в исходном коде у нас есть корневой группирующий элемент, неупорядоченный список пунктов, элементы визуального форматирования.Немного усложним ситуацию и применим все 3 составляющие семантики:
В качестве примера возьмем описанный нами элемент ADDRESS.
Иван Васильев, [email protected]
Рассмотрим подробнее, что у нас есть. Есть персона, ее стоит озаглавить, и есть явный адрес. Следовательно, правильно разместим информацию с помощью HTML-элементов:
[email protected]
Далее следую пункту два, правильно назовем классы всех элементов:
[email protected]
Чем дальше, тем сложнее. Вспомним (ну если не вспомним, то прочитаем) о микроформате hCard. Используем корневой класс, указание имени, фамилии и электронной почты.
<h2 class=”fn n”>
Иван
Васильев
Итак мы получили полноценную визитную карточку. И все таки: hCard — это клон старого-доброго vCard, формата электронной визитки, в терминах XHTML. Внедряется бесконечно просто: создаётся (или изменяется текущий) элемент (обычно div или span) с именем класса vcard (значением аттрибута). В нём создаются дочерние элементы с именами классов, соответствующие полям vCard/hCard.
На сайте Sphinx.net.ru достаточно подробно описаны другие аспекты введения в микроформаты.Часть 5. Не забудем братьев меньших. IE и его причуды.
Думать, научились, начинаем действовать, но вот проблема, в IE все не так как хотелось. Думаем дальше. Есть два выхода и этой ситуации:
- «star html hack»;
- conditional comments;
Первое - «star html hack». В кратце:
#element {
position:relative; /* Основное правило для всеx браузеров */
}
* HTML #element {
position:static; /* Переопределение правила для IE младше седьмой версии */
}
Подробности уже давно ждут вас. Но не стоит забывать, что такие хаки для браузера Internet Explorer засоряют код, подгружаемый и всеми остальными браузерами.Второе - conditional comments. Или проще говоря обычное подключение CSS-файлов, но видимое только IE.
/>
< !--[if IE] >/>< ![endif]-- >
Подробности там же.Часть 6. ID и class.
В начале давайте поймем что такое ID, что такое class. ID — это имя уникального элемента, class - это общее имя множества элементов и, соответственно, их общая семантическая роль.Поэтому, удобнее ID использовать для описания структурной разметки.
…
…
…
При именовании важно помнить о множественных классах для одного элемента. Например:
Яндекс
Отсюда становится ясно следующее: что эта ссылка ведёт на сайт (url) организации (org) под названием (fn) «Яндекс».Таким образом, применяя id для структурной разметки, мы создаём некие пространства имён, благодаря которым мы можем адресовать применение стилей для элементов с одинаковыми смысловыми ролями и, соответственно, именами классов.
Семантически верное именование HTML-элементов при помощи атрибутов id и class, помимо самой семантики, привносит упорядоченность не только в сам документ, а ещё и в процесс разработки.
Часть 7. Подробнее о микроформатах и комбинации именованных элементов.
Пример использования, написанный Вадимом Макеевым:
Разметка имени пользователя и маленькой иконки рядом, который используется в сервисе блогов Livejournal.com. Вот, каким образом это выглядит сейчас:
<span lj:user='kuteev'>
<img src='#' alt='[info]'
style='vertical-align: bottom;
border: 0; padding-right: 1px;' />kuteev
Полезного:
- Юзернейм не переносится, ибо white-space: nowrap
- Головастика выровняли по вертикали, отключили у него рамку, отступ и задали размеры —
- Кутеев, оказывается, полужирный, поскольку
kuteev
Но что можно сделать с помощью микроформата hCard:
<a href="#" target="_blank"
class="ico" title="Профиль"><a href="#" target="_blank"
class="fn nickname url" title="Журнал">
kuteev
Что же нового мы теперь можем узнать:
- Мы имеем дело с мини-визиткой Кутеева, потому как class=«vcard»
- Ссылка с головастика ведёт в профиль — мы уточнили title=«Профиль»
- Никнейм Кутеева — kuteev, мы видим class=«fn nickname»
- Ссылка с никнейма ведёт на сайт Кутеева — class=«nickname url», а точнее — в журнал, — мы уточнили title=«Журнал»
Соответственно, вся информация из приведённых примеров становится доступна поисковым машинам и плагинам ваших браузеров, поскольку её разметка формализована в спецификации микроформата hCard.
Часть 9. И так!
Давайте ка все таки прочитаем оригиналы статей, выучим наизусть и не будем больше заниматься глупостями:
Продвинутая семантика и доступность | WebReference
Семантика и доступность — это естественные части HTML по замыслу, однако они не используется в полной мере, если не применяются правильно. Знание, как писать семантический и доступный код правильно начинается с понимания того, как семантика и доступность работают и как пользователи и машины их интерпретируют. Писать семантический и доступный код невероятно сложно и это может занять много времени. Однако в долгосрочной перспективе преимущества побеждают.
Одна из наиболее важных частей, о которой следует помнить при написании семантического и доступного кода — это сделать всё возможное, чтобы использовать стандартный язык разметки. Приложите усилия, чтобы по возможности писать чистый код и гордитесь своей работой. Вообще говоря, не используйте бессмысленный элемент там, где другой элемент может придать более семантический смысл, к примеру, использование <div> там, где <h2> подходит лучше. Используйте семантические элементы и атрибуты, а также микроданные и WAI-ARIA, чтобы расширить значение вашего кода.
Кроме того, будьте адвокатом семантики и доступности. Расскажите, почему вы написали определённый код и дайте обоснование, почему некоторые модули содержимого размечены таким образом. Обозначьте цели и задачи в вашем коде и объясните, как эти цели и задачи выполняются. Практика написания семантического и доступного кода растёт, однако внедрение в целом ещё не завершено. Будьте адвокатом для кода, который вы пишете.
Мотивация для семантики
Иногда можно спросить, реально ли семантика изменит ситуацию. Вы можете услышать, что она замедляет разработку, плохо поддерживается или даже что она своевольна. Хотя это иногда и так, вам по-прежнему необходимо сохранить целостность и продолжить писать по возможности лучший код, потому что семантика вкладывает больший смысл в написании кода.
Важным фактом является то, что семантика в значительной степени полезна всем. Для начинающих семантика наделяет содержимое однозначным смыслом. Семантика придаёт содержимому устойчивую структуру и значение, а также в угоду доступности предоставляет более качественный пользовательский интерфейс и дополнительную информацию для вспомогательных технологий. Поиск и глобализация в большей степени связаны с семантикой, что позволяет проще обслуживать контент на международном уровне и делает его более дружественным поисковой системе. Если это недостаточно, семантика также способствует совместимости операционных систем, что позволяет обмениваться и пользоваться информацией на различных платформах и устройствах.
Можно с уверенностью сказать, что семантика важна и она здесь надолго. Если кратко подытожить, семантика обеспечивает:
- однозначный смысл для содержимого;
- доступность;
- поиск и глобализацию;
- совместимость.
Структурная семантика
В руководстве для начинающих мы обсудили использование структурной семантики, в частности, применение элементов <header>, <nav>, <article>, <section>, <aside> и <footer>. Эти элементы обеспечивают дополнительный фоновый контекст для их содержимого, сообщая своё основное значение браузерам и другим устройствам. Это важно, так как они предлагают лучший способ наметить структуру страницы и это более значимое решение чем <div>.
Скрытие содержимого
Время от времени вы пожелаете скрыть блок содержимого на странице, возможно, показывая или скрывая элемент в зависимости от статуса пользователя. К примеру, сообщение об успешном выполнении скрывается от пользователя, пока он не выполнит желаемое действие. Чаще всего это делается с помощью записи display: none. Хотя это действительно работает, но семантически некорректно.
Лучшим вариантом является применение логического атрибута hidden, который является глобальным атрибутом, доступным для всех элементов. Функционально он выполняется так же, как декларация CSS, но семантически представляет собой элемент, который должен быть скрыт или до поры до времени проигнорирован. Экранные читалки и другие устройства распознают атрибут, временно пропуская элемент, чего они не могут сделать с декларацией CSS.
<!-- Хорошо -->
<div hidden>...</div>
<!-- Не хорошо -->
<div>...</div>Представьте себе, что слепой пользователь пытается заполнить форму, и первая часть содержимого, ещё до заполнения формы — это сообщение об успешном выполнении. Это плохой пользовательский опыт и он может быть легко исправлен с помощью надлежащей семантики.
Текстовая семантика
Большая часть содержимого в Интернете живет в тексте и мы в первую очередь пролистываем Интернет в поисках этого содержимого. Использование правильной семантической разметки для текста помогает пользователям проще находить то, что им нужно.
Жирный текст
Есть несколько способов, как сделать текст жирным, в том числе несколько элементов и стилевое свойство font-weight. Два основных элементов, используемых в данном случае, включают в себя <strong> и <b>. Хотя эти два элемента имеют одинаковое представление, у них совершенно разные семантические значения.
Элемент <strong> описывает текст, который имеет важное значение. С другой стороны, элемент <b> определяет текст, который должен быть стилистически выделен без важности. Вообще говоря, элемент <b> следует использовать исключительно в качестве щипцов для завивки, чтобы изменить представление элемента, тогда как элемент <strong> должен быть использован для идентификации существенно важного текста.
<!-- Важное значение -->
<strong>Внимание:</strong> падающие камни.
<!-- Стилистическое выделение -->
Для этого рецепта понадобятся <b>бекон</b> и <b>майонез</b>.Демонстрация жирного текста
Курсивный текст
Курсивный текст работает в той же области, что и жирный текст, где мы можем использовать несколько элементов или стилевое свойство font-style для достижения желаемого представления. Для курсивного текста наиболее часто используются два элемента — <em> и <i>. Опять же, у них одинаковое представление, но совершенно разные семантические значения.
Элемент <em> акцентирует сильное выделение на тексте, а элемент <i> определяет текст, который будет выражен альтернативным голосом или тоном. Использование элемента <em> действительно ведёт к выделению текста с добавлением важности. С другой стороны, элемент <i> в основном используется в диалоге или прозе, выделяя текст без какого-либо добавления акцента или важности.
<!-- Сильное выделение -->
Я <em>люблю</em> Чикаго!
<!-- Альтернативный голос или тон -->
Имя <i>Шэй</i> означает подарок.Демонстрация курсивного текста
Использование <i> для иконок
В последнее время наблюдается небольшое движение фронтенд-разработчиков к использованию элемента <i> для включения иконок на странице, в частности, как это видно в Bootstrap. Элемент <i> используется в качестве хука, а затем его класс определяет, какую иконку фонового изображения применить к элементу. В зависимости от того, насколько близко вы хотите следовать за семантикой, это может быть приемлемой практикой или нет.
Подчёркивание текста
В продолжении шаблона, в котором у нескольких элементов одинаковое представление, подчёркнутый текст ничем от них не отличается. Есть разные элементы, которые мы можем использовать, а также стилевое свойство text-decoration. В нашем случае два основных элемента, применяемых для подчёркивание текста — это <ins> и <u>.
Элемент <ins> используется для идентификации текста, который был недавно добавлен к документу, а элемент <u> просто указывает на невнятное произношение.
Для более семантического кода, элемент <ins> может быть использован с атрибутами cite и datetime. Атрибут datetime указывает, когда содержимое было добавлено в документ, а атрибут cite предлагает машиночитаемый исходник, передающий дополнительную ссылку на, возможно, документацию или запрос билета.
Элемент <u> обычно используется в качестве текстовой метки для правильного имени, часто на другом языке или указывает на орфографические ошибки.
Подчёркнутый текст требует внимательности, так как его можно спутать с гиперссылкой. По умолчанию гиперссылки подчёркнуты и это стало стандартной практикой дизайна. Подчёркнутый текст, который не является гиперссылкой, может запутать пользователей и немного разочаровать их. Используйте подчёркивание с осторожностью.
<!-- Добавлено в документ -->
<ins cite="http://learn.shayhowe.com" datetime="2012-07-01">
Обновлено: Этот сайт теперь содержит продвинутое руководство.
</ins>
<!-- Невнятное произношение -->
<u>Urushihara Yuuji</u> выиграл <u>Sasuke 27</u>.Демонстрация подчёркнутого текста
Зачёркнутый текст
Зачёркнутый текст следует тому же шаблону, что и раньше, где могут быть использованы различные элементы, так и стилевое свойство text-decoration. Это свойство применяется наиболее часто, а также элементы <del> и <s>.
Элемент <del> используется для указания, что текст удалён или перемещён из документа. Как и в случае с элементом <ins>, он может быть использован с атрибутами cite и datetime. Каждый из них сохранил прежнее смысловое значение — cite указывает на ресурс, на котором объясняются изменения, а datetime показывает, когда содержимое было удалено из документа.
Элемент <s> определяет текст, который уже неточный или неактуальный.
<!-- Удалено из документа -->
Я заядлый велосипедист, <del cite="http://shayhowe.com" datetime="2012-07-01">скейтбордист</del> и дизайнер.
<!-- Неточный или неактуальный -->
<s>$24.99</s> $19.99Демонстрация зачёркнутого текста
Выделенный текст
Чтобы выделить текст в справочных целях следует использовать элемент <mark>. Добавленный в HTML5 элемент <mark> обеспечивает чистый, семантический способ определить текст специально для справочных целей, без необходимости использовать несемантические текстовые элементы.
<!-- Выделено для справочных целей -->
Результаты поиска для <mark>'чикаго'</mark>.Демонстрация выделенного текста
Аббревиатуры
Аббревиатуры — это сокращённая форма фразы, может быть семантически размечена в HTML с помощью элемента <abbr>. Элемент <abbr> должен использоваться вместе с атрибутом title, который включает в себя полное значение аббревиатуры. Первоначально применялся элемент <acronym>, чтобы отличать аббревиатуры от сокращений, но с тех пор является устаревшим и не должен использоваться.
<abbr title="HyperText Markup Language">HTML</abbr>
<abbr title="Cascading Style Sheets">CSS</abbr>Демонстрация аббревиатур
Верхний и нижний индексы
Верхние и нижние индексы могут быть размечены с помощью элементов <sup> и <sub>, соответственно. Важно отметить, что эти элементы должны быть зарезервированы для типографских соглашений, а не для презентационных задач.
<!-- Нижний индекс -->
H<sub>2</sub>O
<!-- Верхний индекс -->
1<sup>ое</sup> местоДемонстрация верхнего и нижнего индексов
<meter> и <progress>
Чтобы оценить масштаб или указать прогресс должны использоваться элементы <meter> и <progress>. Элемент <meter> применяется для измерения фиксированного значения, которое не меняется со временем, в то время как элемент <progress> показывает прогресс с увеличением величины.
Элемент <meter> может быть использован с атрибутами min, max, low, high, optimum и value. Атрибуты min и max устанавливают нижние и верхние границы диапазона, тогда как атрибут value устанавливает точное измеренное значение. Атрибуты low и high определяют, что следует считать нижней и верхней частью диапазона, в то время как значение optimum определяет наиболее выгодную часть диапазона, которая может находиться в нижней или верхней части.
Элемент <progress> показывает прогресс, а не фиксированную величину. Он, в частности, представляет завершение задачи, либо сколько осталось до завершения или что было завершено до сих пор. Есть два атрибута, которые могут быть применены к элементу — value и max. Атрибут value указывает на то, где в настоящее время находится прогресс, а атрибут max указывает на то, когда прогресс будет достигнут.
<!-- Счётчик -->
<meter value="7" max="10">7 звёзд</meter>
<meter value="47" min="0" max="105" low="5" high="65" optimum="45">Движение автомобиля, миль/час.</meter>
<!-- Прогресс -->
Завершено на <progress value="50" max="100">50%</progress>.
<progress value="90" min="0" max="100">Держитесь, осталось чуть-чуть.</progress>Демонстрация <meter> и <progress>
Время и адрес
Представление времени и адреса в HTML может быть выполнено с помощью элементов <time> и <address>, соответственно. Элемент <time> может быть использован с атрибутом datetime или без него, в зависимости от того, как отформатирован текст внутри элемента. Если содержимое отформатировано с правильной датой и временем, то атрибут datetime может быть опущен. Кроме того, если время представляет собой дату или время публикации, то должен быть задействован логический атрибут pubdate.
Элемент <address> может быть использован для хранения любой контактной информации, в том числе почтового адреса, а также веб-сайта или адреса электронной почты. Он не должен включать в себя любую дополнительную информацию, кроме контактной информации. Другое содержимое должно размещаться за пределами элемента <address>.
<!-- Время -->
<time>2011-08-24</time>
<time datetime="2011-08-24" pubdate>24 августа 2011</time>
<time datetime="15:00">15:00</time>
<time datetime="2011-08-24T15:00">24 августа 2011 в 15:00</time>
<!-- Адрес -->
<address>
<strong>Шэй Хоу</strong><br>
<a href="http://learn.shayhowe.com">http://learn.shayhowe.com</a><br>
<a href="mailto:[email protected]">[email protected]</a><br>
600 W. Chicago Ave.<br>
Suite 620<br>
Chicago, IL 60654<br>
USA
</address>Демонстрация времени и адреса
<pre> и <code>
Представление фрагментов кода или примеров на странице может быть выполнено с помощью элементов <code> или <pre> или их комбинации. Элемент <code> обычно используется для представления фрагмента кода и по умолчанию отображается моноширинным шрифтом. Элемент <code> является строчным элементом и может быть использован в абзацах текста или других блочных и строчных элементах.
Для больших блоков кода может быть использован элемент <pre> в сочетании с элементом <code>. Элемент <pre> представляет собой предварительно отформатированный текст и будет отображать текст точно так, как он набирался, с учётом пробелов. Вложение элемента <code> в элемент <pre> семантически определяет большие фрагменты кода, отображаемые в виде блока, с учётом пробелов.
<!-- Строчный пример кода -->
Используйте элемент <code>article</code>.
<!-- Большой блочный фрагмент кода -->
<pre><code>body {
color: #666;
font: 14px/20px Arial, sans-serif;
}</code></pre>Демонстрация <pre> и <code>
Строки и переносы слов
Время от времени вы можете захотеть включить перенос в строке текста, в этом случае может быть использован элемент <br>. У этого элемента нет закрывающего тега, только открывающий. В XHTML элемент <br> является самозакрывающимся и включает обратную черту — <br />.
Переносы строк не должны использоваться для тематической группировки содержимого. Абзацы или другие элементы подходят для этого лучше. Переносы строк специально используются там, где они выступают как часть содержимого, например, в адресах и стихах.
В дополнение к переносу строк, вы можете также воспользоваться возможностью переносить слова через элемент <wbr>. Применение элемента <wbr> в середине слова гарантирует, что, если слово нужно разбить на две строки, это будет сделано в разборчивой форме.
<!-- Перенос строки -->
600 W. Chicago Ave.<br>
Chicago, IL 60654<br>
USA
<!-- Перенос слова -->
http://shay<wbr>howe.com Демонстрация переноса строк и слов
Побочные замечания
Первоначально элемент <small> использовался для визуализации текста путём уменьшения размера шрифта на единицу, по сравнению со шрифтом по умолчанию, чисто для презентационных целей. Как мы знаем, презентации и стиль должны жить только в CSS, а не в HTML. В HTML5 элемент <small> сохранил отображение меньшим размером шрифта, однако семантически переопределён в качестве побочного замечания или мелкой надписи. Он часто включает в себя информацию об авторских правах или юридические данные.
<!-- Побочные замечания или мелкая надпись -->
<small>© 2012 Шэй Хоу</small>Демонстрация побочных замечаний
Цитаты
Руководство для начинающих обсуждает цитаты и когда использовать соответствующие элементы <cite>, <q> или <blockquote>. В качестве быстрого напоминания, элемент <cite> ссылается на название работы, элемент <q> определяет диалог или прозу, а элемент <blockquote> используется для вывода больших цитат, обычно из внешних источников.
Атрибуты гиперссылок
Руководство для начинающих также описывает гиперссылки и их различное поведение. Что, однако, не описано, так это некоторые семантические преимущества гиперссылок, в частности, с помощью атрибутов download и rel.
Атрибут download
Атрибут download говорит браузеру незамедлительно скачать файл, а не использовать поведение по умолчанию для перехода к файлу. В качестве примера, если ссылка с атрибутом href указывает на изображение, браузер предложит пользователю скачать изображение, вместо того, чтобы открыть изображение в браузере.
Атрибут download может служить в качестве логического атрибута, загружая файл как есть, или он может содержать значение, которое станет именем файла после загрузки. Использование конкретного значения позволяет называть файл на вашем сервере как вы пожелаете, в то же время предоставляя пользователям значимое название.
<!-- Логический -->
<a href="twitter-logo.png" download>Twitter Logo</a>
<!-- Со значением -->
<a href="twitter-logo.png" download="Logo">Twitter Logo</a>Демонстрация атрибута download
Атрибут rel
Для любых гиперссылок с атрибутом href вы можете также включать атрибут rel. Этот атрибут определяет отношение между текущим документом и документом, на который ведёт ссылка. Например, для ссылки на страницу с авторскими правами значение атрибута rel должно быть copyright.
<a href="legal.html" rel="copyright">Правила использования</a>
<a href="toc.html" rel="contents">Содержание</a>Некоторые популярные значения атрибута rel включают в себя:
- alternate
- author
- bookmark
- help
- license
- next
- nofollow
- noreferrer
- prefetch
- prev
- search
- tag
Микроданные
Микроданные — это расширение HTML с вложенными группами пар имя-значение, которые позволяют машинам, в том числе браузерам и поисковым системам, собирать дополнительную семантику и информацию для структурированного содержимого. Добавление микроданных на свой сайт происходит с помощью заранее заданных атрибутов и значений. Эти атрибуты и значения затем будут интерпретированы и расширены, как и предполагалось. В настоящее время наиболее популярные виды использования микроданных находятся в контактной информации и событиях календаря, однако есть модели для продуктов, обзоров и др.
Одним из примеров работы микроданных является Google, где микроданные интерпретируется и используется в результатах поиска для отображения более релевантных данных. Часто выполнение поиска для местоположения компании даёт адрес и последующую контактную информацию в результатах. Скорее всего, эта информация будет вытащена из микроданных, написанных на существующем сайте.
Рис. 10.01. Google использует микроданные для определения местоположения компании, контактной информации, времени работы, цен, оценок и др.
Микроданные, микроформаты и RDFa
На самом деле есть несколько богатых стандартов структурирования данных, в том числе микроданные, микроформаты и RDFa. Все они имеют свои плюсы и минусы и все они ещё жизнеспособны на практике.
Микроданные — это рекомендуемый формат от Google и других поисковых систем, а также часть спецификации HTML5. Микроданные позаимствовали находки из микроформатов и RDFa, основываются на окружающем дизайне, таким образом, стремятся быть надёжным выбором и описаны здесь. Однако рекомендуем вам проделать собственные исследования, проверить пульс сообщества, найти то, что лучше всего работает в вашей ситуации и применять это. Использовать один из этих стандартов существенно лучше, чем не использовать. Найдите то, что даст максимальную пользу вашим пользователям.
Изложение микроданных
Микроданные определяется с помощью трёх основных атрибутов — itemscope, itemtype и itemprop.
Логический атрибут itemscope объявляет область каждого элемента микроданных. Добавьте этот атрибут к родительскому элементу, в котором должна находиться вся информация микроданных, относящаяся к этому элементу.
После того, как вы определили область, добавьте атрибут itemtype, чтобы указать, какой словарь микроданных следует использовать. Вообще говоря, некоторые наиболее популярные типы микроданных изложены на Schema.org. Есть, однако, и другие сайты, которые устанавливают дополнительные и разные типы элементов. Вы также можете написать свой собственный тип элементов, если есть такая необходимость.
<section itemscope itemtype="http://schema.org/Person">
...
</section>После того, как область и тип элемента были определены, могут быть установлены свойства. Эти свойства обозначены различными элементами, которые включают атрибут itemprop. Значение этого атрибута определяет, на что указывает свойство, а содержимое внутри самого элемента обычно задаёт значение свойства.
<section itemscope itemtype="http://schema.org/Person">
<h2 itemprop="name">Шэй Хоу</h2>
</section>Некоторые элементы, тем не менее, не получают значение itemprop из содержимого внутри элемента. Вместо этого, их значение определяется из значения другого атрибута элемента. В таблице ниже приведены эти единовременные элементы и какой атрибут используется для значения их свойства.
| Элемент | Значение |
|---|---|
| <meta> | Атрибут content |
| <audio>, <embed>, <iframe>, <img>, <source>, <video> | Атрибут src |
| <a>, <area>, <link> | Атрибут href |
| <object> | Атрибут data |
| <time> | Атрибут datetime |
Микроданные человека
При обращении к человеку должна использоваться библиотека микроданных Person. Ниже приведён пример того, как может выглядеть разметка микроданных человека. Пожалуйста, обратите внимание, что внутри элемента Person используется элемент PostalAddress для почтового адреса. Кроме того, пожалуйста, обратите внимание на различные свойства элемента и соответствующие им значения.
<section itemscope itemtype="http://schema.org/Person">
<strong itemprop="name">Шэй Хоу</strong>
<img src="shay.jpg" itemprop="image" alt="Шэй Хоу">
<div itemprop="jobTitle">Дизайнер и фронтенд-разработчик</div>
<a href="http://www.shayhowe.com" itemprop="url">shayhowe.com</a>
<div itemprop="telephone">(555) 123-4567</div>
<a href="mailto:[email protected]" itemprop="email">[email protected]</a>
<address itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">600 W. Chicago Ave.</span>
<span itemprop="addressLocality">Chicago</span>,
<abbr itemprop="addressRegion" title="Illinois">IL</abbr>
<span itemprop="postalCode">60654</span>
</address>
</section>Микроданные человека
Пожалуйста, имейте в виду, что этот код для отдельного человека. Если вы хотите указать организацию, то должна использоваться конкретная библиотека микроданных Organization.
Микроданные событий
Микроданные событий очень похожи на микроданные человека, однако используют вместо этого библиотеку микроданных Event. Общие свойства похожи между ними и могут быть определены, как некоторые вложенные типы элементов.
<section itemscope itemtype="http://schema.org/Event">
<a itemprop="url" href="#">
<span itemprop="name">Styles Conference</span>
</a>
<time itemprop="startDate" datetime="2014-08-24T09:00">Воскресенье, 24 августа 2014 в 9:00</time>
<div itemprop="location" itemscope itemtype="http://schema.org/Place">
<a itemprop="url" href="http://www.thechicagotheatre.com/">Chicago Theatre</a>
<address itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<div itemprop="streetAddress">175 N. State St.</div>
<span itemprop="addressLocality">Chicago</span>,
<abbr itemprop="addressRegion" title="Illinois">IL</abbr>
<span itemprop="postalCode">60601</span>
</address>
</div>
</section>Микроданные событий
Микроданные предлагают много способов дальнейшего расширения содержимого страницы. Мы лишь коснулись их поверхностно. Более подробную информацию о микроданных можно найти в книге Погружение в HTML5 и на сайте WHATWG.
WAI-ARIA
WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications) является спецификацией, которая помогает сделать веб-страницы и приложения более доступными для людей с ограниченными возможностями. В частности, WAI-ARIA помогает определить роли (что блоки содержимого делают), состояния (как блоки содержимого настроены), а также дополнительные свойства для поддержки вспомогательных технологий.
Роли
Установка ролей WAI-ARIA осуществляется с помощью атрибута role. Эти роли затем указывают, что определённые элементы и блоки содержимого делают на странице.
<header role="banner">...</header>Роли WAI-ARIA делятся на четыре различные категории: абстрактные, виджеты, структура документа и ориентиры. В этом уроке мы сосредоточимся в основном на структуре документа и ориентирах. Роль структуры документа определяет организационную структуру содержимого на странице, в то время как ориентиры определяют регионы страницы. Конкретные значения ролей для каждой из этих категорий показаны ниже.
Роли структуры документа
- article
- columnheader
- definition
- directory
- document
- group
- heading
- img
- list
- listitem
- math
- note
- presentation
- region
- row
- rowheader
- separator
- toolbar
Ориентиры
- application
- banner
- complementary
- contentinfo
- form
- main
- navigation
- search
HTML5 представил несколько новых структурных элементов, которые обычно соответствуют ролям структуры документа и ориентирам. Как именно эти роли совпадают в отношении конкретных элементов можно увидеть ниже. Пожалуйста, обратите внимание, элементы <header> и <footer> не подразумевают роль и допустимые роли для этих элементов могут быть использованы на странице только один раз. Тем не менее, если у вас есть несколько элементов <header> и <footer> на странице, должны быть применены роли banner и contentinfo к элементам, непосредственно связанных с документом с точки зрения верхнего уровня, а не к элементам, вложенных в других областях структуры документа.
| Элемент | Предполагаемая роль | Допустимые роли |
|---|---|---|
| <article> | article | application, article, document или main |
| <aside> | complementary | complementary, note или search |
| <footer> | — | contentinfo (один раз на страницу) |
| <header> | — | banner (один раз на страницу) |
| <nav> | navigation | navigation |
| <section> | region | alert, alertdialog, application,contentinfo, dialog, document, log, main,marquee, region, search или status |
Комбинация элементов с их согласованными ролями в HTML5 будет выглядеть как в следующем фрагменте кода.
<header role="banner">
<nav role="navigation">...</nav>
</header>
<article role="article">
<section role="region">...</section>
</article>
<aside role="complementary">...</aside>
<footer role="contentinfo">...</footer>Состояния и свойства
В сочетании с ролями WAI-ARIA существуют также состояния и свойства, которые помогают информировать вспомогательные технологии, как настроено содержимое. Подобно ролям, состояния и свойства разбиты на четыре категории, в том числе атрибуты виджета, атрибуты живого региона, атрибуты drag-and-drop и атрибуты отношений.
Атрибуты виджета поддерживают роли виджетов и являются специфическими для пользовательского интерфейса и там, где от пользователя требуются действия. Атрибуты живого региона могут быть применены к любому элементу и используются для обозначения изменений содержимого для вспомогательных технологий, к примеру, на странице предупреждений и уведомлений. Атрибуты drag-and-drop информируют об элементах drag-and-drop и обеспечивают альтернативное поведение для вспомогательных технологий. И, наконец, атрибуты отношений описывают отношения между элементами, когда структура документа не может быть определена.
Ресурсы и ссылки
Автор и редакторы
Автор: Шэй Хоу
Последнее изменение: 11.08.2018
Редакторы: Влад Мержевич
Семантический HTML — рекомендация с большими выгодами
Автор: Евгений Рыжков Дата публикации: 18.02.2010
Семантика (фр. sémantique от др.-греч. σημαντικός — обозначающий) — наука о понимании определенных знаков, последовательностей символов и других условных обозначений. Эта наука используется во многих отраслях: лингвистика, проксемика, прагматика, этимология и т.д. Ума не приложу, что эти слова означают и чем все эти науки занимаются. Да и не важно, меня интересует вопрос применения семантики при верстке сайтов.
Заметка
Тут не буду затрагивать термин Семантический веб. На первый взгляд, может показаться, что темы Семантический веб и семантический HTML код — это почти одно и тоже. Но на самом деле Семантический веб понятие, довольно философское и с нынешней реальностью имеет не так много общего.
Семантическая верстка — что это?
В языке каждое слово имеет определенный смысл, назначение. Когда ты говоришь «колбаса», ты имеешь в виду пищевой продукт, представляющий собой фарш (как правило, мясной) в продолговатой оболочке. Короче говоря имеешь в виду колбасу, а не молоко или зеленый горошек.
HTML — это тоже язык, его «слова», именуемые тегами, тоже имеют определенный логический смысл и назначение. По этому в первую очередь семантический HTML код — это верстка с правильным использованием HTML тегов, использованием их по назначению, так как их задумывали разработчики языка HTML и веб стандартов.
Например, тег <p> — это абзац, и не стоит им размечать строки веб форм. А <b> — это просто выделение текста жирным и это никак не заголовок.
Разметка страниц с учетом применения тегов по их назначению, получило название POSH (Plain Old Semantic HTML) — старый добрый семантический HTML. Термин POSH родился в апреле 2007 во время дискуссий на тему улучшения качества разметки между признанными авторитетами веб разработки: John Allsopp, Tantek Çelik, Jeremy Keith, Chris Messina. Они же и были одними из основателей сообщества microformats.org.
Кто устанавливает правила?
Жестких правил ныне нет. Если бы были, то несемантический код уже бы не проходил валидацию. В наши дни есть только рекомендации, к которым все же стоит начинать прислушиваться. Рано или поздно рекомендации перерастут в правила.
Сейчас в мире есть одна общепризнанная организация, которая занимается разработкой веб стандартов — W3C. На рекомендации и спецификации этого центра стоит ориентироваться в первую очередь. Они же создали портал, посвященный Семантическому веб.
microformats.org — сообщество, которое работает над воплощением идеалистических идей Семантического веба в жизнь посредством приближения разметки страниц к тем самым семантическим идеалам.
Зачем и кому вообще нужна семантическая верстка?
Если у меня на сайте информация отображается так же как на дизайне, зачем себе еще ломать мозг и думать о какой-то семантике?! Это же дополнительная работа! Кому это нужно?! Кто это оценит кроме другого верстальщика?
Мне такие вопросы приходилось частенько слышать. Давай разберемся.
Семантический HTML для веб разработчиков
- чистый код — семантический HTML код чище и меньше по объему, чем не семантический. А чем меньше кода, тем проще найти нужный участок или локализовать ошибку, с ним проще работать. Сравни: пример несемантической разметки с помощью таблиц и кучей атрибутов пример семантической разметки с минимумом «лишнего»
- понятный (читаемый) код — осмысленные имена классов и идентификаторов дают представление о структуре кода тому кто его читает. Это имеет важное значение, когда над сайтом работает команда разработчиков. Это опять же сокращение времени разработки. Сравни: О назначении этой секции остается только гадать — блочная верстка еще не означает семантическая имена классов и id играют немалую роль для читабельности кода
- ну и гордость собой и своей работой, что все сделано по уму и по последним веяниям моды.
Семантический код для пользователей
Повышает доступность информации на сайте. В первую очередь это имеет значение для альтернативных агентов таких как:
- семантический код напрямую влияет на объем HTML кода. Меньше кода —> легче страницы —> быстрей грузятся, меньше требуется оперативной памяти на стороне пользователя, меньше трафика, меньший объем баз данных. Сайт становиться быстрей и менее затратным.
- голосовые браузеры для которых важны теги и их атрибуты, чтобы произнести правильно и с нужной интонацией содержимое, или наоборот не произнести лишнего.
- мобильные устройства которые не на полную мощь поддерживают CSS и поэтому ориентируются в основном на HTML код, отображая его на экране согласно используемым тегам.
- устройства печати даже без дополнительного CSS напечатают информацию качественней (ближе к дизайну), а создание идеальной версии для печати превратится в несколько легких манипуляций с CSS.
- к тому же существуют устройства и плагины, которые позволяют быстро перемещаться по документу — например, по заголовкам у Opera.
Семантический HTML для машин
Поисковые системы постоянно совершенствуют методы поиска, чтобы в результатах была та информация, которую действительно ищет пользователь. Семантический HTML способствует этому, т.к. поддается гораздо лучшему анализу — код чище, код логичен (четко видно где заголовки, где навигация, где содержимое).
Хороший контент плюс качественная семантическая верстка — это уже серьезная заявка на хорошие позиции в выдачах поисковиков.
Выводы
Семантическая верстка нынче это не требования, а рекомендация. Но рекомендация, которая уже сейчас несет в себе большие выгоды. Не за горами то время, когда семантический код, будет таким же требованием как дивная верстка. Поэтому лучше начинать себя приучать к «правильному» коду сегодня, чтобы не остаться «за бортом» завтра.
Как начать верстать семантически?
- изучи лучше HTML, какие теги и для чего предназначены;
- копни глубже в CSS, у этого инструмента большие возможности;
- научись давать грамотные имена классов и идентификаторов;
- начинай осваивать микроформаты;
- и самое главное, начни думать во время верстки. Бездумная работа не принесет ни хороших результатов, ни удовлетворения от работы.
Наш раздел, посвященный семантическому HTML, тебе в помощь.
Материалы
Семантическая вёрстка — Википедия
Материал из Википедии — свободной энциклопедии
Семантическая вёрстка, или семантический HTML-код, — это подход к созданию веб-страниц на языке HTML, основанный на использовании HTML-тегов в соответствии с их семантикой (предназначением)[1], а также предполагающий логичную и последовательную иерархию страницы[2][3]. Он противопоставляется подходу, при котором написание HTML-кода определяется внешним видом веб-страницы. Для оформления веб-страниц, написанных в соответствии с семантикой, используются каскадные таблицы стилей (CSS). Стандарт HTML с самого начала включал в себя ряд семантических тегов[4], но большую популярность семантическая вёрстка получила после начала работ над HTML5.
В качестве примера можно привести изменения в стандарте HTML, коснувшиеся, в частности, тега физического форматирования <i> (англ. italic, делающего текст курсивным) — вместо него теперь рекомендуется использовать тег логического форматирования <em> (от англ. emphasis, акцентирование). Затем с помощью CSS акцентирование можно визуально представить курсивом, полужирным начертанием, подчёркиванием; аудиально (при озвучивании текста на основе TTS-технологий) — замедлением темпа речи или более громким голосом и т. д. Эти изменения вызваны тем, что визуально курсивом оформляется не только акцентирование текста, но и, например, цитаты, для которых с HTML 4 появился тег <cite>. Другим применением курсива может быть обозначение иностранных фраз или слов; при этом веб-разработчики могут использовать встроенные в XHTML атрибуты указания языка или сделать свою разметку семантической, указав подходящий класс элемента с текстом через атрибут class (например, class="foreign"). Использование различной разметки для акцентов, цитат и иностранных слов позволяет машинным веб-агентам, таким как пауки поисковых систем, более точно определять значимость как отдельных элементов веб-страницы, так и всего текста в целом.