Оформление логических выделений в HTML. Как придать тексту смысловую нагрузку?

оформление логических выделений в html. как придать тексту смысловую нагрузку?

Смысловая нагрузка разметки

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

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

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

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

Слабое логическое выделение

Для придания участку текста выразительности, в HTML используется слабое логическое выделение с помощью элемента <em>. Он является строковым. Весь текст, помещенный между открывающим тегом <em> и закрывающим </em>, будет отображен с курсивным начертанием шрифта.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример слабого логического выделения</title>
    </head>
    <body>
        <p>Часть этого текста <em>будет иметь смысловую нагрузку</em>
        и наклонный шрифт</p>
    </body>
</html>

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

Сильное логическое выделение

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример сильного логического выделения</title>
    </head>
    <body>
        <p>Я сделал <strong>очень важное</strong> замечание.</p>
    </body>
</html>

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

Цитирование других источников

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример цитирования других источников</title>
    </head>
    <body>
        <p>Когда вам покажется, что цель недостижима, не<br>
        изменяйте цель — изменяйте свой план действий.</p>

        <cite>Конфуций</cite>
    </body>
</html>

Указание контактной информации

Контактная информация в том или ином виде присутствует на любом сайте. Это может быть физический адрес магазина, адрес электронной почты или телефонный номер. Для оформления контактных или адресных данных рекомендуется использовать элемент <address>. Весь текст, помещенный между открывающим тегом <address> и закрывающим </address>, будет выведен с курсивным начертанием шрифта.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример оформления контактных данных</title>
    </head>
    <body>
        <address>г.Калининград, ул.Центральная, д.6</address>
    </body>
</html>

Последние публикации