Физическое и логическое форматирование

Теги форматирующие текст подразделяются на теги физического и теги логического форматирования.

Например, тег <b>, так же, как и тег <strong> делает текст полужирным, но тег <strong> несёт дополнительный смысл: на этот текст надо обратить внимание особо. И действительно, поисковые системы особо отмечают, что выделенное может быть ключевым словом.

Аналогично теги <em> и <i>. Оба выделяют текст курсивом, но первый несёт логическую нагрузку выделения текста.

Выше описаны наиболее распространённые теги физического и логического форматирования. Теперь редкие, но имеющие вероятность встретиться.

Редкоиспользуемые теги логического форматирования

<abbr> — тег аббревиатуры. Это тег логического форматирования. В тексте он выглядит так: CSS. Вот код приведённого примера:

<abbr title="Cascading Style Sheets">CSS</abbr>

Нетрудно заметить, что в параметре title можно указать расшифровку аббревиатуры.

Ещё один тег логического форматирования: <acronym>. Почти то же самое. В него заключают (если есть необходимость) устоявшиеся сокращения из заглавных букв. Например ЦУМ.

<acronym title="Центральный универмаг">ЦУМ</acronym>

Где можно применть эти два тега? Ну, например, в проекте, который претендует на статус словаря или энциклопедии. И чтобы поисковая система поняла, что сайт некоммерческий и имеет ценность первоисточника, можно каждую аббревиатуру и акроним заключать в соответствующий тег с пояснением в праметре title.

Логический тег <address>. Физически выделяется курсивом, но поисковая система поймёт, что информация внутри — это адрес.

<code> — тег логического форматирования, указывающий, что содержимое внутри является кодом некоторой программы. Все примеры в этом курсе заключены в этот тег. Без дополнительного стилевого оформления заключённый в него текст будет набран моноширинным шрифтом.

<blockquote> — тег обозначения цитаты. Имеет особый контекст восприятия с точки зрения SEO. Дело в том, что одной из задач поисковой системы является установление первоисточника текста на сайте. Если вы копируете большой кусок текста с другого сайта, лучше заключить его в этот тег, чтобы система поняла, что вы не плагиатом занимаетесь, а цитируете. Ниже показано, как он выделяется:

Тег <blockquote> предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу.

Листинг примера:

<blockquote cite="http://htmlbook.ru/html/blockquote">Тег <blockquote> предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу.</blockquote>

Ещё для цитат придумали теги <q> и <cite>. Если <blockquote> заключает в себя сразу блок, по сути подменяя собой параграф <p>, то эти теги нужны, чтобы заключать в себя части текста внутри параграфа. Вот здесь применён тег <q>, а здесь применён тег <cite>. Как видите, разница в наличии и отсутствии кавычек.

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

Редкоиспользуемые теги физического форматирования

Из тегов физического форматирования стоит упомянуть <s>. Этот тег используют, чтобы зачеркнуть текст.

Ещё есть тег <tt>, делает текст моноширинным, но в отличии от <code> это не несёт за собой какой-либо смысловой нагрузки.

Давно запрещённый, но заслуживающий отдельного упоминания старичок <font>. Видел его применения года до 2014-го включительно. Он полюбился программистам за то, что позволял менять стилевое оформление не прибегая к каскадным таблицам стиля. О которых расскажу позже. Имел атрибуты color, face, size. Соответственно, цвет, шрифт и размер.

Вот какой-то такой пример использования.

<p>Вот <font color="green">какой-то</font> <font size="7">такой</font> <font face="Georgia">пример использования</font>.</p>

Обратите внимание, данный документ набран в стандарте HTML5, который не поддерживает тег <font>, однако, браузер интерпретирует его вполне адекватно.

А ещё вот такой весёленький тег был. Его тоже запретили.

<marquee>А ещё вот такой весёленький тег был. Его тоже запретили.</marquee>

Запретили тег <marquee> из-за мельтешения, которое он создавал на странице.