20 HTML элементов, улучшающих семантику текста


Содержание материала:

Текстовые семантические элементы HTML5

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

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

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

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

Обозначение дат и времени с помощью элемента

Веб-страницы часто содержат информацию о датах и времени. Например, такая информация вставляется в конце большинства записей в блогах. К сожалению стандартного способа помечать даты не существует, вследствие чего другим программам (например, поисковым движкам) не так-то легко извлечь их из остального кода разметки. Эта проблема решается введением семантического элемента с помощью которого можно обозначить дату, время или комбинацию обоих. В следующем коде приводится пример использования этого элемента:

То, что элемент применяется как оболочка для даты (без времени) может показаться несколько нелогичным, но это просто одна из странностей HTML5. Логичнее было бы ввести элемент , но этого почему-то не сделали.

От элемента требуется выполнять две функции. Во-первых, он должен указывать местонахождение значения даты или времени в разметке. Во-вторых, он должен предоставлять заключенное в него значение даты или времени в форме, понимаемой любой программой. Предыдущий пример отвечает второму требованию предоставления универсального формата даты, который состоит из четырехсимвольного значения года, двухсимвольного значения месяца и двухсимвольного значения дня, в указанном порядке. Иными словами, формат даты имеет такой шаблон:

Но пользователю, просматривающему веб-страницу, дату вполне допустимо показать в другом формате. Более того, дату на экран можно выводить любым нравящимся вам способом, при условии предоставления ее значения в машиночитаемом универсальном формате в атрибуте datetime, как показано в следующем примере:

В браузере это будет выглядеть таким образом:

Подобные правила также применяются и для значения времени, которое предоставляется в таком формате:

То есть, дается двузначное значение часа (в 24-часовом формате), затем двузначное значение минут. Часть после знака «плюс» (или «минус») представляет смещение часового пояса от всемирного координированного времени. Указание смещения часового пояса является обязательным. Узнать смещение часового пояса для конкретного региона можно на веб-сайте «Часовой пояс».

Например, Москва находится в московском часовом поясе, который также называется UTC+4:00 (UTC — Universal Time Coordinated, всемирное координированное время), т.е. смещение данного часового пояса равно плюс четырем часам. Время 09:30 в Москве указывается в разметке следующим образом:

Таким образом, посетителям веб-страницы время представляется в привычном для них формате, в то время как для поисковых роботов и другого программного обеспечения предоставляется однозначное значение datetime, с которым они могут работать.

Наконец, время в определенный день указывается путем совмещения этих двух стандартов. Дата приводится первой, за ней следует прописная латинская буква Т, после которой указывается время:

Элемент также поддерживает атрибут pubdate. Он применяется в тех случаях, когда указываемая дата совпадает с датой публикации текущего содержимого (например, статьи, в которой помещается элемент ). В качестве примера можно привести такой код:

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

JavaScript-вычисления и элемент

Семантический элемент предназначен для облегчения понимания разметки определенных страниц, в которых используются сценарии JavaScript. Функция этого элемента состоит просто в резервировании поля подстановки, в которое код может выводить результаты вычислений. Допустим, например, что вы создали страницу наподобие показанной ниже:

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

В таких случаях для обозначения места для вывода результатов полю присваивается однозначный идентификатор. Обычно для поля подстановки используется элемент , который отлично работает, но не придает этому полю никакого специфического значения. Использование же элемента для этой цели делает код более осмысленным:

Собственно код JavaScript не требует никаких изменений, т.к. он ищет элемент по его идентификатору, и его ничуть не волнует тип этого элемента:

Часто для удобства элементы управления помещаются в элемент

Элемент можно сделать еще более осмысленным, добавив в него атрибут form (который указывает идентификатор формы, содержащей связанные элементы управления) и атрибут for (со списком идентификаторов связанных элементов управления, разделенных запятыми). Далее показан примера такого кода:

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

Выделение текста цветом с помощью элемента

Элемент обозначает блок текста, выделенного цветом. Применение этого элемента особенно подходит для выделения фрагментов текста, как показано в следующем листинге:

Текст, взятый в элемент , выделяется желтым цветом:

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

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

По сути, элемент не предназначен для выполнения форматирования текста. В конце концов, имеется множество других способов выделить текст на веб-странице. Поэтому элемент следует использовать (совместно с форматированием посредством CSS, если есть такое желание), когда это подходит с точки зрения семантики. Удачно использовать элемент для привлечения внимания к обычному тексту, содержание которого по какой-либо причине является важным, например из-за контекста обсуждения, в котором он находится, или из-за выполняемой пользователем операции.

Семантическая структура для HTML5 страницы. Семантика в HTML5

Сегодня мы поговорим о семантике в HTML5. Я уже писал небольшой обзорный пост про новые семантические теги в HTML5. Рекомендую с ней предварительно ознакомиться, перед прочтением этой статьи. Сейчас мы разберемся с этим вопросом более подробно, о том как правильно и грамотно составлять семантическую структуру HTML5 документа.

Семантическая структура для HTML5 страницы

В этой статье мы будем постепенно создавать html страницу, и оформлять ее семантическими HTML5 тегами.

Рисунок — Семантическая структура для HTML5 страницы.

DOCTYPE и meta теги в заголовке страницы

Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head :

Я добавил тег который отвечает за ключевые слова. И тег который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега . Title страницы должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.

Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные

Заголовок страницы

Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.

Топ-пост этого месяца:  Google Alerts как настроить и эффективно использовать

Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.

Замечание по поводу тега H1

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

До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.

Навигация на странице

Оформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.

Контент на странице

Основное содержимое страницы оформляется в тег main. Это может быть одна статья, или несколько превью статей если речь идет о странице блога с несколькими записями. Нельзя помещать сайдбар, хедер страницы, футер или главную навигацию в тег main!

Оформление статьи

Тег article — служит для обертки статей. В общем этот тег содержит в себе блок контента, который может быть вынут из контекста страницы, и использован отдельно в другом месте. Это может быть статья (полный тескт статьи или превью), пост на форуме, и т.п.

На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime=»2015-09-30″ или с указанием часов минут и секунд datetime=»2015-09-30T15:25:55″ . Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.

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

Сайдбар или колонка с виджетами

Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:

Тег section


Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента вне контекста самой страницы. Рекомендуется использовать теги (

) для обозначения темы секции.

В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег . Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section , наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section , но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»

Пример использования тега section в списке с перечислением городов:

Подвал сайта — Footer

Подвал сайта оформляется тегом

Заключение

Для проверки структуры страницы можно использовать инструмент HTML5 outliner. Он показывает структуру страницы блокам и заголовкам.

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

В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org

Важное замечание по использованию HTML5 тегов. В спецификации не указаны жесткие правила по использованию семантических тегов, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа.

Семантические элементы HTML5

Семантика — это наука о значениях слов и фраз в языке. Таким образом, семантические элементы — это элементы со значением.

Что такое семантические элементы?

Семантические элементы четко описывают, что они означают, как браузеру, так и веб-разработчику.

В качестве примера не семантических элементов можно привести теги

Примеры семантических элементов: ,

и . Они четко описывают, какого характера контент они содержат.

Семантические элементы HTML5 поддерживаются всеми современными браузерами.

Кроме этого, можно «научить» старые браузеры понимать «неизвестные элементы». См. раздел «Поддержка элементов HTML5».

Новые семантические элементы в HTML5

На многих веб-сайтах есть HTML код вроде этого:

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

Элементы HTML5, используемые на уровне семантики текста

Ниже приведены элементы HTML5, используемые на уровне семантики текста.

Загружено на 55 %

Загружено на 55 %

Ниже приведены элементы (также на уровне семантики текста) введенные до стандарта HTML5, но которые вы, возможно, до сих пор использовали не часто, а следовало бы.

Элемент del покаывает, что текст (обернутый в тег del ) в новой версии документа был удален. Обычно браузера перечеркиват текст обернутый в тег del

Противоположность элементу del : предназначен для выделения текста, который был добавлен в новую версию документа. Обычно браузера подчеркивают текст обернутый в тег ins

Компоненты семантики текста

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

Однако в общее содержание текста часто входят отдельные семантические компоненты, которые формального выражения не получают. Например, в тексте Я подошел к дому. Дверь была открыта. специально не говорится о том, что у дома была дверь. Психически здоровый и здравомыслящий человек прекрасно знает, что дом «без окон, без дверей» существует только в загадке, а в реальном мире таких домов не бывает, поэтому информация о наличии в доме двери окажется избыточной.

Кроме формально выраженной информации, любое сообщение предполагает наличие фоновых знаний об окружающем мире [40, с.146].

Помимо формальных компонентов в семантическую структуру текста входят подтекст и интертекст.

