Сегодня нет особой нужды знать HTML-теги для текста. В любой админке есть визуальный редактор, который автоматически выставляет все необходимые теги. Проблема в том, что форматирование контента на сайте значительно отличается от работы с офисными приложениями. Здесь недостаточно просто придать тексту привлекательный вид. От правильного оформления веб-страницы зависит не только ее корректное отображение, но и возможность продвижения в поисковиках.
HTML-теги и атрибуты: основы синтаксиса
В любом тексте присутствует скрытый код, который как бы «объясняет» компьютеру», как он должен отображаться на экране. Информация может быть записана при помощи набора универсальных элементов. HTML-теги для текста по сути представляют собой команды, которые добавляют определенные блоки на страницу или изменяют их внешний вид. Правильная форма записи будет выглядеть примерно следующим образом:
<palign=center>
</p>
Стоит сразу обратить внимание на то, что не все теги являются парными. К примеру, теги <BR> (пропуск строки) или <HR> (добавление горизонтальной линии) вообще не нужно закрывать.
Почему нельзя копировать текст в редактор сайта из других программ?
Многие современные офисные программы используют для текста те же самый HTML-теги. Но несмотря на это, родной код в 99% случаев оказывается не пригоден для веб-страниц. Даже если документ нормально отображается в самом приложении, форматирование может сбиться при вставке фрагмента на сайт. Кроме того, поисковики могут не адекватно анализировать содержимое страницы из-за большого количества лишних тегов и атрибутов. Это в свою очередь может значительно затруднить продвижение вашего интернет-ресурса.Чтобы получить релевантный и чистый код, сначала необходимо очистить текст от HTML-тегов, созданных обычным редактором. Существует несколько способов это сделать. Можно «прогнать» статью через «Блокнот», и уже только после этого вставить его на сайт. Приложение сотрет весь HTML. После этого придется заново форматировать весь текст вручную или при помощи инструментов редактора. Также можно писать и публиковать статьи через Live Writer. Данный редактор блогов способен сразу сгенерировать правильный код. В отдельной вкладке можно просмотреть, как текст будет выглядеть непосредственно на сайте. Можно использовать HTML-Cleaner. Данный онлайн-сервис не уничтожает целиком весь код, а только убирает лишние фрагменты. При помощи фильтров вы можете выбрать, какие теги нужно сохранить. Здесь присутствует мощный визуальный редактор для форматирования, который может добавить в код уже оптимизированные команды. Прежде чем опубликовать новую запись, нужно всегда проверять HTML. Давайте рассмотрим основные теги.
Абзацы
Такой элемент, как абзац, присутствует практически во всех статьях. Каждый абзац должен располагаться внутри такого контейнера. Это позволяет упростить процесс форматирования и сохранить на всех страницах единый стиль. Тег для удобства всегда пишется с новой строки.
Выравнивание
Сегодня уже давно не используется отдельный HTML-тег «Выравнивание-текста». Вместо него был создан универсальный атрибут ALIGN. Для изменения положения текстового блока на страницы, можно выбрать одно из трех значений: CENTER, RIGHT, LEFT. Таким же образом можно задать выравнивание других элементов, например, заголовков. В некоторых случаях для выравнивания используются другие теги. Например, текст по центру можно расположить при помощи элемента <CENTER> … </CENTER>. В чем удобство отдельного тега? Он в отличие от атрибута работает с любым контентом, в том числе с видео, flash, фото и так далее.
Заголовки и подзаголовки
С помощью структуры подзаголовков можно создать логичную структуру контента. Если текст разбит на смысловые блоки, читателю будет проще сконцентрироваться на содержании и усвоить новую информацию. Также поисковики анализируют заголовки для того, чтобы понять, по каким запросам можно продвигать страницу. Именно по этой причине SEO-специалисты рекомендуют использовать в них тематические ключи. В HTML может использоваться шесть уровней подзаголовков – от <H1>до<H6>.
— <H1> … </H1> — основной заголовок. Может быть в тексте только один. Как правило, данный заголовок содержит основной ключевик.
— <H2> … </H2> — Подзаголовки второго уровня разбивают текст на отдельные блоки. Например, если вы создаете какой-то рейтинг, вам можно будет сделать несколько подзаголовков второго уровня.
— <H3> … </H3> — подзаголовки третьего уровня нужны в том случае, если между двумя <H2> разбивается на блоки. В том случае, если речь идет о рейтинге, то на уровне <H3> могут быть указаны критерии оценки для каждой конкретной модели.
— <H4>, <H5>,<H6>- крайне редко используются на практике. В данном случае используется тот же принцип: подзаголовки должны быть вложены в блог с подзаголовком высшего уровня. Главное соблюдать правильность иерархии. Нельзя использовать для однородных по смыслу блоков подзаголовки разных уровней.
Списки
Любые инструкции и перечисления лучше оформлять в виде списковпри помощи специальных HTML-тегов для текста. Структура таких блоков довольно проста. Вначале нужно определить тип списка: <UL> … </UL>- маркированный список, <OL> … </OL> — нумерованный список. Все элементы списка должны находится между открывающим и закрывающим тегами.
Атрибуты шрифта
Что можно поменять с помощью HTML-тега? Без добавления классов в CSS вы можете изменить размер текста, его цвет и шрифт. Это довольно удобно, если вам нужно выделить какой-то фрагмент или предложение
<FONT> имеет следующие атрибуты:
— Face: данный атрибут позволяет менять шрифт. Имеется возможность перечислить через запятую сразу несколько вариантов (Verdana, Tahomaи так далее). Если у пользователя не установлен какой-то шрифт, система просто будет использовать альтернативный вариант.
— Size: применяется для увеличения или уменьшения размера текста. В кавычках можно указать значение от 1 до 7.
— Color. Можно выбрать один из стандартных оттенков в зависимости от дизайна или ввести на выбор код любого цвета.
Абзацы, отформатированные с помощью <FONT>не стоит использовать вместо подзаголовков. Лучше задать те же самый параметры оформления при помощи правильного тега.
Как выделить текст?
Большие фрагменты текста могут быть довольно тяжелы для восприятия, даже если в них присутствует разбивка по абзацам. Чтобы привлечь внимание читателей и подогреть их интерес, можно графически выделять ключевые моменты текста. Рассмотрим несколько команд, которые помогут вам решить эту задачу.
<B> … </B>: данный тег пользуется большой популярностью. Жирный текст сразу бросается глаза. Таким способом можно выделять важные факты и тезисы. Пользователи часто путают теги <B> и <STRONG>. Визуально разницы между ними практически нет, но работают они немного по-разному. Тег <B> меняет внешний вид текста. Тег <STRONG> может выполнять функцию «указателя». Он используется для выделения важных фрагментов, например, для ключевых слов и фраз для SEO.
<I> … </I>: строгий и изящный курсив отлично подходит для оформления иностранных слов, терминов и цитат. Наклонным текстом в серьезных изданиях обычно выделяют названия произведений.
<U> … </U>: данный тег вызывает довольно много споров. Подчеркивание текста используется довольно редко. Исторически данный способ выделения закрепился за гиперссылками. Если вы используете данный тег в статьях, то обязательно нужно учитывать, что он подходит только для небольших фрагментов, не более одной строки.
<S> … </S>: довольно интересный тег, при помощи которого часть текста можно сделать зачеркнутой. Особенно актуален данный тег в рекламе. Он может использоваться для того, чтобы почеркнуть разницу между старой ценой и новой.
<BIG> … </BIG>: данный тег используется для увеличения размера шрифта без необходимости внесения дополнительных параметров.
<SMALL> … </SMALL>: работает по такому же принципу, что и предыдущий тег. Расположенный внутри него текст будет по размеру меньше относительно основного текста.
<SUP> … </SUP>: правильнее будет назвать данный формат верхний индекс. Данный тег в основном предназначается для сносок и математических степеней. С помощью него можно уменьшить шрифт и сместить выделенный фрагмент текста вверх.
<SUB>… </SUB>: нижний индекс обычно встречается в формулах. Выделенный таким образом фрагмент будет располагаться ниже основного текста.
Смысловые контейнеры
Поскольку некоторые блоки встречаются во многих текстах, были созданы специальные теги. Это позволило значительно упростить процесс форматирования. Каждый тип контента имеет определенный набор стилей. Достаточно просто выделить фрагмент текста и указать, какую информацию он содержит.
<CODE>… </CODE>: данный тег используется для добавления компьютерных кодов. Он будет очень полезен при написании статей по программированию. Команды в данном случае не будут выполняться и отображаются, как простой текст.
<CITE> … </CITE>: данный тег может использоваться для оформления цитат и выдережек из интервью.
<BLOCKQUOTE> … </BLOCKQUOTE>: тег выносит в отдельный блок часть текста. Выделенный фрагмент по умолчанию имеет большой отступ слева. В CSS вы можете поменять стиль начертания, размер и цвет текста.
<ADDRESS> … </ADDRESS>: тег, в котором содержится информация об авторе. Здесь также могут содержаться ссылки.
<HR> разделительная линия
Обозначить логическое завершение большого раздела можно при помощи горизонтальной черты. Тег <HR> не относится к парным. Это означает, что при использовании данного тега не требуется закрывающий элемент формата </>. Разделитель можно сделать короче при помощи атрибута WIDTH.