Фразовый контент

Фразовый контент задаёт формат текста. Например B делает текст полужирным. Браузеры по умолчанию настроены так, что подобные тэги сразу меняют отображение текста. Правда, многие тэги хоть и имеют семантику, но отображаются например просто курсивом. Если бы мы хотели просто отобразить текст курсивом, то в теории можно было бы применить сразу несколько тэгов. Но, как ты понимаешь, это неправильно — нужно использовать семантику.

Рассмотрим несколько наиболее используемых тэгов для разметки текста.

Полужирный

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

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

Курсив

Здесь тоже два тэга: I и EM. Первый ориентирован на визуальное отличие от обрамляющего текста, а второй выделяет акцентируемый текст, имеющий некую повышенную важность (но ниже, чем STRONG).

По факту же разница настолько незначительная и невнятная, что не имеет разницы что использовать.

Цитирование

Блочный тэг BLOCKQUOTE используется для оформления длинных цитат или вставок в тексте.

<blockquote>Без труда не выловишь и рыбку из пруда.</blockquote>

Без труда не выловишь и рыбку из пруда.

Обычно BLOCKQUOTE оформляют так, чтобы он отображался отдельным визуальным блоком с отступами и играет роль «комментария» к тексту.

Тэг CITE — уже строчный тэг, используется для указания авторства или ссылки на источник цитаты. Очень часто используется внутри BLOCKQUOTE, но может и прямо в тексте.

<blockquote>
	<p>Вы действительно считаете, что Луна существует только когда вы на неё смотрите?</p>
	<div><cite cite="https://ru.wikiquote.org/wiki/Альберт_Эйнштейн">Альберт Эйнштейн</cite></div>
</blockquote>

Вы действительно считаете, что Луна существует только когда вы на неё смотрите?

Альберт Эйнштейн

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

И последний тэг для цитирования — Q. Он похож на BLOCKQUOTE, только строчный, а значит может применяться в тексте.

<p>Однажды Альберт Эйнштейн сказал: <q>Что может знать рыба о воде, в которой плавает всю жизнь?</q></p>

Однажды Альберт Эйнштейн сказал: Что может знать рыба о воде, в которой плавает всю жизнь?

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

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

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

<pre>
Наша Таня громко плачет:
Уронила в речку мячик.
— Тише, Танечка, не плачь:
Не утонет в речке мяч.
</pre>

Наша Таня громко плачет:
Уронила в речку мячик.
— Тише, Танечка, не плачь:
Не утонет в речке мяч.

Выделения в тексте

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

• code для размещения программного кода в тексте.
• var для «переменных» программ.
• kbd для клавиатурных сочетаний.
• samp для примеров кода.
• mark для выделения текста (как обычным маркером).

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

Текст текст <code>code code</code> текст текст. 
Текст текст <var>var var</var> текст текст.
Текст текст <mark>mark mark</mark> текст текст. 
Текст текст <kbd>kbd kbd</kbd> текст текст. 
Текст текст <samp>samp samp</samp> текст текст. 

Универсальный SPAN

Тэг SPAN используется там, где нужно просто каким-либо образом выделить текст. Этот тэг строчный, поэтому не создаёт переноса строки. Можно сказать, что SPAN и DIV — это основные тэги, которые используются для создания структуры html-страницы. Они не несут никакой семантики, поэтому часто являются «кирпичиками», на которых держится модульная сетка всей страницы.

Чаще всего SPAN (как и DIV) используются совместно с атрибутом class, который мы рассмотрим на следующих уроках.

Принудительный перенос

Поскольку в HTML все переносы игнорируются (кроме PRE), то придумали тэг BR, который собственно и указывает браузеру начать вывод текста с новой строчки.

<p>Lorem ipsum dolor sit, <br>amet consectetur, <br>adipisicing elit.<p>

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

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

HTML-комментарии

Если в коде нужно закомментировать какой-то фрагмент, то он обрамляется так:

<!-- комментарий -->

<!-- 
	комментарий 
	на несколько строк
-->

Задание

Теперь ты знаешь основные html-тэги для создания структуры и для оформления текста. Твоя задача немного потренироваться их использовать. Для этого возьми любую статью из википедии и попробуй её оформить с использованием новых тэгов.

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

В следующих уроках мы научимся создавать нужное нам оформление.