HTML теги для текста

HTML теги для текста

Приветствую вас, дорогие друзья!

Сегодня я покажу вам как использовать в HTML теги для текста.

Я их условно разделила на две группы:

Структурные HTML теги для текста

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

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

    Следующими идут заголовки h3, h4, h5 и самый маленький h6

  2. 2.Тег абзаца

    Думаю понятно для чего он предназначен. По умолчанию занимает всю ширину страницы и может иметь небольшие отступы сверху и снизу (обычно снизу).

  3. 3.Тег <span> позволяет выделит какой то фрагмент текста. Его отличительной особенностью является то, что он занимает ширину выделенного текста. То есть если вы обернёте в него слово, то его ширина будет равна ширине этого слова.

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

    Как и другим тегам HTML, ему можно присвоить CSS класс или идентификатор.

  4. 4.Для оформления цитаты в HTML у нас есть 2 варианта:

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

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

  5. 5.Тег <abbr> используется для выделения аббревиатур. Вы оборачиваете в него аббревиатуру и в атрибуте title пишете полное название.

    Браузер подчёркивает аббревиатуру, а при наведении на неё высвечивает полное название.

    Здесь написана ПМА
  6. 6.<bdo> — нужен чтобы задать или изменить направление написания текста в HTML. Лично я понятия не имею где это может пригодиться, но мало ли…

    Для задания направления используется атрибут dir, которому можно задать значения:

    • rtl – справа на лева
    • ltr – слева на право

  7. 7.<br> — используется для переноса на новую строку.

HTML теги для форматирования текста

  1. 1.<b> — выделение текста жирным.

  2. 2.Теги <i> и <em> для выделения курсивом.

  3. 3.<u> — подчёркивает обёрнутый в него текст.

  4. 4.<strong> — используется для выделения слов или фраз полужирным. Учитывается браузером и поисковиками для определения важности выделенного текста.
  5. 5.<sup> — нужен для задания верхнего индекса при помощи HTML, например при отображении степени в формулах или для обозначения единиц площади или объёма.

  6. 6.<sub> — используется для задания нижнего индекса.

  7. 7.<del> — зачёркнутый текст. Вообще в HTML он предназначен для выделения удалённого текста, но используется где ни попадя, в том числе и для задания цен без скидки в интернет магазинах или на лендингах.

    Цена: 450руб. 400 руб.
  8. 8.<small> — используется чтобы выделить фрагмент текста более мелким шрифтом.

В HTML существуют и другие теги для текста, но они очень редко используются.

На этом у меня всё, удачи вам в освоении HTML!

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

1 комментарий

  1. Это очень полезные мелочи при форматировании некоторых страниц на сайте.

    //impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif