Размер текста в HTML: правила форматирования

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

Изменение размера при помощи тега <font>

Существует несколько различных способов, при помощи которых можно выполнить изменение размера текста в HTML. Такие возможности представляет как сам язык веб-разметки, так и подключаемые к документу таблицы стилей CSS.

Первый способ увеличить или уменьшить текст на веб-странице — это использование тега <font>. Синтаксис при использовании данного тега будет следующим:

<font size="3" color="green" face="Georgia">Текст для примера</font>

Давайте рассмотрим данный пример подробнее. Как видите, здесь указано три атрибута тега <font>, которые позволяют задавать гарнитуру, размер и цвет текста HTML.

За размер отвечает атрибут size — он позволяет задавать размер текста в условных единицах. За среднее значение данного параметра принимается 3. Соответственно, задавать его можно как в абсолютных единицах (то есть 1, 7, 4 и т.д.), так и в относительных - с помощью знаков плюса или минуса (+3, -2). Во втором случае размер текста будет изменен по отношению к базовому.

Атрибут color показывает, какого цвета будет отображаемый текст, а face отвечает за гарнитуру (шрифт). Таким образом, текст на примере будет стандартного среднего размера по умолчанию, зеленого цвета, написан шрифтом Georgia.

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

Другие способы уменьшения и увеличения текста в HTML

Для того чтобы изменить размер текста в HTML, также используются теги <big> и <small>.

Употребляются эти теги следующим образом:

<big>Этот текст будет крупнее</big>
<small>Этот текст будет меньше</small>

Интересно, что для того, чтобы сделать текст еще больше или меньше, тег можно повторить несколько раз.

<big><big>Этот текст будет увеличен еще сильнее</big></big>

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

Изменение размера текста с помощью CSS

Для того чтобы менять размер текста, рекомендуется использовать средства CSS. Синтаксис будет выглядеть следующим образом:

  p {
   font-size: 11pt;
   }

Для этого способа доступно гораздо большее количество возможностей. Можно менять размер текста в различных единицах, таких как пункты (pt), пиксели (px), проценты и другие.

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

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

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