Подтекстпредставляет собойимплицитную, невыраженную категорию изанимает значительное место в составе текста. Важным средством «выражения» подтекста является нарушение языковой нормы. Каждый языковой элемент любого уровня обретает новые смыслы лишь в определенной комбинации, поэтому явное нарушение обычного порядка сигнализирует получателю сообщения о дополнительных смыслах, неявно заложенных в тексте. Кроме нарушения структуры текста, используются различные оригинальные и нестандартные приемы привлечения внимания читателя для «намека» на определенную возможность декодирования дополнительных смыслов из текста.

Как таковой, целостной теории подтекста еще не существует, поскольку она находится еще в процессе становления. Желающие подробнее изучить вопросы, связанные с подтекстом, могут сделать это, причтя работы Л.А. Голяковой «Подтекст как полидетерменированное явление» (1999) и «Текст, контекст, подтекст» (2002).

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

Достаточно подробно проблему интертекстуальности рассматривает Е.Е. Бразговская. Она отмечает, что интертекстуальность в широком смысле слова – это отношение текста к другим текстам, это отношение текста как знака своего значения к другим текстам как знакам своих значений. Текст-знак всегда ссылается на другой / другие тексты-знаки и находится на пересечении их информационных пространств, где рожаются значения и генерируются новые смыслы. Текст живет как эхо других текстов. Тексты всегда говорят о других текстах, включая их через знаки интертекстуальности в свое семантическое пространство [14, c. 5].

Как отмечает Е.Е, Бразговская, «любой знак, являющийся представителем другого текста, требует интерпретации и семантического кода для ее осуществления. В качестве такого кода выступает повторяемость этого знака в ряде текстов информационного пространства. Знаки без повторяемости (а, значит, без известных правил расшифровки) не могут считаться знаками, поскольку не обладают информационным пространством» [14, c. 6].

В качестве знаков интертекстуальности выступают следующие элементы

· Цитаты, аллюзии (например, собственные имена, принадлежащие другим текстам);

· Ассоциации читателей, не предусмотренные автором;

· Элементы стиля других текстов

Семантика текста становится понятной в процессе его интерпретации.

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

Не нашли то, что искали? Воспользуйтесь поиском:

Лучшие изречения: Как то на паре, один преподаватель сказал, когда лекция заканчивалась — это был конец пары: «Что-то тут концом пахнет». 8367 — | 7995 — или читать все.

188.64.174.135 © studopedia.ru Не является автором материалов, которые размещены. Но предоставляет возможность бесплатного использования. Есть нарушение авторского права? Напишите нам | Обратная связь.

Отключите adBlock!
и обновите страницу (F5)

очень нужно


Семантические элементы

При создании HTML документа часто используются теги div и span . Они позволяют обернуть контент в блочный или строчный элемент разметки. Это помогает создавать независимые блоки с разным оформлением, но для браузера и поисковых систем эти блоки не являются семантическими, т.е. они не говорят напрямую о том, что в них лежит. Многие из HTML тегов изначально обладают семантикой, например p — параграф, table — таблица, ol, ul — списки. Но этими тегами не получится разметить «шапку», «подвал», «боковую панель» сайта.

Раньше, для этого использовали классы или идентификаторы, например так:

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

Основными семантическими тегами стали:

Большинство элементов интуитивно понятны и их можно сразу использовать в своих документах. Теперь пример выше можно переделать с использованием новых элементов HTML:

Задание

Создайте разметку «шапки» и «подвала» используя новые семантические элементы HTML5

Упражнение доступно только авторизованным пользователям.

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

Семантическая верстка: понятие и примеры семантического кода

Если вы тот, кто использует div теги для всего что есть на сайте, эта статья для вас. Мы сфокусируемся на том, как писать чистый семантический HTML код, используя валидную разметку. Вы увидите на практике, как можно минимизировать количество div тегов в вашем HTML коде. Вы научитесь семантической верстке не только в теории, но и на примерах. Написание правильных семантических шаблонов упрощает жизнь не только себе, но и команде в целом. Ну и проще для браузеров, которые интерпретируют код. Чем меньше кода, тем быстрее грузиться страница. Это также позволяет сохранить время и простоту понимания кода, при создании больших проектов. Другими словами, семантическая верстка – это необходимое условие создания качественного сайта.

Понятие семантической верстки

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

Как достигнуть семантики кода?

