HTML и семантика

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

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

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

Давайте разберем использование нескольких тегов на примере статьи. По английски статья - это article. Как здорово, что в HTML5 у нас для этого существует специальный тег, который так и называется  - <article>. Дальше: вы статью без заголовка видели? Я - нет. Поэтому, и тег <article> предполагает наличие заголовка. Вот тут у нас выбор широкий - заголовков в HTML, причем не только в 5-м, а во всех его версиях ах 6 штук. Давайте на них посмотрим (открыть в отдельной вкладке):

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

Какой же выбрать для статьи? Внешне самым бросающимся в глаза является тег <h1>. Он крупный, текст в нем жирный - сложно не заметить такой заголовок. И действительно, статью имеет смысл начать с заголовка <h1>. Следует отметить, что это самый важный заголовок на странице - на него в первую очередь обращают внимание пользователи и поисковики, из которых чаще всего пользователи и узнают, о том, что статья с таким заголовком появилась на вашем сайте. Именно название статьи (заголовок в синтаксисе HTML) будет выведен в качестве ссылки на статью при поиске.

Дальше - в статье должен быть текст. Когда вы читаете текст статьи в газете, то наверняка обращаете внимание, что он разбит на абзацы. То есть абзац - эта такая структурная единица текста, которая доносит до вас какую-ту мысль автора по теме, объявленной в заголовке статьи. Поэтому и в HTML тот текст, который что-то вам рассказывает (впечатления о турпоездке, например), поясняет (статья о психологии отношений) или описывает (характеристики товара в интернет-магазине), будет разбит на абзацы, которые в HTML определяются тегом <p>.

Поскольку у вас далеко не всегда будет реальный текст статьи, а попробовать "упаковать" текст в абзацы очень хочется, то специально для верстальщиков был предложен псевдолатинский текст-"рыба" Lorem ipsum..., который для большинства людей, не знакомых с латынью не несет вообще никакой смысловой нагрузки, зато хорошо и быстро помогает заполнить любые теги текстом. Особенно здорово это получается в современных редакторах кода с использованием плагина Emmet. Например, 3 абзаца в коде ниже были созданы за несколько секунд с помощью аббревиатуры Emmet p*3>lorem45:

Давайте посмотрим, как это выглядит в сочетании с уже рассмотренными тегами <article> и <h1>:

Давайте посмотрим, как это будет выглядеть на странице (открыть в отдельной вкладке):

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

Идем дальше. Статья с тремя абзацами - не очень интересно. Да и одного заголовка нам недостаточно. Хотелось бы, например, в этой статье рассказать, откуда появился текст Lorem ipsum. Поэтому нам нужен подзаголовок и еще несколько абзацев,  которые уже будут раскрывать суть подзаголовка, но находится в рамках той темы, что задана основным заголовком <h1>.

Поскольку подзаголовки не предусмотрены в HTML, теперь становится понятным, зачем нужны аж 6 уровней заголовков: чем больше цифра рядом с <h...>, тем меньше значение (или вес) этого заголовка, и тем позже, скорей всего, он встретится в разметке страницы. Для подзаголовка нам понадобится тег <h2>, а абзацы все так же будут размещены в тегах <p>.

Статья увеличивается в размерах. Мы добавим ещё заголовки <h3>, чтобы раскрыть смысл статьи и дать нашим пользователям больше информации о происхождении текста-"рыбы", начинающегося с Lorem ipsum.

Ничего особо сложного, не так ли? И термин "семантика в HTML" уже не выглядит пугающим. Наш текст имеет хоть и очень простую,  но логичную структуру. Кроме того, с такой структурой ваш текст, скорей всего, понравится и поисковикам, и  СЕО-шникам, т.е. специалистам по оптимизации страниц сайтов под поисковые системы. Ещё одной хорошей новостью является то, что W3C-валидатору  наша разметка тоже нравится.

Валидация страницы без ошибок

Где же ложка дегтя? И есть ли она? К сожалению, есть. Наша статья абсолютно безликая. Ей не хватает выделений курсивом, жирным шрифтом, цветом. Текст, хоть и разбит на заголовки, но особого желания читать его не вызывает. Явно не хватает CSS-форматирования.

Блочные и строчные и теги

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

