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

by anastasia ноября 24, 2019 0 комментариев Форматирование текста в HTML

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

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

Теги собственно форматирования текста

Теги, выделяющие текст курсивом

Теги, выделяющие текст курсивом, следующие:

• <cite>...</cite>,
• <dfn>...</dfn>,
• <em>...</em>,
• <i>...</i>.

Как было сказано выше, каждый тег, в данном случае выделяя текст курсивом, играет определённую роль. Так, теги <cite>...</cite> используются для логического выделения названий книг, статей и цитат. Теги <dfn>...</dfn> используются для выделения определений. Тегами <em>...</em>, <i>...</i> выделяют важные фрагменты текста.

Например, следующий код:

Привет! Сегодня <i>чудесный</i> день, не правда ли!?

выведет на экран следующее:

Привет! Сегодня чудесный день, не правди ли!?

Теги, выделяющие текст полужирным шрифтом

Теги, выделяющие текст полужирным шрифтом, следующие:

• <strong>...</strong>,
• <b>...</b>.

Оба тега используются для выделения важных фрагментов текста.

Например:

<b>Яблоко</b> — сочный плод яблони, который употребляется в пищу в свежем виде, служит сырьём в кулинарии и для приготовления напитков.

На экране будет видно:

Яблоко — сочный плод яблони, который употребляется в пищу в свежем виде, служит сырьём в кулинарии и для приготовления напитков.

Теги, выделяющие текст подчеркиванием

Теги для подчёркивания текста следующие:

• <ins>...</ins>,
• <u>...</u>.

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

Например:

    — Подчеркните, ребята, подлежащее в предложении «Мама мыла раму».

    — Хорошо, Марьиванна!

    — Кто уже готов?

    — Я! — на весь класс уверенно крикнула Настя.

    — Ну-ка покажи. <i>(Смотрит в Настину тетрадь.)</i>

«<u>Мама</u> мыла раму».

    — Молодец! Это заслуженная десятка, — сказала преподаватель, подходя к своему столу.

На экране увидим следующее:

    — Подчеркните, ребята, подлежащее в предложении «Мама мыла раму».

    — Хорошо, Марьиванна!

    — Кто уже готов?

    — Я! — на весь класс уверенно крикнула Настя.

    — Давай-ка посмотрю. (Смотрит в Настину тетрадь.)

«Мама мыла раму».

    — Молодец, Настя! Это заслуженная десятка, — сказала преподаватель, подходя к своему столу.

Теги, выводящие текст моноширинным шрифтом

Это теги:

• <code>...</code>,
• <kbd>...</kbd>,
• <samp>...</samp>,
• <tt>...</tt>.

Каждый из этих тегов выводит текст шрифтом с одинаковой шириной каждого символа. Моноширинные шрифты используются, например, в средах программирования: так легче воспринимать код. Для выделения именно программного кода используется тег <code>...</code>.

Рассмотрим пример:

Площадь квартиры — <code>25 квадратных метров</code>.

На экране мы увидим:

Площадь квартиры — 25 квадратных метров.

Теги, выводящие текст в верхнем и нижнем индексах

Тег, выводящий текст в верхнем индексе:

• <sup>...</sup>,

и тег, выводящий текст в нижнем индексе:

• <sub>...</sub>.

Эти теги очень полезны при составлении, например, формул.

Рассмотрим пример:

Ускорение автомобиля — 5 м/с<sup>2</sup>.
Молекула воды — H<sub>2</sub>O.

На экране мы получим привычные глазу виды:

Ускорение автомобиля — 5 м/с².
Молекула воды — H₂O.

Теги, перечёркивающие текст

Это теги

• <s>...</s>,
• <strike>...</strike>,
• <del>...</del>.

Они используются для выделения удаляемого из документа содержимого.

Например:

<s>Ценок</s> Конец.

На экране имеем:

Ценок Конец.

Теги заголовков

Теги заголовков представляют из себя шесть однотипных тегов:

• <h1>...</h1>,
• <h2>...</h2>,
• <h3>...</h3>,
• <h4>...</h4>,
• <h5>...</h5>,
• <h6>...</h6>.

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

Теги абзаца и переноса текста

Тег <p>

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

Тег <br>

Он переносит текст на следующую строку, создавая разрыв строки.

Тег <hr>

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