Это просто, главное делать все проще и стараться как можно больше все выносить в CSS стили, а JS код в отдельный файл. По классике, на одной HTML странице должен подключаться только один CSS файл и один JS файл. По поводу HTML, на каждом сайте своя ситуация. Ведь каждый из них уникален. Сейчас рассмотрим основные моменты, на которых претыкаются верстальщики:

  • Заголовки должны выделяться тегами H1, H2, H3, H4, но никак не 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 блок, чтобы создать отступы, как показано на примере слева. Но если каждый из блоков имеет заголовок h4, мы можем просто применить margin отступ к h4 селектору и убрать лишний div тег.

Используем семантическую разметку кода

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

Пример:

Картинка ниже показывает разницу между div разметкой и семантической разметкой без css стилей.

Минимизируем использование div тегов

Может быть, вы видели шаблоны, где div теги везде… они меня бесят. Имели ли вы лишний закрывающий тег /div, или не закрытый div? Я уверен, каждый верстальщик сталкивался с подобной проблемой, когда рядом стоит 3-4 div тега. Чтобы не путаться, нужно минимизировать использование div, так будет проще отслеживать ошибки.

Пример 1:

Вместо использования div для создания навигационного пути, можно использовать p тег.

Пример 2:

Пример ниже показывает, как можно использовать CSS, чтобы избавиться от двух лишних div тегов. Результат будет таким же.

Заключение

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

Семантическая верстка сайта: HTML5

Привет, уважаемые читатели блога.

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

Семантическая верстка в HTML

Семантика в языкознании означает смысл, значение слова или речевого оборота. Мы уже встречали данный термин, когда рассматривали сбор семантического ядра для сайта. И в том контексте, и в сегодняшней статье определение «семантический» указывает на то, что в основе лежит смысл. А стало быть, семантическая верстка – это верстка, построенная на смысловой структуре. В отличие от так называемой верстки на дивах (div – html-тег), все элементы семантической верстки подчинены смысловой иерархии. И самый наглядный пример для объяснения – это использование тегов заголовков и подзаголовков h1, h2, h3 и т.д.

Это теги семантической разметки. И если изначально в html для выделения подзаголовков использовались теги или , то сегодня такое акцентирование для заголовков почти не употребляется. Вместо этого теги h1 и h2 вобрали все необходимые функции для выделения названий разделов жирным увеличенным шрифтом. Кроме того, эти теги дают гораздо больше информации о тексте, как самим веб-разработчикам, так и роботам, обрабатывающим веб-страницы. Т.е. ранее html-верстка была более описательной, уделялось внимание внешним атрибутам элементов, которые составляли общую структуру отдельными блоками. В семантической же верстке – основной акцент делается на подчинении структурных элементов общей смысловой иерархии, где каждый блок имеет свое назначение для целого.

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

Когда каждому структурному элементу сайта соответствует определенный тег, код становится упорядоченным и понятным. При этом описание стилей элементов выводятся в отдельный css-файл. Для того, чтобы увидеть насколько страницы вашего сайта структурированы можно проделать простой эксперимент. Отключите на время в браузере поддержку CSS и JavaScript и посмотрите, где на вашем ресурсе названия статей, содержание, подзаголовки и т.д. Можете ли вы разобраться в структуре вашего сайта, используя только html-разметку?

Примеры семантической верстки HTML5

Еще один наглядный пример, где ясно видно отличие семантической верстки от прошлых стандартов html, — использование тега (от английского emphasis – акцент). Тег заменил тег (выделение курсивом). Для тега в файле стилей может задаваться отображение курсивом, подчеркиванием, полужирным. Но значение данного тега – именно акцентирование текста, к примеру, для выделения нового термина. Однако, в случае, когда нужно употребить цитату, в семантической верстке будет уже использоваться тег , хотя ранее оба эти элемента (и новый термин, и цитата) были бы заключены в тег (выделены курсивом).

А теперь приведем пример, как верстка дивами заменяется семантической.

Заголовки в HTML

У тебя в распоряжении 6 различных тегов для вставки заголовков — h1, h2, h3, h4, h5, h6 (h сокращенное от англ. heading — заголовок). Каждый из них имеет определенный вес (важность): h1 — имеет наибольшую важность, h6 — наименьшую. А вот как эти заголовки правильно использовать — одна из самых спорных тем. Давай попробуем копнуть глубже в тему и ответить на следующие вопросы:

  1. зачем вообще нужно грамотное использование заголовков в верстке?
  2. какова правильная иерархия заголовков в HTML?
  3. сколько и каких заголовков должно быть на странице?
  4. а если заголовок картинкой?
  5. нужен ли title заголовку?

Зачем вообще нужно правильное использование заголовков в верстке?

