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

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

HTML-теги и атрибуты: основы синтаксиса

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

По сути, HTML-теги для текста — это команды, которые добавляют на страницу определённые блоки или меняют их внешний вид. Правильный формат записи выглядит так:

Обратите внимание, что не все теги являются парными. Например,
(пропуск строки) или

---

(добавление горизонтальной линии) не нужно закрывать вообще.

Почему нельзя копировать статьи из Word и других программ в редактор сайта

Хотя современные офисные программы используют те же HTML-теги для текста, в 99% случаев родной код непригоден для веб-страниц. Даже если в самом приложении документ отображается нормально, при вставке на сайт форматирование может сбиться. Кроме того, из-за большого количества лишних тегов и атрибутов поисковики не могут адекватно проанализировать содержимое страницы. Что, в свою очередь, затрудняет продвижение вашего ресурса.

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

1. “Прогнать” статью через "Блокнот" и только после этого вставить на сайт. Приложение стирает весь HTML, так что после этого придётся форматировать текст заново (с помощью инструментов редактора или вручную).
2. Писать и публиковать статьи через LiveWriter. Популярный редактор блогов сразу генерирует правильный код. А в отдельной вкладке можно посмотреть, как будет выглядеть текст на сайте.
3. Использовать HTML Cleaner. Этот онлайн-сервис уничтожает не весь код целиком, а только лишние фрагменты. С помощью фильтров вы выбираете, какие теги нужно сохранить. Здесь же есть мощный визуальный редактор для форматирования, который добавляет в код уже оптимизированные команды.

Абзацы

Данный элемент присутствует практически во всех статьях. Каждый абзац должен располагаться внутри такого контейнера — это упрощает форматирование и позволяет сохранить единый стиль на всех страницах сайта. Для удобства тег

Всегда пишут с новой строки.

Выравнивание

Отдельный HTML-тег "Выравнивание текста" уже давно не используется. Вместо этого был создан универсальный атрибут ALIGN. Чтобы изменить положение текстового блока на странице, необходимо выбрать одно из 3-х значений — CENTER, RIGHT или LEFT. Точно так же можно задать выравнивание для других элементов — например, заголовков.

В некоторых ситуациях для выравнивания используют другие теги например, можно расположить с помощью элемента

.... Чем удобен отдельный тег? В отличие от атрибута, он работает с любым контентом, включая фото, видео, flash и т. д.

Заголовки и подзаголовки

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

В HTML используются шесть уровней подзаголовков — от

до

. В этой системе существует чёткая иерархия:

• ...

  . Основной статьи, товара в интернет-магазине и т. д.). В тексте может быть только один

  . Как правило, он содержит главный ключевик.

• ...

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

  с названиями разных моделей.

• ...

  . Третий уровень нужен в случае, если текст между двумя

  также разбивается на небольшие блоки. В нашем примере это могут быть критерии оценки — "Производительность", "Память", "Видеокарта" и т. д. для каждой модели.

• ,

  ,

  . На практике встречаются крайне редко. Но общий принцип тот же — они должны быть “вложены” в блок с подзаголовком высшего уровня.

Следите за сохранением правильной иерархии. Возвращаясь к нашему примеру, это означает, что нельзя сразу вписывать названия моделей как

или

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

).

А вот схема, которая поможет моментально понять и запомнить правильную структуру заголовков в HTML.

Списки

Любые перечисления и инструкции лучше оформлять в виде списков, используя специальные HTML-теги для текста (типичная ошибка — просто несколько абзацев

Которые начинаются с дефиса или цифры).

Структура таких блоков очень проста. Вначале определяем тип списка — маркированный или нумерованный .

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

Выбор и его атрибуты

Что можно изменить, используя этот его шрифт и цвет — причём без добавления новых классов в CSS. Это очень удобно, когда нужно выделить только одно предложение или фрагмент.

имеет несколько атрибутов:

• Face . Позволяет менять шрифт текста. Можно перечислить несколько вариантов через запятую (Tahoma, Verdana). Если у пользователя не установлен первый шрифт, система просто использует альтернативу.
• Size . Чтобы увеличить или уменьшить текст, укажите в кавычках значение от 1 до 7.
• Color . В зависимости от дизайна можно выбрать один из стандартных оттенков (red, green, blue) или ввести код любого цвета на выбор.

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

Способы выделения текста

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

... . Чрезвычайно популярный HTML-тег. Жирный текст сразу бросается в глаза, а потому с его помощью удобно выделять важные тезисы и факты.

Многие путают теги и . Визуально разницы нет, но работают они по-разному. Первый просто меняет внешний вид текста, а второй выполняет функцию "указателя" и выделяет самые важные фрагменты (тематические ключевые слова и фразы для SEO).

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

... . Пожалуй, столько споров не вызывал ни один HTML-тег. Подчёркивание текста используется редко, так как данный способ выделения исторически закрепился за гиперссылками. Если же вы используете в статьях, учтите, что это подходит только для коротких фрагментов — не более 1 строки.

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