К блочным тегам относят такие теги, которые в виде прямоугольных блоков размещаются в структуре страницы и по умолчанию занимают все пространство внутри родительского элемента. Обычно родительским элементом в начале изучения HTML является <body>, поэтому блочные теги располагаются на всю ширину открытого окна браузера, которое занимает <body>, начиная от левой его границы и заканчивая правой вне зависимости от того, сколько текста в них находится. В Инспекторе свойств браузера (F12 или CTRL + SHIFT + I) при наведении на любой блочный тег (кстати, теги имеют второе название - элементы), можно увидеть, что голубая полоса, определяющая их размер по ширине, занимает все пространство внутри <body>. На скриншоте видно, что размер <h2> из 4-х слов совпадает с размером абзаца со значительно большим количеством слов именно по ширине (обведенные красной рамкой цифры слева над текстом).

Справа внизу в Инспекторе свойств вы можете видеть вложенность элементов. И <h2>, и <p> являются дочерними (вложенными) элементами для сначала для <article>, потом для <body> и для <html>. Соответственно, <html>, <body> ,  а затем <article> являются родительскими элементами для <h2> и <p>.

Блочные теги, как бетонные блоки при стройке дома помогают создать основную структуру страницы, определить ее основные элементы. Именно, поэтому именно блочными являются такие важные для страницы теги, как <header>, <main>, <aside>, <section>, <footer>, <article>, <nav>. Это именно семантические теги - теги, которые определяют шапку (<header>) и подвал сайта (<footer>), его основное содержимое (<main>), содержимое статьи (<article>), какие-то разделы (<section>) или дополнительное содержимое для вспомогательного контента или рекламы (<aside>). Также сложно представить сайт без навигации, за которую отвечает тег <nav>. В том случае, если ваш контент нельзя определить, как один из перечисленных элементов с точки зрения его содержимого, такой блок следует "упаковать" в тег <div>  с атрибутом class или id, для которого в css задается форматирование.

Пример страницы с разметкой блочными тегами (открыть в отдельной вкладке):

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

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

Логическое предназначение тегов и их визуальное отображение

Здесь хотелось бы поговорить еще о строчных тегах типа <b> или <strong>, <i> или <em>. И <b>, и <strong> делают текст жирным, а <i> и <em> придают курсивное начертание тем словам или фразами, которые в них помещены. Зачем нам 2 разных тега, которые делают одно и то же? Какой в том смысл и в чем разница между ними?

Ответ несколько сложнее, чем хотелось бы. С одной стороны - визуальной, разницы между <b> и <strong> нет никакой. Текст не станет жирнее, если вы предпочтете <strong> тегу <b>. Тут разница заключается в самом значении тега, т.е. опять-таки в семантике. Тег <b> был назван так от английского слова bold, т.е. жирный. С семантической точки зрения текст, помещенный в эти теги, сообщает браузеру, что он используется для привлечения внимания к тексту, при этом важность или значение текста не играют роли. А визуально текст  выделен жирным. Текст в тегах <strong> показывает поисковикам, прежде всего, что он "усилен", т.е. выделен, как более важный (сильный) по сравнению с другим текстом без такого тега. То есть тег <strong> выступает, как логический призыв обратить внимание на выделенный им текст, а уж чисто физически, или визуально, выглядит, как текст с жирным начертанием. В этом и заключается разница между тегами <b>  и <strong>.

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

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

Кстати, в примере есть вложенность элементов <em> в <strong>, а также <i> в <b>. И в этом случае вы увидите текст в цвете того тега, который является наиболее глубоко вложенным. Здесь работает правило "матрешки": первый открытый тег закрывается последним.

Если этот порядок не соблюдать , то даже редактор кода вам укажет подсветкой на неверное форматирование.

Определенное логическое форматирование выполняет, например, такой нечасто используемый тег, как <del>, который заменил собой отмененный в стандарте HTML5 тег <strike>. Оба тега перечеркивают текст, но <strike> (происходит от англ. strikethrough — зачёркнутый) делал это чисто визуально в HTML4, а <del> указывает на то, что текст в нем был отменен, и сейчас используется некий новый вариант. Кстати, для нового варианта, вставленного вместо старого можно использовать логический тег <ins> (от англ. insert — вставить). Он предназначен для выделения текста, который был добавлен в новую версию документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны плюс выделяет текст в виде подчеркивания (замена устаревшему тегу <u>, произошедшему от англ. underline - подчеркнутый).

Для того чтобы оформить какую-то часть текста визуально, нужно использовать элемент <span> с добавленными к нему стилями в виде атрибута style или class, а остальные теги следует использовать для какого-то логического выделения информации.

Теги и отступы

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

Кроме того, у многих появляется большое искушение добавить много тегов <br>, которые формируют перенос строки для того, чтобы увеличить расстояние между какими-то элементами. Вместо этого нужно назначить для блочного элемента стили, в которых отступы будут формироваться с помощью css-свойства margin.