Во-первых, это дает возможность быстро сориентироваться на странице, на которой зачастую море информации. Это как в журнальной статье, быстро пробегая глазами по заголовкам, ты сразу отмечаешь на чем стоит остановиться. Правильное использование тегов заголовков даст возможность не только визуально ориентироваться на странице (этого можно добиться используя любые теги совместно с таблицами стилей), но и даст возможность так же уверенно находить нужное людям с ограниченными возможностями, которые используют голосовые браузеры и устройства чтения Брайля. Плюс не забываем, что не все устройства хорошо поддерживают каскадные таблицы стилей (например, мобильные устройства). А еще существуют устройства и плагины, которые позволяют быстро перемещаться по документу — например, по заголовкам у opera.

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


В-третих, четкая логическая структура документа — это шаг к повышению качества, понятности, доступности информации, это шаг к новому уровню предоставления информации — Семантический веб.

Какова правильная (рекомендуемая) иерархия заголовков?

Спецификации гласят следующее:

Заголовки на странице должны иметь четкую иерархию по уровням, т.е. h2 должен следовать после h1, h3 после h2 и т.д. Пропуск уровней в последовательности заголовков может создать впечатление, что структура документа не была должным образом продумана или что определенные заголовки были выбраны для их визуального исполнения, а не их значения.

Google говорит практически тоже самое:

Не советуем:

  • использовать теги заголовков там, где больше подошли бы теги или
  • беспорядочно переключаться от заголовков одного размера к другому

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

  • засорять страницу лишними заголовками,
  • использовать заголовки только для стилизации текста, без определения структуры страницы.

Изучив спецификации, рекомендации поисковых систем, а так же ярых защитников семантического HTML, можно подвести итоги:

  • использовать заголовки только там, где действительно заголовки
  • соблюдать четкую иерархию заголовков (h2, следует за h1. h3 после h2 и т.д.). Желательно не нарушать четкую последовательность уровней
  • желательно чтобы первый заголовок (по коду) на странице был h1
  • не следует неупорядоченно переключаться от заголовков одного размера к другому

Сколько и каких заголовков должно быть на HTML странице?

Четких каких-либо правил в спецификациях или рекомендациях от поисковиков нет. Некоторые гуру рекомендуют придерживаться следующей схемы:

Такой порядок имеет смысл: h1 — это тема страницы (статьи), поэтому должен быть один (это особенно важно при поисковой оптимизации). У статьи может быть несколько подтем, как правило в рамках одной темы их немного, потому заголовков второго уровня немного на странице. И так далее с остальными.

Может возникнуть вопрос: как быть со страницами анонсов новостей (статей), где по иерархии должно быть много заголовков второго уровня? В таких случаях использование заголовков остается на усмотрение верстальщика: сделать много заголовков второго уровня или пропустить один-два уровня. У меня в приоритетах соблюдать иерархию, поэтому у меня будет много заголовков второго уровня.

Рассмотрим несколько примеров использования заголовков на веб страницах:

На главных страницах сайта основной заголовок принято считать название компании или сайта. Поэтому часто можно встретить сайты, где на главной странице логотип является заголовком первого уровня:

Если заголовок картинкой

Иногда для заголовков дизайнеры используют красивые (нестандартные) шрифты. Если решено было делать их картинками, тогда с помощью CSS прячем изображения в фон. Текст заголовка дублируем текстом (для устройств не поддерживающих CSS, голосовых браузеров и в некоторой степени для поисковых роботов) и прячем его (текст). Такая же техника применяется для логотипа на главной:

Подробней о технике читай в статье «Подмена текста изображением».

Нужен ли атрибут title заголовку?

Атрибут title предназначен, чтобы дать пользователю дополнительную (расширенную) информацию об объекте. Имеет смысл использовать данный атрибут для тех заголовков, когда действительно есть чем дополнить и title даст дополнительную полезную информацию пользователю. Такое использование атрибутов title сделает сайт более удобным и понятным, а на это обращают внимание и поисковые роботы. С другой стороны, повсеместное использование атрибута title, которые не несут дополнительное полезной информации могут негативно сказаться на удобстве и позициях в выдачах поисковиков. Представь себе, ты используешь голосовой браузер, который тебе прочитал заголовок. Тебе показалось этого мало и ты просишь прочитать и title. Что ты подумаешь о разработчиках сайта, если содержимое title окажется идентичным тексту заголовка? Поэтому использовать атрибут title (как и вообще любой другой элемент ли атрибут) нужно обдуманно.

