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

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

Жирный шрифт

Для того чтобы вывести в html буквы жирным шрифтом, нужно его заключить в специальные теги, которые для этой цели предназначены. Как ни странно, но парные теги <b> и <strong> выполняют одно и то же действие – делают содержимое, которое вписано в них, жирным. Так зачем тогда для одного и того же действия придуманы разные теги?

Дело в том, что b и strong немного отличаются. Тег <b> был создан для того, чтобы просто помечать нужный текст жирным шрифтом, но при этом не добавлять ему какой-то важности по сравнению с другими частями. Проще говоря, это просто тег для изменения внешнего вида и ни для чего более.

Strong имеет немного другой смысл, добавляя тексту важности. В этом плане тег можно назвать логическим или семантическим. Заключая определенные слова в strong можно подчеркнуть их важность, выделить среди всей статьи.

Курсив

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

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

Текст в верхнем и нижнем индексах

Иногда появляется необходимость вывести какие-то буквы, цифры или символы в верхнем или нижнем индексе. Для этого стоит применять парные теги <sup> и <sub>. Первый выводит символы в верхнем индексе, а второй, соответственно, в нижнем. Вот и вся наука.

Вывод текста с сохранением форматирования

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

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

Рис. 1. Этот отрывок был написан без переносов строк с помощью
. Как видите, текст в pre отображается так, как он набран в редакторе.

Вообще в css есть гораздо более функциональное свойство, которое позволяет управлять отображением пробелов в нужном фрагменте более широко. Это свойство white-space. Хотя статья в основном об html-тегах, давайте все-таки рассмотрим его значения:

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

Pre – будет выводиться абсолютно так же, как он выводиться в pre. Если строка не влезает в окно браузера, то она продолжит тянуться, образуя горизонтальную прокрутку.

Pre-wrap – более умное поведение текста, все пробелы сохраняются, но слова автоматом переносятся на новую строку, если перестают помещаться по ширине в свой блок-родитель.

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

Подчеркнутый текст

Для подчеркивания в html есть еще один тег — ins. Можно использовать его, а можно реализовать подчеркивания с помощью css-свойства text-decoration. Кстати, это позволяет подчеркнуть нужный текст не только снизу, но и сверху, если это будет необходимо.

Зачеркнутый текст

Сначала в html для этого применяли тег strike, но сегодня он немного устарел и вместо него лучше использовать укороченный вариант — s. Также язык разметки предлагает нам еще один тег – del. Он тоже выводит зачеркнутый текст, но был создан для того, чтобы показать, какие части документа были исправлены.

Я думаю, что если вам нужно зачеркнуть всего лишь одно-два слова на всю статью, то нет особой разницы, какой из этих тегов вы будете использовать. Визуальный редактор от WordPress, например, предлагает для зачеркивания оборачивать текст с помощью del.

Комбинирование

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

Тут самое главное – правильно закрыть теги. В результате наше слово будет выведено жирным шрифтом, но также оно получит курсивное начертание и подчеркивание снизу.

Рис. 2. Комбинируя команды вы можете добиться разного форматирования.

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

CSS-свойства для текста

Все вышеописанные преобразования с текстом можно осуществить и без помощи html, только с помощью css-свойств. Например, font-weight: bold делает нужный вам текстовый фрагмент жирного начертания, а font-style: italic сделает текст курсивным. Эти свойства тоже можно комбинировать. Конечно же, в этом случае слова не получат никакого логического выделения, просто будет изменен их внешний вид.

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

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

Как видно, с использованием таблицы стилей пришлось написать гораздо больше кода.

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

Комментарии Вконтакте: