HTML теги для оформления текста
Для разметки текста в html используется набор тегов позволяющий разделять текст на логические части, акцентировать внимание читателя на отдельных его частях, а также оптимизировать содержание для более удобного понимания поисковыми роботами, что приводит к улучшению ранжирования страницы текста в поисковой выдаче по ключевым запросам.
Сразу отмечу, что все элементы для форматирования текста рассмотренные в данной статье (кроме br) являются парными. Тоесть для обрамления содержимого тегом должен присутствовать как открывающий тег , так и закрывающий . Пример:
h3>Правильно написанный заголовок текстаh3> p>Абзац с переносом строки посреди абзаца.br> Пример использования непарного тега внутри парного.p> Формирование структуры текста (блочные элементы). Теги заголовков и абзацев.
Теги h1-h6 отвечают за выделение текста в виде заголовков. Более подробно о их семантичеком влиянии и важности для построения логической структуры страницы для поисковиков написано тут.
Если говорить о них вкратце, то заголовки страницы имеют ключевую роль во внутренней оптимизации страницы для поисковиков. В связи с этим формулировки заголовков на странице должны быть максимально приближены к ключевым запросам по которым Вы собираетесь продвигать статью в поисковой выдаче.
Визуально заголовки выделяются жирным начертанием и большим размером шрифта относительно остального текста.
Тег p отвечает за выделение абзацев. Вместе с тегами заголовков тег p является блочным элементом оформления текста, потому при его использовании каждый последующий абзац начинается с новой строки, чего не происходит при использовании строчных элементов.
HTML теги для разметки текста (строчные элементы)
- span — схож по своему смыслу с тегом p, но является строчным элементом. Обычно используется для обозначения части текста внутри абзаца. Зачем это нужно? Все достаточно просто- обозначенному тексту в дальнейшем через CSS можно задать оформление отличающееся от оформления остального текста.
- br -делает перенос строки. ТЕГ НЕ ПАРНЫЙ (тобишь закрывающего тега у него нет). Примерно то же самое, что если бы Вы нажали Enter в Верде. В отличие от переноса, создаваемого блочными элементами, не несет на себе никакой логической нагрузки. Используется исключительно для более красивого оформления текста. Рекомендуется избегать его использования без крайней необходимости, поскольку по-сути он просто засоряет код, а для переносов в тексте нужно его просто разбивать на абзацы.
- strong — выделяет шрифт жирным. Служит для расстановки логических ударений в тексте для поисковых роботов. Широко используется для внутренней оптимизации текста. Ключевые фразы в тексте рекомендуется обрамлять в этот тег, чтобы робот лучше понимал о чем статья. ВНИМАНИЕ! Важно не переборщить — если схожие ключи в тексте попадаются больше 3-5 раз, то это может быть расценено как переоптимизация текста и страница с текстом будет занижена в поисковой выдаче.
- b — визуально ничем не отличается от стронга, но не несет в себе никакой смысловой нагрузки для поисковика. Используется для выделения частей текста исключительно для тех, кто будет его читать. К примеру, если необходимо выделить фразу не содержащую ключевых слов, но способную облегчить понимание структуры текста пользователю.
- em — делает текст внутри тега курсивом. Также как и стронг используется для внутренней оптимизации текста под поисковое продвижение, только обладает меньшим весом в сравнении с ним.
- i — визуально ничем не отличается от . Не несет смысловой нагрузки для роботов, используется для увеличения удобства прочтения текста пользователями. Аналог тега , только для курсива.
- ins— используется для подчеркивания текста. Выделяет текст как для пользователя, так и для поисковика.
- u — визуально тождественен предыдущему тегу. Выделяет текст только для пользователя.
- tt — выводит текст моноширинным шрифтом. Не несет в себе смысловой нагрузки. Моноширинный означает, что для всех символов шрифта ипользуется одинаковое пространство при написании.
- pre — блочный элемент. Используется для того, чтобы сделать моноширинными большие участки текста. Внутри него можно применять любые теги для форматирования текста, кроме sub и sup.
- sub — выводит текст как нижний индекс ( уменьшает шрифт текста и выводит его немного ниже уровня строки).
- sup — выводит текст как верхний индекс ( уменьшает шрифт текста и выводит его немного выше уровня строки).
- strike (s) — делает текст перечеркнутым. Эти два тега абсолютно аналогичны по своему содержанию. Современная документация html вообще осуждает их использование, говоря о том, что для перечеркнутого текста можно использовать css, а эти теги больше просто засоряют код.
Использование нескольких тегов одновременно
Мы ознакомились с основными тегами для оформления текста. Их можно применять не только по-отдельности а и один внутри другого, главное при этом помнить основной принцип вложенности тегов — тег, который был открыт первым должен быть закрыт последним. Тобишь:
p>b>i>Жирный текст написанный курсивомi>b>p> Верно--> p>b>i>Жирный текст написанный курсивомb>i>p> Не верно--> Теги находящиеся внутри других тегов формируют порядок вложенности. Так, в рассмотренном примере тег i имеет второй уровень вложенности относительно тега p.
ОБРАТИТЕ ВНИМАНИЕ! Использовать строчные элементы внутри блочних разрешено, в то время как блочные внутри строчных- нет. Хоть браузер и отразит все корректно, если Вы, к примеру, используете тег p внутри тега b. Это будет не верно с точки зрения документации html. Тобишь такой код будет содержать ошибку и Вы это можете спокойно проверить воспользовавшись любым сервисом валидации html кода.
Вопросы для самоконтроля:
- Какие теги форматирования текста являются блочными, а какие строчными? В чем между ними разница?
- Какие существуют способы выделения текста жирным шрифтом? В чем между ними разница?
- Какие существуют способы выделения текста курсивом? В чем между ними разница?
- Как правильно переносить строки в html?
- Как формируется порядок вложенности тегов?
HTML теги для оформления текста
Текст является важность частью сайтов, умение правильно его оформить очень важная составляющая при его создании. Использование правильных тегов для текста позволит не только улучшить его визуальное отображение, но также значительно повлияет на оптимизацию страницы для поисковых систем.
В данной статье перечислены только те теги, которые рекомендованы для использования актуальной спецификацией html5.
Структура
h1, h2, h3, h4, h5, h6 — блочные теги предназначены для указания заголовков. Заголовков в html есть 6 уровней, от h1 (первый уровень) до h6 (последний уровень), каждый визуально выделен жирным шрифтом и его соответствующим размером. Заголовки должны описывать содержание, это положительно влияет на оптимизацию сайта. Хорошей практикой считается указывать только один заголовок первого уровня h1, остальных может быть несколько. Заголовки должны указываться по иерархии, на первом уровне заголовок h1 дальше подзаголовок h2 и так далее
p — абзац. Блочный тег, разделяет текст на отдельные абзацы, в конце добавляется отступ
Форматирование
b — визуально выделяет текст жирным начертанием
strong — отображает текст жирным начертанием, логически указывает на важность текста. Может быть использован для выделения ключевых слов для оптимизации поиска
i — задает курсивное начертание текста
em — задает курсивное начертание текста, логически указывает на важность текста
pre — сохраняет форматирование текста (не удаляет пробелы и переносы строк)
sup — текст отображается как верхний индекс
sub — текст отображается как нижний индекс
small — уменьшает текст на условную единицу
address — внутри указывается адрес (физический адрес, телефон, почта), обычно отображается курсивным шрифтом
mark — отображает текст как выделенный
abbr — оборачивает аббревиатуру (сокращение), в атрибуте title указывается ее расшифровка, которая показывается при наведении
kbd — отображает название клавиш или текст набранный пользователем, обычно отображается моноширинным шрифтом
dfn — внутри пишется название нового термина, далее идет его пояснение, обычно отображается курсивным шрифтом
ins — выделяет новый текст, который был добавлен при обновлении содержания, обычно отображается как подчеркнутый текст
del — выделяет старый текст, который был удален при обновлении содержания, обычно отображается как зачеркнутый текст
Цитаты
q — отображает текст как цитату, обрамляет его кавычками
blockquote — отображает текст как цитату. По сравнению с тегом используется для длинных цитат, оформляется отступами
cite — выделяет цитату на материал из другого источника, обычно отображается курсивным шрифтом
Списки
ul — маркированный список. Каждый элемент списка оборачивается тегами li
ol — нумерованный список. Каждый элемент списка оборачивается тегами li
dl — список терминов. Внутри используются теги: dt — название термина, dd — описание термина
Отображение кода
code — оборачивает программный код, обычно отображается моноширинным шрифтом, не учитывает переносы строк и дополнительные пробелы
var — оборачивает переменную из программного кода, обычно отображается моноширинным шрифтом
samp — оборачивает текст, которые является результатом вывода скрипта или программы, обычно отображается моноширинным шрифтом
Другие теги
span — строчный тег. Сам по себе не имеет никакого логического или визуального смысла. Часто используется внутри абзаца (
) для выделения части текста. Если часть текста нужно стилизовать по другому, ее можно обернуть в span, указать класс и в css добавить нужные стили
br — переносит текст на новую строку
wbr — указывает где можно сделать перенос слова
hr — вставляет горизонтальную полосу
bdo — задает направление текста, в атрибуте dir указывается направление: rtl — справа на лево, ltr — слева направо
bdi — запрещает изменение направления текста, по аналогии с bdo направление указывается в атрибуте dir, по умолчанию значение auto
Обсуждение ( 0 )
Войдите или зарегистрируйтесь для того чтобы оставлять комментарии