В примере ниже вы увидите неверное и верное применение тегов (открыть в новой вкладке).

Семантические ошибки форматирования

Мы рассматривали очень простую верстку на примере статьи с несколькими абзацами и заголовками. В ней были допущены некоторые ошибки, которые чаще всего допускают начинающие верстальщики, на которые хотелось бы обратить внимание. Они, как правило, не видны пользователю на сайте, так как браузеры стараются вывести информацию в приемлемом виде при любых ошибках форматирования. Зато их не пропустит W3C-валидатор и тот человек, который будет оценивать ваш код при приеме на работу. С поисковиками тоже спорный вопрос, т.к. они распределяют информацию по разделам своей базы данных по только им известному алгоритму, но при этом 100% обращают внимание на ряд тегов, внутри которых она размещена, особенно на заголовки 1-4-го уровней.

В статье был сделан ряд ошибок, которые мы сейчас разберем согласно рекомендациям валидатора:

Давайте разберем все эти ошибки.

Ошибка 1. Нельзя вкладывать один абзац в другой. Это противоречит логике, а значит семантике разметки. Абзацы - равноправные элементы для форматирования текста, поэтому они должны идти друг за другом или за заголовками, или за фотографиями, но никак ни друг в друге. Задумайтесь - разве в школе вы бы смогли написать один абзац внутри другого? Вот и в HTML-разметке так делать нельзя.

Ошибка 2. Нельзя вкладывать абзац в заголовок любого уровня. Опять таки вспомним школу. Заголовок - для всего сочинения, а дальше абзацы. Нелогично (читай - несемантично) пытаться в заголовок отправить абзац.

Ошибки 3 и 4. Нельзя оборачивать блочные теги в строчные, т.е. ставить <strong>, <b>, <em>, <i> и другие теги с display: inline ДО блочных. Исключение - теги <a> (ссылки), внутрь которых можно помещать любые блоки. В плане сравнения - блочный тег похож на прозрачный пакет, в котором есть несколько сложенных в определенном порядке покупок. Вы можете мешать их местами, переставляя слова в нужном порядке, оборачивать покупки в другие пакетики, но если вы вытащите покупку из основного пакета, она, вероятнее всего, потеряется или будет вам мешать.

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

Обратите внимание, что редактор кода показал красным цветом неправильно отформатированные теги.

Кстати, текст с таким форматированием и в браузере смотрится странно:

Заголовок внутри абзаца смотрится странно

"Лишнее" форматирование

В этом тексте есть еще одна ошибка, пропущенная валидатором, т.к. она не является неверной с его точки зрения. Речь идет о тегах <b> или <strong> внутри заголовков. Если вы их добавите - это не будет считаться ошибкой, но с точки зрения логики - зачем делать жирным заголовок, если в его css-свойствах по умолчанию уже существует правило для жирного начертания?

Стили по умолчанию и их переопределения

На скриншоте видно, что и у <b>, и у <h3> в таблице стилей, которую всегда загружает браузер, чтобы отобразить теги в соответствии с рекомендациями стандарта HTML (user agent stylesheet), есть css-свойство font-weight: bold, которое переопределяется для <h3> (зачеркнуто) и работает для <b>. Здесь возникает вопрос - зачем нужны эти манипуляции и лишний тег, если визуально ничего не меняется? Если нужно назначить какое-то css-форматирование, то имеет смысл сделать это для тега <h3>, а не добавлять в него <b>.

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

Тег b внутри заголовка

Кстати, на этом скриншоте код был "сфотографирован" прямо в браузере, а не в редакторе кода. Для этого на любой странице вы можете нажать CTRL+U или выбрать из контекстного меню  по правому клику пункт "Просмотр кода страницы"  в Chrome ("Исходный код страницы" - Mozilla Firefox) и т.п.

Устаревшие теги и атрибуты

На начальном этапе, как правило, не хватает понимания, как сделать то или иное форматирование. Поскольку в свое время форматирование и HTML были едины, то в сети до сих пор можно увидеть рекомендации по использованию таких тегов, как <font>, <center>, добавление бегущей строки с помощью <marquee>, а также выравнивания изображений или текста с помощью атрибута align, атрибут bordercolor для установки цвета рамки для изображения вместо css-свойства border-color, атрибутов hspace и vspace вместо css-свойства margin. Все они на данный момент являются устаревшими (англ. - obsolete).

В примере ниже собраны все возможные устаревшие теги и атрибуты (открыть в новой вкладке).

На скриншоте вы можете увидеть все ошибки, выданные относительно этого файла W3C-валидатором. Их очень много.