HTML-заголовки

Заголовки выполняют важную функцию на веб-странице.

Во-первых, они показывают важность раздела, к которому относятся. Чем больше заголовок и его
«вес», тем более он значимый. Вспомните, что в газетах и журналах передовицы набраны
крупным шрифтом, тем самым, привлекая к ним внимание и говоря: «Прочитай меня!» . На сайтах
тегом <h1> обычно обозначают название раздела или статьи.

Во-вторых, с помощью различных заголовков легко регулировать размер текста. Чем выше
уровень заголовка, тем больше размер шрифта. Самым верхним уровнем является уровень 1
(<h1>), а самым нижним — уровень 6 (<h6>). Буква «h» в названии тега — это первая буква
английского «heading».

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

Теги h1-h6

Для создания заголовков на сайте используется 6 парных тегов:

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>,

где <h1> — заголовок первого уровня, самый важный и описывающий главную тему текста,
а <h6> — заголовок самого низшего уровня.
На практике в текстах редко встречаются подзаголовки ниже третьего уровня. Поэтому чаще всего
используются теги <h1>, <h2> и <h3>:

<h1>Спецификация HTML</h1>

<h2>Раздел 1 Введение</h2>

<h3>Раздел 1.1 Происхождение языка</h3>

При использовании заголовков важно соблюдать следующие правила:

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

2. Использование ключевых слов в заголовках. Поисковые системы придают особое значение

заголовкам, потому что в них, как правило, указаны ключевые слова, которые определяют
соответствие содержания страницы запросу пользователя. Обычно главный ключ пишется в <h1> в
самом начале страницы, а в остальных заголовках могут использоваться различные словоформы и
синонимы.

3. Заголовок первого уровня <h1>— только один раз используется на

странице. Заголовок <h1> — самый важный на странице, его в первую очередь анализируют
поисковики. В него нужно включать текст, который в целом описывает содержание страницы.
Очень важно, чтобы заголовок первого уровня на странице был только один. При наличии двух
заголовков поисковику будет труднее определить релевантность страницы.
HTML-параграфы

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

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

Параграфы создаются с помощью парного тега <p>, в тело которого помещается небольшая часть
текста. Например:

<p>Это параграф</p>

Отображение

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

сверху и снизу. Но если вы хотите добавить в сам параграф дополнительные пробелы между
словами или переносы строк, браузер их проигнорирует. Несмотря на то, что в вашем HTML-коде
все эти символы присутствуют, на самой странице в браузере их не будет.
Теги <hr> и <br>

При помощи данных тегов можно добавлять переносы в любом месте HTML-кода.

Горизонтальная линия

Тег <hr> определяет тематический разрыв на HTML странице и чаще всего отображается в виде
горизонтальной линии.

Элемент <hr> используется для разделения содержимого (или определения изменения) на HTML-
странице:

Тег <hr> — это пустой тег, что означает, что у него нет конечного тега.

Разрыв строк

HTML-элемент <br> определяет разрыв строк.

Если вы хотите начать текст с новой строки, не начиная новый параграф, установите тег <br>:

Пример

Тег <br> - это пустой тег, что означает, что у него нет конечного тега.
Проблема стихотворения

Так как браузер игнорирует все переносы внутри HTML-кода и дополнительные пробелы, то
возникает проблема отображения стихотворения:

Тег <pre>

Тег <pre> определяет предварительно отформатированный текст.

Текст, находящийся внутри элемента <pre> , отображается в фиксированной ширине шрифта

(обычно курсив), и он сохраняет пробелы и переносы строк. Поэтому использование
тега <pre> поможет вывести стихотворение в красивом виде.

HTML-стили

HTML атрибут style используется для добавления стилей к элементу, таких как цвет, шрифт, размер
и т. д. Этой темой мы начинаем немного затрагивать раздел CSS, потому что именно при
помощи CSS можно изменить стандартные стили тегов HTML. Например, каждый заголовок имеет
свой стандартный размер, и он зависит от уровня заголовка. Параграфы всегда имеют размер
текста, равный 14px. Браузеры будут отображать эти элементы всегда с их значениями по
умолчанию.

Но если вы хотите повлиять на стандартные значения тегов, вам нужно изменить их стиль при
помощи определенного свойства. Например, свойство font-size отвечает за размер текста.
Изменение свойства

Настройка стиля HTML-элемента может быть выполнена с помощью атрибута style.

Для изменения свойства элемента нужно воспользоваться атрибутом style и использовать

следующий синтаксис:

<tagname style="название_свойства:значение_свойства;">

где название_свойства — свойство CSS, а значение_свойства — значение свойства CSS.

Например:

<p style="text-align:center;">Centered paragraph.</p>

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

Изменение нескольких свойств

Одному элементу можно указать сразу несколько свойств, перечисляя их через знак ;. Это
делается следующим образом:

<tagname style="свойство1:значение;свойство2:значение2;...;свойствоN:значениеN">

где свойство1, свойство2, .., свойствоN — свойство CSS, а значение1, значение2, ..,
значениеN — значение свойства CSS.

<p style="text-align:center;color:red;font-size:20px">Style paragraph.</p>

