Семантическая структура для HTML5 страницы. Семантика в HTML5. Элементы для описания Восточно-Азиатских символов. DOCTYPE и meta теги в заголовке страницы
Семантика (фр. sémantique от др.-греч. σημαντικός - обозначающий) — наука о понимании определенных знаков, последовательностей символов и других условных обозначений. Эта наука используется во многих отраслях: лингвистика, проксемика, прагматика, этимология и т.д. Ума не приложу, что эти слова означают и чем все эти науки занимаются. Да и не важно, меня интересует вопрос применения семантики при верстке сайтов.
Заметка
Тут не буду затрагивать термин Семантический веб. На первый взгляд, может показаться, что темы Семантический веб и семантический HTML код — это почти одно и тоже. Но на самом деле Семантический веб понятие, довольно философское и с нынешней реальностью имеет не так много общего.
Семантическая верстка — что это?
В языке каждое слово имеет определенный смысл, назначение. Когда ты говоришь "колбаса", ты имеешь в виду пищевой продукт, представляющий собой фарш (как правило, мясной) в продолговатой оболочке. Короче говоря имеешь в виду колбасу, а не молоко или зеленый горошек.
HTML — это тоже язык, его "слова", именуемые тегами, тоже имеют определенный логический смысл и назначение. По этому в первую очередь семантический HTML код — это верстка с правильным использованием HTML тегов , использованием их по назначению, так как их задумывали разработчики языка HTML и веб стандартов.
microformats.org — сообщество, которое работает над воплощением идеалистических идей Семантического веба в жизнь посредством приближения разметки страниц к тем самым семантическим идеалам.
Зачем и кому вообще нужна семантическая верстка?
Если у меня на сайте информация отображается так же как на дизайне, зачем себе еще ломать мозг и думать о какой-то семантике?! Это же дополнительная работа! Кому это нужно?! Кто это оценит кроме другого верстальщика?
Мне такие вопросы приходилось частенько слышать. Давай разберемся.
Семантический HTML для веб разработчиков
Семантический код для пользователей
Повышает доступность информации на сайте. В первую очередь это имеет значение для альтернативных агентов таких как:
- семантический код напрямую влияет на объем HTML кода. Меньше кода —> легче страницы —> быстрей грузятся, меньше требуется оперативной памяти на стороне пользователя, меньше трафика, меньший объем баз данных. Сайт становиться быстрей и менее затратным .
- голосовые браузеры для которых важны теги и их атрибуты, чтобы произнести правильно и с нужной интонацией содержимое, или наоборот не произнести лишнего.
- мобильные устройства которые не на полную мощь поддерживают CSS и поэтому ориентируются в основном на HTML код, отображая его на экране согласно используемым тегам.
- устройства печати даже без дополнительного CSS напечатают информацию качественней (ближе к дизайну), а создание идеальной версии для печати превратится в несколько легких манипуляций с CSS.
- к тому же существуют устройства и плагины, которые позволяют быстро перемещаться по документу — например, по заголовкам у Opera .
Семантический HTML для машин
Поисковые системы постоянно совершенствуют методы поиска, чтобы в результатах была та информация, которую действительно ищет пользователь. Семантический HTML способствует этому, т.к. поддается гораздо лучшему анализу — код чище, код логичен (четко видно где заголовки, где навигация, где содержимое).
Хороший контент плюс качественная семантическая верстка — это уже серьезная заявка на хорошие позиции в выдачах поисковиков .
Приложив немного усилий мы можем сделать нашу разметку более выразительной.
Но зачем тратить дополнительное время и ресурсы на обеспечение семантики HTML? Большинство пользователей не читают ваш HTML. И их заботит лишь то, что происходит на экране.
Семантический HTML предназначен только для машин. Они не так умны как вы и я, поэтому мы должны помочь им.
Примером таких машин, которые извлекают пользу из семантического HTML, могут послужить поисковые системы. Когда поисковые системы индексируют наш сайт, они интерпретируют содержание страниц сайта на основе разметки.
Вот что говорит Google об использовании семантического HTML (курсивом выделены мои записи):
Google (и другие поисковые системы) могут использовать эти данные для лучшей индексации контента, представления его более заметными в результатах поиска и использовать её в новом ключе , например, при голосовых ответах, картах и Google Now.
Языковые инструменты (переводчики) исследуют нашу разметку для того, чтобы они могли перевести наши статьи на другой язык. Хорошая HTML разметка может привести к более точному переводу. Для примера, существуют различия между американским и британским английским. Люди могут с легкостью понять диалектические и идиоматические различия, но машины этого не могут.
Семантический HTML также повышает доступность веб-сайтов. Вспомогательные технологии, такие как программы для чтения с экрана, анализируют и интерпретируют ваш HTML. С семантическим HTML, люди с особыми потребностями смогут читать и проще ориентироваться в наших статьях.
Это только верхушка айсберга. Есть неисчислимое количество других машин, которые смотрят на наш HTML и пытаются его понять. Черт возьми, да интернет состоит из кучи машин. Они составляют большую часть веба. Мы должны приложить все возможности, чтобы кормить их более значимыми данными.
Окей, теперь, я надеюсь, вы на борту и хотите использовать семантический HTML. Может быть на своём блоге или при разработке CMS.
Посмотрите на шаблон ниже.
HTML шаблон
Вот семантический HTML шаблон для веб-контента. Это хорошая отправная точка/шаблон. Просто заполните пробелы. Это общий шаблон, который может работать со многими типами текстового содержимого: записи в блоге, новостные статьи, очерки и так далее.
HTML-разметка шаблона использует семантические элементы (т.е. article , header и footer).
Также здесь используется структурированная разметка данных Schema.org. В частности, схемы и Веб-страница . Schema.org - это совместный проект компаний Google, Bing и Yahoo!. Целью проекта является предоставление способа для поисковых систем, лучше понимать содержимое страниц.
Пример
Вот заполненный пример:
Заголовок статьи
Написано Имя автора
Основная часть статьи идет здесь.
Детали
Давайте поговорим о различных частях HTML-шаблона.
Уточнение типа контента, языка и направления текста
HTML элемент имеет четыре атрибута:
- itemscope указывает, что схема Статья используется на протяжении всего документа.
- itemtype содержит адрес используемой схемы.
- lang даёт информацию о том, на каком языке написано содержимое страницы. W3C говорит, что мы должны пользоваться языковыми тегами, перечисленными в IANA Language Subtag Registry . Например, если страница написана на немецком языке, мы должны присвоить атрибуту land значение de .
- dir содержит информацию о направлении текста статьи. У вас есть два варианта. Либо «слева направо» (ltr), либо «справа налево» (rtl). Если вы хотите, чтобы браузер решил это за вас, то не используйте его.
Семантическая HTML структура
Для осмысленного структурирования, мы используем следующие HTML элементы согласно спецификациям W3C.
BBC использует сопровождающее предложение ко всем своим статьям.
Структурированные данные
Шаблон использует микроданные, чтобы усилить семантическую HTML структуру.
Если вы обеспокоены использованием новых HTML5 элементов, то вы можете заменить их полностью поддерживаемыми элементами, такими как div или span. при этом вы можете обеспечить их семантическую значимость с помощью микроданных.
Ниже приводится краткое описание микроданных, используемых в HTML-шаблоне.
| Микроданные | Описание |
|---|---|
| name | Это свойство указывает на имя пункта. В нашем случае, пункт - это статья. Свойство name нашей статьи - это заголовок веб-страницы, который представлен в элементе title . Обычно, названия веб-страниц уникальны (из-за SEO), поэтому такое название хорошо подходит, в большинстве случаев, и для статей. |
| headline | Человекочитаемое название статьи. Некоторые сайты используют короткие, богатые на ключевые слова значения для title из-за SEO, а затем идёт полный заголовок, описывающий тему статьи. |
| description | Краткое объяснение содержания статьи. В большинстве случаев, присвоенное значение мета-тегу description хорошо работает. |
| author | Имя создателя контента. В HTML-шаблоне за это отвечает мета-тег author и видимая часть статьи. |
| datePublished | Это свойство позволяет нам четко указать дату размещения статьи в элементе time . |
| about | Это свойство применимо к тексту, описывающему тему статьи. Хорошо подходит для сопровождающего предложения или параграфа. |
| articleBody | Это свойство представляет собой основную часть статьи. |
Привет, уважаемые читатели блога.
Мы с вами уже не раз касались темы верстки сайта, в частности, рассматривали основы работы с и . Сегодня мы пойдем дальше и разберемся с тем, что такое семантическая верстка сайта, для чего она нужна и как ее применять на практике. Для понимания данной темы важно предварительно изучить хотя бы основные принципы html и css, либо же постигать новую информацию по ходу прочтения сегодняшней статьи, обращаясь за разъяснениями к более ранним статьям на моем блоге.
Семантическая верстка в HTML
Семантика в языкознании означает смысл, значение слова или речевого оборота. Мы уже встречали данный термин, когда рассматривали . И в том контексте, и в сегодняшней статье определение «семантический» указывает на то, что в основе лежит смысл. А стало быть, семантическая верстка – это верстка, построенная на смысловой структуре. В отличие от так называемой верстки на дивах (div – html-тег), все элементы семантической верстки подчинены смысловой иерархии. И самый наглядный пример для объяснения – это использование тегов заголовков и подзаголовков h1, h2, h3 и т.д.
Это теги семантической разметки. И если изначально в html для выделения подзаголовков использовались теги или , то сегодня такое акцентирование для заголовков почти не употребляется. Вместо этого теги h1 и h2 вобрали все необходимые функции для выделения названий разделов жирным увеличенным шрифтом. Кроме того, эти теги дают гораздо больше информации о тексте, как самим веб-разработчикам, так и роботам, обрабатывающим веб-страницы. Т.е. ранее html-верстка была более описательной, уделялось внимание внешним атрибутам элементов, которые составляли общую структуру отдельными блоками. В семантической же верстке – основной акцент делается на подчинении структурных элементов общей смысловой иерархии, где каждый блок имеет свое назначение для целого.
Употребление тегов семантической верстки позволяет уменьшить количество кода страницы, ускорить обработку, а соответственно и загрузку документа. Также понятная структура кода гораздо быстрее распознается, а потому и выше котируется поисковыми системами. Напомню, как мы использовали .
Когда каждому структурному элементу сайта соответствует определенный тег, код становится упорядоченным и понятным. При этом описание стилей элементов выводятся в отдельный css-файл. Для того, чтобы увидеть насколько страницы вашего сайта структурированы можно проделать простой эксперимент. Отключите на время в браузере поддержку CSS и JavaScript и посмотрите, где на вашем ресурсе названия статей, содержание, подзаголовки и т.д. Можете ли вы разобраться в структуре вашего сайта, используя только html-разметку?
Примеры семантической верстки HTML5
Еще один наглядный пример, где ясно видно отличие семантической верстки от прошлых стандартов html, — использование тега (от английского emphasis – акцент). Тег заменил тег (выделение курсивом). Для тега в файле стилей может задаваться отображение курсивом, подчеркиванием, полужирным. Но значение данного тега – именно акцентирование текста, к примеру, для выделения нового термина. Однако, в случае, когда нужно употребить цитату, в семантической верстке будет уже использоваться тег , хотя ранее оба эти элемента (и новый термин, и цитата) были бы заключены в тег (выделены курсивом).
А теперь приведем пример, как верстка дивами заменяется семантической.
Пример обычной верстки:
Замена на семантическую:
Текст поста Заголовок поста
Здесь мы использовали теги семантической верстки: section, article, h1, p.
Стили прописываются, как правило, в отдельном в файле (в случае с WordPress в style.css) следующим образом:
| 1 2 3 4 5 6 7 8 9 10 11 12 | header { width : 90% ; margin : auto ; } h1{ text-align : center ; font-size : 2em ; } nav { background : #f1f1f1 ; color : #777 ; } |
header { width: 90%; margin:auto; } h1{ text-align:center; font-size: 2em; } nav { background:#f1f1f1; color:#777; }
В случае верстки с div, данное описание выглядело бы так:
| 1 2 3 4 5 6 7 8 9 10 11 12 | div.header{ width : 90% ; margin : auto ; } div.header span{ text-align : center ; font-size : 2em ; } div.menu { background : #f1f1f1 ; color : #777 ; } |
div.header{ width: 90%; margin:auto; } div.header span{ text-align:center; font-size: 2em; } div.menu { background:#f1f1f1; color:#777; }
Однако все преимущества семантической верстки не отменяют возможности употребления старых наработок. Важно, подойти к построению текстовой разметки с умом, чтобы каждый элемент вписывался в общую структуру.
Распространенные теги HTML5 для семантической верстки
Для того, чтобы глубже понять сегодняшнюю тему рассмотрим некоторые теги, которые используются при семантической верстке в html5. А затем применим их на практике.
Теперь, зная вышеприведенные теги, посмотрим, как они работают на примере ниже.
Прописываем такой код в редакторе или Блокноте:
КонтентЗаголовок статьи
Подзаголовок статьи
Теперь запустим документ, как html-файл.
Далее нам необходимо задать стили для каждого элемента. В нашем случае, добавим тег
