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

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

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

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

- К тегам физического форматирования относятся следующие теги: Basefont Big Blockquote Br Font H1...H6 Nobr P Pre Small Strike Sub Sup U Wbr

- Эти теги относятся к группе логического форматирования: Abbr Acronym Code Em Kbd Q Samp Strong



Параграфы в HTML - Перенос текста

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

Каждый тег <p> создает новый параграф. При этом текст начинается с новой строки, и между параграфами образуется промежуток.

Атрибут align тега <p> позволяет позиционировать абзац по горизонтали, размещая его слева (align="left"), справа (align="right"), располагая по центру (align="center") или выравнивая по ширине (align="justify") окна браузера или родительского элемента.

Текст после тега <br> также начинается с новой строки. Но тег <br> осуществляет лишь перенос строк - он не образует промежутка между ними и его можно использовать внутри тега <p>.

Тег <nobr> наоборот запрещает перенос строк. Если длина строки превысит ширину окна браузера, то появится горизонтальная полоса прокрутки. В свою очередь тег <wbr> разрешает перенос строки внутри тега <nobr>.

Заголовки в HTML. Размер текста

Заголовки в HTML представлены шестью тегами <h1>...<h6>. Каждый из них обозначает заголовок определенного уровня (веса или значимости).

Тегом <h1> выделяют наиболее значимые части документа (тема страницы или статьи), а текст заключенный в него - самый крупный.

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

И так далее, по значимости и иерархии, при помощи тегов <h1>...<h6>, выделяют заголовки различных уровней.

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

Теги <h1>...<h6>, как и тег <p> имеют атрибут align, позволяющий выравнивать заголовок по горизонтали.

Использование закрывающего тега для всех заголовков HTML, является обязательным условием их применения!

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

Размер текста продолжение...

Теги <big> и <small> тоже позволяют изменить размер текста: они соответственно увеличивают и уменьшают текущий размера шрифта на одну единицу.

В HTML размер шрифта задается в условных единицах от 1 до 7. По умолчанию текст имеет средний размер шрифта, относящийся к 3 условной единице.

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

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

Атрибут size тега <font> задает размер шрифта в условных единицах от 1 до 7, атрибут color предназначен для задания цвета (Цвет можно задать двумя способами (подробнее здесь...)), и атрибут face определяет семейство шрифтов (подробнее здесь...).

Тег <basefont> предназначен для задания тех же свойств текста, что и тег <font>. Отличие в том, что тег <basefont> может располагаться как в теле, так и в голове документа. При этом он определяет свойства текста для всего документа, за исключением текста, расположенного в теге <font>.

Тег <basefont> поддерживается только браузером Internet Explorer. Его использование не рекомендовано. Впрочем как не рекомендуется и применение тега <font>!

Изучайте CSS и работайте со стилями!

Гарнитура шрифта

По начертанию шрифт может отличаться постановкой - прямой или курсив, и насыщенностью (плотностью) - светлый и жирный.

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

Моноширинный шрифт

Многие среды разработки и редакторы исходного текста программ по умолчанию настроены на моноширинные шрифты. Это сделано для удобства работы программистов: улучшается удобочитаемость кода.

Шрифты этого семейства отличаются тем, что все буквы имеют одинаковую ширину.

В HTML несколько тегов отображают текст моноширинным шрифтом.

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

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

- тег <code> - отображает текст, который является программным кодом;

- тег <kbd> - обозначает текст, который набирают на клавиатуре или для названия клавиш;

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

Цитаты в HTML. Подчеркивание и перечеркивание текста

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

В каких случаях Вы будете использовать эти теги - решать Вам!

Оформление цитат

Возможно, в процессе создания сайта, Вам понадобится вставить цитату на страницу.

Цитата - это дословная выдержка текста из какого-либо произведения. Желательно, чтобы цитируемый текст идентифицировался читающим лицом как вставленный. Для этого цитату необходимо выделить/оформить соответствующим образом.

В HTLM для этой цели существует специальный тег - <blockquote>. Текст, заключенный в этот тег, оформляется следующим образом: сверху и снизу от основного текста образуются промежутки, а слева и справа отступы (примерно по 40 пикселей).

Несколько логических тегов

Мы не коснулись еще 3-х тегов, относящихся к группе логического форматирования: это теги <abbr>, <acronym> и <q>.

Теги <abbr> и <acronym> похожи. Первый из них предназначен для обозначения аббревиатуры, второй - акронима.

Акроним - это таже аббревиатура, только произносится он как единое слово, а не побуквенно.

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

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