К примеру возьмем страницу, с описанием товара, которую использовали выше:

Выводы

Грамотное использование HTML инструментов — это своего рода искусство. Заголовки тому не исключение. Если хочешь, чтобы твой код был лучше, чем у конкурентов, чтобы твой сайт был на более высоких позициях в выдачах поисковых систем, удели заголовкам больше внимания.

HTML5-семантика уровня текста

Помимо рассмотренных нами структурных элементов, в HTML5 пересмотрены элементы, которые раньше назывались строчными. Теперь в HTML5-спецификации они называются семантическими элементами уровня текста (http://dev. w3.org/ html5/spec/Overview. html#text-level-semantics). Рассмотрим несколько распространенных примеров.

Несмотря на то что мы часто использовали элемент для стилизации, в действительности его применение означало «выделить данный текст полужирным шрифтом». Теперь его можно официально использовать просто как средство стилизации в CSS, поскольку в HTML5-спецификации он описывается следующим образом:

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

Ладно, признаю, я тоже часто использовал лишь как средство стилизации. Мне нужно исправиться, поскольку в HTML5 говорится, что этот элемент предназначен для того, чтобы:

«…подчеркнуть свое содержимое».

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

В HTML5-спецификации элемент описывается так:

«.включает текст, произносимый другим тоном или на другой лад либо с иным отступлением от обычного текста в манере, указывающей на его особое качество».

Достаточно сказать, что элемент служит не только для того, чтобы выделить курсивом какой-нибудь текст.

Применение семантики уровня текста в нашей разметке.

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

Every year when I watch the Oscars I’m annoyed…

that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?

We’re here to put things right.

Мы определенно можем здесь кое-что улучшить. Прежде всего тег в нашем заголовке

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

Every year when I watch the Oscars I’m annoyed…

Снова взглянем на нашу начальную композицию

Страница со стилизованным заголовком.

Нам также необходимо по-другому выделить названия фильмов, однако они не должны подразумевать другую интонацию. Похоже, для этого идеально подойдет тег :

that films like King Kong, Moulin Rouge and

Munich get the statue whilst the real cinematic heroes lose out. Not very

Hollywood is it?

СТИЛИЗАЦИЯ, ПО УМОЛЧАНИЮ ПРИМЕНЯЕМАЯ К СЕМАНТИЧЕСКИМ ЭЛЕМЕНТАМ УРОВНЯ ТЕКСТА.

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

И наконец, я не шучу, когда говорю: «We’re here to put things right» («Мы здесь для того, чтобы исправить текущее положение дел»), я не паясничаю, а хочу, чтобы пользовательские агенты знали это! Поэтому наконец заключим эту фразу в тег . Вы можете заявить, что вместо него здесь следует использовать тег . В данном случае этот вариант тоже отлично подошел бы, однако я собираюсь использовать . Так-то вот! В результате код будет выглядеть следующим образом:

We’re here to put things right.

Подобно тому, как это происходит с текстом в теге , браузеры по умолчанию выделяют курсивом текст в теге , поэтому вносите соответствующие исправления там, где это будет необходимо.

Итак, мы добавили семантику уровня текста в имеющееся у нас содержимое, чтобы сделать разметку семантически более значимой. В HTML5 есть множество других семантических тегов уровня текста. Их полный перечень можно найти, заглянув в соответствующий раздел HTML5-спецификации по адресу: http://dev. w3.org/html5/spec/Overview. html#text-level-semantics.

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

Добавить комментарий
Тег(элемент) Описние тега Пример
mark Если нам требуется сделать смысловой акцент на тексте, не прибегая к его визуальному выделению, можно воспользоваться тегом mark

Как видите, в браузере Chrome и Firefox фоновый цвет текста внутри mark выделяется желтым цветом.

данные текст обернут в тег mark
time Тег time используется для даты, времени или и для того и другого

  • datetime Задает дату, время или оба значения для текста.
  • pubdate Указывает дату публикации документа.
1971-04-12
meter Используется для определения числового значения из определенного интервала

  • value Устанавливает значение. Обязательный атрибут.
  • min Задает минимально возможное значение.
  • max Задает максимально возможное значение.
  • low Определяет предел, при достижении которого значение считается низким.
  • high Определяет предел, при достижении которого значение считается высоким.
  • optimum Определяет наилучшее или оптимальное значение.
Низкая

Низкая

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

  • value Текущее значение прогресса.
  • max Максимальное значение прогресса.