Презентационные теги HTML

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

Тег , полужирный шрифт

Весь текст, который будет размещаться между тегами и будет отображаться жирным шрифтом, пример кода:

это обычный шрифт это жирный шрифт

Это даст следующий результат:

это обычный шрифт это жирный шрифт

Тег , курсивный шрифт

Весь текст, который будет размещаться между тегами и будет отображаться курсивным шрифтом, пример кода:

это обычный шрифт это курсивный шрифт

Это даст следующий результат:

это обычный шрифт это курсивный шрифт

Тег , подчеркнутый текст

Весь текст, который будет размещаться между тегами и будет подчеркнутым тонкой линией, пример кода:

это обычный текст это подчеркнутый текст

Это даст следующий результат:

это обычный текст это подчеркнутый текст

Тег <strike>, зачеркнутый текст

Весь текст, который будет размещаться между тегами <strike> и </strike> будет зачеркнутым тонкой линией, пример кода:

это обычный текст <strike>это зачеркнутый текст</strike>

Это даст следующий результат:

это обычный текст ~~это зачеркнутый текст~~

Тег <tt>, моноширинный шрифт

Весь текст, который будет размещаться между тегами <tt> и </tt> будет прописан моноширинным шрифтом. Этим шрифтом, по-умолчанию, пишется html-код страниц. Так почему же он называется "моноширинным" и для чего он нужен, спросите Вы? Дело в том, что не все буквы имеют одинаковую ширину. Например, буквы "m" и "i" имеют разную ширину. Доказано, что html-код воспринимается лучше, когда все символы имеют одинаковую ширину. Именно для этого и был разработан моноширинный шрифт, который придает одинаковую ширину всем буквам. Вот пример кода:

это обычный шрифт <tt>это моноширинный шрифт</tt>

Это даст следующий результат:

это обычный шрифт

это моноширинный шрифт

Тег , надстрочный текст

Весь текст, который будет размещаться между тегами и будет отображаться выше чем основная строка, пример кода:

это обычный текстэто надстрочный текст

Это даст следующий результат:

это обычный текст^{это надстрочный текст}

Тег , подстрочный текст

Весь текст, который будет размещаться между тегами и будет отображаться ниже чем основная строка, пример кода:

это обычный текстэто подстрочный текст

Это даст следующий результат:

это обычный текст_{это подстрочный текст}

Тег <big>, большой шрифт

Весь текст, который будет размещаться между тегами <big> и </big> будет прописан шрифтом, размер которого будет больше чем размер окружающего текста, пример кода:

это обычный шрифт <big>это большой шрифт</big>

Это даст следующий результат:

это обычный шрифт это большой шрифт

Тег , маленький шрифт

Весь текст, который будет размещаться между тегами и будет прописан шрифтом, размер которого будет меньше чем размер окружающего текста, пример кода:

это обычный шрифт это маленький шрифт

Это даст следующий результат:

это обычный шрифт это маленький шрифт

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

Ставив лайк Вы помогаете сайту :)

Статьи по теме:

Рейтинг:

5.0/5 из 3