В этом примере задается для параграфа сразу три свойства text-align, color, font-size. В данном
случае между свойством и значением по-прежнему стоит : , а между парами свойство-значение
должен стоять знак ;

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

Свойство color и background-color

Изменение цвета текста

CSS свойствоcolor определяет цвет текста для HTML-элемента:

Цвет можно задавать при помощи английского названия цвета или при помощи указания
значения по RGB-модели. Можете воспользоваться онлайн-подборщиком цвета: скопировать HEX-
код цвета и вставить в значение свойства color.
Изменение цвета фона элемента

CSS свойство background-color позволяет изменить цвет фона для HTML-элемента.

Изменение цвета фона страницы

Вы можете назначить цвет фона для всей страницы целиком. Для этого нужно
задать свойство background-color элементу body:

Размер шрифта

CSS свойствоfont-size определяет размер текста для HTML-элемента:

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

Когда мы указываем размер в %, то итоговое значение высчитывается относительно стандартных

размеров самого элемента.

За стандартный размер берется значение 100%, то есть значение размера каждого элемента
по умолчанию 100%. Если вы пишете 120%, это на 20% больше стандартного значения, значит
размер увеличится на 20%. Если вы пишете 60%, это на 40% меньше стандартного значения,
значит размер уменьшится относительно стандартного размера на 40%.

Запись font-size:150% обозначает "увеличить на 50% стандартный размер элемента", а запись font-
size:75% — уменьшить размер на 25%
Выравнивание текста

CSS свойство text-align определяет горизонтальное выравнивание текста для HTML-элемента.

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

войство text-align может принимать следующие значения:

• left — выравнивание по левому краю. Это значение используется по умолчанию;

• center — выравнивание по центру;

• right - выравнивание по правому краю.

• Граница элемента
• CSS свойство border позволяет определить стиль границы HTML -
элемента. По умолчанию элементы заголовков и параграфов не имеют
границы, но это можно изменить при помощи свойства border . Задается
значение свойства следующим образом:
• <tagname style="border:ширина_границы стиль_границы
цвет_границы">
• Нужно указать через пробел ширину границы, ее стиль и цвет.

Тег style

Каждый раз, когда мы изменяем стиль элемента, мы имеем дело

с CSS (Cascading Style Sheets - Каскадные Таблицы Стилей). CSS — это язык, который отвечает за
описание внешнего вида HTML-документа. Он позволяет сделать контент страницы
привлекательным для читателя. Но согласитесь, прописывать стиль отдельно для каждого
элемента — это очень неудобно и трудозатратно.
Когда мы прописываем стиль элемента в атрибуте style — это называется использование
встроенного CSS. Таким образом, мы влияем на стиль только одного отдельного элемента, на
остальные элементы этот стиль распространяться не будет.

Но если вы хотите задать один и тот же стиль для всех параграфов или для всех заголовков, вы
можете воспользоваться тегом style. Он обязательно определяется внутри тега head. В нем вы
должны указать названия селектора и в фигурных скобках перечислить CSS свойства. На картинке
ниже указан селектор h1, которому задается свойство color со значением pink и свойство font-
size со значением 30px.

Форматирование текста

Теги форматирования позволяют изменять оформление выделенного текста. Они делятся на две
категории: теги физической разметки, которые отвечают за стилевое оформление (жирное
начертание, курсив, шрифт и т.д.), и теги логической разметки, которые несут смысловую нагрузку
(например, дают понять поисковым системам, по каким словам необходимо ранжировать веб-
страницу).

Теги <b> и <strong>

HTML-теги <b> (сокращение от «bold») и <strong> задают полужирное начертание шрифта.

Разница между ними заключается в том, что тег <b> является тегом физической разметки и
выделяет текст без акцента на его важность.

Тег <strong> определяет текст, которому придают особую важность. Содержимое тега имеет
большой вес для поисковиков, а устройства, считывающие с экрана, выделяют его определенной
интонацией.
Теги <i> и <em>

Теги <i> (сокращение от «italic») и <em> (сокращение от «emphasis») задают курсивное начертание
шрифта.

Тег <i> просто изменяет оформление текста и не воспринимается, как важный, браузерами и
поисковыми машинами. Тег <i> может использоваться для указания технических терминов, фраз
из другого языка, мысли, названий чего-либо и тд.

Тег <em> предназначен для выделения текста, на который стоит обратить внимание.

Тег <pre>

Тег <pre> (сокращение от «preformatted text») используется для включения в HTML-документ

предварительно отформатированного текста. Браузер сохраняет и отображает все пробелы
и переносы, которые есть внутри тега <pre>.

Теги <del> и <s>

Тег <del> выделяет часть текста, которая была удалена из документа. Этот элемент обычно
используется вместе с тегом <ins> в ситуациях, когда часть содержимого заменяется на более
актуальную информацию.
Тег <s>используется для определения текста, который больше не актуален.

Теги <ins> и <u>

Тег <ins> используется для определения части текста, которая была добавлена в документ.
Содержимое тега в браузере отображается как подчеркнутый текст.

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

Теги <sub> и <sup>

Тег <sub> используется для определения текста с нижним индексом. Тег выравнивает элемент, как
подстрочный. Тег <sup> используется для определения текста в верхнем индексе.