... . Самый простой способ увеличить размер шрифта без каких-либо дополнительных параметров.

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

^... . Правильное название такого формата — верхний индекс. В основном данный тег предназначен для математических степеней и сносок. Он уменьшает размер шрифта и смещает выделенный текст вверх.

_... . Нижний индекс часто встречается в различных формулах. Выделенный фрагмент располагается ниже основного текста.

Смысловые контейнеры

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

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

... . Предназначен для оформления цитат — например, ключевых выдержек из интервью.

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

...

. Дополнительный тег, в котором содержится информация об авторе, в том числе ссылки.

Разделительная линия

---

С помощью простой черты можно обозначить логическое окончание большого раздела.

---

не относится к парным тегам. Это значит, что закрывающий элемент формата не нужен.

C помощью атрибута WIDTH можно сделать разделитель короче, задав подходящий размер в пикселях или процентах от ширины окна.

Научившись грамотно использовать теги для форматирования текста в HTML, вы не только сделаете свои статьи удобными для чтения, но и повысите эффективность SEO.

Элемент

Теперь вы знаете, что управлять размером выводимого на экран текста можно при помощи тегов и . А как программист может изменять другие параметры шрифта? Для этого и существует директива .

Как известно, размер шрифта в стандарте HTML обозначается условными, пунктами, причем всего их насчитывается семь. Однако не все броузеры понимают термин пункт одинаково. Например, при отображении документа в Microsoft Internet Explorer размеры всех шрифтов различны, за исключением пунктов 2 и 3 - они отображаются шрифтом одной высоты, которая равна величине, принятой по умолчанию, и зависит от пользовательских настроек броузера. В Netscape Navigator абсолютно одинаково отображаются пункты 4 и 5, а так же б и 7, они больше по высоте, чем пункт 3, который является нормальным размером шрифта.

ПРИМЕЧАНИЕ Следует помнить, что некоторые броузеры, например Microsoft InternetExplorer, позволяют настраивать параметры текста, отображаемого всоставе документов HTML, путем изменения размера шрифта, подставляемого интерпретатором броузера по умолчанию. Это значит, что параметры элемента , равно как и других тегов, управляющих размером шрифта, могут изменяться в зависимости от пользовательских настроек. По той же причине возможен эффект нарушения компоновки страницы, оптимизированной для просмотра в броузере со стандартными настройками. Избежать этого можно, заключив все элементы документа в невидимую таблицу с фиксированной шириной, заданной в пикселах.

В общем виде синтаксис записи тега выглядит следующим образом:

текст

Значением атрибута FACE является название шрифта, который вы планируете использовать для отображения текста, заключенного в теги . Если, например, вместо параметра "значение!" в приведенном примере вы подставите "Arial", помеченный тегом , текст будет отображаться именно этим шрифтом.

ВНИМАНИЕ Помните, что набор шрифтов, установленных на компьютерах посетите-- " лей вашего сайта, может быть разным, и если вы укажете в атрибуте FACE тега шрифт, отсутствующий в системе пользователя, текстна экране его монитора станет нечитаемым. Для того чтобы избежать ошибок при отображении текста в броузерах конечных пользователей, используйте указания только на стандартные шрифты, имеющиеся в составе большинства броузеров: Arial и New Times Roman. А лучше вообще опускать данный атрибут, позволив броузеру подставлять при интерпретации кода тот шрифт, который используется по умолчанию.

Атрибут SIZE указывает на размер шрифта, которым следует выводить текст. Параметр этого атрибута, обозначенный в нашем примере как "значение2", может быть описан либо абсолютной, либо относительной величиной. Абсолютная величина подразумевает использование в качестве параметра целого числа в диапазоне от 1 до 6, указывающего на высоту шрифта в пунктах. Относительная же величина, обозначаемая целым числом со знаком плюс или минус (например, +2 или -1), - это количество пунктов, которые следует прибавить или отнять от размера шрифта, используемого броузером по умолчанию. Так, запись говорит о том, что размер помеченного таким тегом текста будет на один пункт больше, чем обычный текст документа.

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

Очевидно, что при использовании тега любой из его атрибутов может быть опущен. Примером записи такой команды может служить следующая строка кода HTML:

отрывок текста

ВНИМАНИЕ Помните, что некоторые броузеры старых версий не поддерживают директиву . Среди них - текстовый броузер для UNIX-совместимыхплатформ, который носит название Lynx.

Содержание

Тег FONT представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.

Синтаксис
Текст

Закрывающий тег
Обязателен.

Параметры
color - цвет текста.
face - шрифт текста.
size - размер шрифта.

Пример 1. Использование тега FONT

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

Результат

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

Описание параметров тега FONT

Параметр COLOR

Описание
Устанавливает цвет текста внутри контейнера FONT.

Синтаксис
...

Аргументы
Для задания цветов применяется два способа: первый использует обозначения цветов в шестнадцатеричном коде, а второй - по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный. Десятичная система, хотя и более привычна для представления, находит применение только с помощью CSS.

Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. В таблице приведено соответствие десятичных и шестнадцатеричных чисел.

Десятичные	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
Шестнадцатеричные	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F

Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999.

Типичный цвет выглядит следующим образом.

#FA8E47 >Текст

Цвет фона задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA ) определяют красную составляющую цвета, цифры с третьей по четвертую (8E ) - зеленую, а последние две цифры (47 ) - синюю. В итоге получится такой цвет.

FA

+

8E

+

47

=

FA8E47

Каждый из трех цветов - красный, зеленый и синий - может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, в модели RGB количество цветом может быть 256 х 256 х 256 = 16.777.216 комбинаций.

Аналог CSS
color

Значение по умолчанию
Цвет, установленный в браузере по умолчанию.

Пример 2. Цвет фона текста

Результат

Параметр FACE

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

Синтаксис
...

Аргументы
Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:
serif - шрифты с засечками (антиквенные), типа Times;
sans-serif - рубленные шрифты (шрифты без засечек или гротески), типичный представитель - Arial;
cursive - курсивные шрифты;
fantasy - декоративные шрифты;
monospace - моноширинные шрифты, ширина каждого символа в таком семействе одинакова.

Аналог CSS
font-family

Значение по умолчанию
Шрифт, установленный в браузере по умолчанию.

Пример 3. Изменение шрифта

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Результат

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Параметр SIZE

Описание
Ззадает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size=4), так и относительной (например, size=+1, size=-1). В последнем случае размер изменяется относительно базового. На размер шрифта влияет не только заданный параметр size, но и выбор гарнитуры шрифта. Так, шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров.

Синтаксис
...

Аргументы
Целое число от 1 до 7 или изменение значения в большую или меньшую сторону с помощью символов + и -.

Аналог CSS
font-size

Значение по умолчанию
3

Пример 4. Размер текста

Шрифт размера 1

Шрифт размера 2

Шрифт размера 3

Шрифт размера 4

Шрифт размера 5

Шрифт размера 6

Шрифт размера 7

Результат

Шрифт размера 1
Шрифт размера 2
Шрифт размера 3
Шрифт размера 4
Шрифт размера 5
Шрифт размера 6
Шрифт размера 7

Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font . По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.

Тег font применяется следующим образом:

Конструктор сайтов "Нубекс"

Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font :

Конструктор сайтов "Нубекс"

Здесь задается синий цвет для слова, обрамленного тегом font .

Но помимо параметра color, тег имеет и другие атрибуты.

Атрибуты тега FONT

Тег font имеет всего три атрибута:

• color - задает цвет текста;
• size - устанавливает размер текста;
• face - задает семейство шрифтов.

Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).

Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута - “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.

Рассмотрим применение этих атрибутов на нашем примере:

Конструктор сайтов "Нубекс"

Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.

Задание цвета текста при помощи CSS

Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:

Конструктор сайтов "Нубекс"

Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».

Браузер	Internet Explorer			Netscape			Opera			Safari	Mozilla	Firefox
Версия	5.5	6.0	7.0	6.0	7.0	8.0	7.0	8.0	9.0	1.0	1.7	1.0	2.0
Поддерживается	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

Описание

Тег представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.

Синтаксис

Текст

Закрывающий тег

Обязателен.

Параметры

color Устанавливает цвет текста. face Определяет гарнитуру шрифта. size Задает размер шрифта в условных единицах.

Пример 1. Использование тега

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

Описание параметров тега

Параметр COLOR

Описание

Устанавливает цвет текста внутри контейнера .

Синтаксис

...

Аргументы

Значение цвета можно задавать двумя способами.

1. По его названию

Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов - красный, зеленый и синий - может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних - зеленую, а два последних - синюю.

Аналог CSS

Значение по умолчанию

Цвет, установленный в браузере по умолчанию.

Параметр FACE

Описание

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

Синтаксис

...

Аргументы

Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:
serif - шрифты с засечками (антиквенные), типа Times;
sans-serif - рубленные шрифты (шрифты без засечек или гротески), типичный представитель - Arial;
cursive - курсивные шрифты;
fantasy - декоративные шрифты;
monospace - моноширинные шрифты, ширина каждого символа в таком семействе одинакова.

Аналог CSS

Значение по умолчанию

Шрифт, установленный в браузере по умолчанию.

Параметр SIZE

Описание

Ззадает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size="4" ), так и относительной (например, size="+1" , size="-1" ). В последнем случае размер изменяется относительно базового. На размер шрифта влияет не только заданный параметр size , но и выбор гарнитуры шрифта. Так, шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров.

Синтаксис

...

Аргументы

Целое число от 1 до 7 или изменение значения в большую или меньшую сторону с помощью символов + и -.