Текст – неотъемлемая часть веб-страниц. Вместе с фото, видео и другим контентом он чётко доносит нужную информацию. При этом пользователи больше любят структурированный контент. Эту структуру тексту можно придать с помощью HTML-элементов, о которых мы сейчас поговорим.
Не переживайте, если не поймёте материал чисто по теории. В конце статьи я прикреплю ссылку на выполненное практическое задание – разметку письма. Там использованы все элементы, которые мы здесь затронем.
Условные обозначения:
🧱 Заголовок– <h1>-<h6>
Есть 6 уровней заголовков. Первый по значимости – <h1>. Пример использования – название статьи на сайте. Элемент <h1> должен встречался на веб-странице (не сайте) только один раз.
<h2> используют для обозначения подзаголовков. На примере этой статьи вы можете посмотреть, как элементы <h1> и <h2> вписаны в код. Для этого:
- нажмите правой кнопкой мыши по её названию статьи;
- Выберите «посмотреть код» или «исследовать» (зависит от браузера).
Инструмент найдёт и выделит элемент <h1> в коде. Аналогично с поиском подзаголовков.
На некоторых сайтах есть подподзаголовки (<h3>). <h4>-<h6> используют реже.
🧱 Абзац – <p>
Элемент нужен для группировки однотипного контента (в том числе и текстового). Много о нём рассказывать не буду. Скажу только, что иногда внутри абзаца используют <br> – void-элемент для переноса строки. Так поступают, когда многострочный контент должен остаться в одном абзаце (в стихотворениях, письмах и др.)
🧱 Списки
В HTML 3 вида списков:
- Маркированные. Порядок пунктов не важен.
- Нумерованные. Порядок пунктов имеет значение.
- Список описаний. О нём расскажу дальше.
Первые два оформляются просто: начало и конец маркированного списка обозначают теги <ul> и </ul>, а нумерованного – <ol> и </ol>. Пункты списка в обоих случаях обёрнуты в теги <li> и </li>. Пример кода для вызова маркированного и нумерованного списка смотрите на codepan. io (списки) или на скриншоте ниже.
Список описаний используют, например, для расшифровки нескольких терминов/понятий. Его синтаксис немного сложнее. Он состоит из трёх элементов:
- <dl> (description list) – обёртка списка;
- <dt> (description term) – термин, который нужно описать;
- <dd> (description definition) – само описание термина.
Пример кода со списком описаний Вы также найдёте на codepan. io (список описаний) и на скриншоте ниже.
✏️ Акцент и выделение
Они привлекают внимание пользователя и поисковых систем. Для обозначения важного в тексте есть два элемента:
- <em> - выделяет текст курсивом;
- <strong> - выделяет текст жирным.
Внимание: <em> и <strong> не предназначены для декоративного оформления. Они придают содержимому некую семантику, которую поисковики учитывают при ранжировании. Для оформления используйте специальные CSS-свойства (font-weight, font-style: italic и text-decoration: underline).
Также не рекомендуется подгонять под <strong> и <em> большие куски текста. Людям тяжело воспринимать такой контент. Отсюда негативный поведенческий фактор -> падение позиций веб-страницы в поисковой выдаче -> снижение количества её посетителей.
Хотите посмотреть <em> и <strong> в коде? Найдите в статье слово, выделенное курсивом или жирным. Посмотрите на соответствующий элемент в инструменте разработчика.
✏️ Начертание
Это рисунок шрифта текста. Его контролируют 3 элемента - <b>, <i> и <u>. Раньше их использовали для украшения текста. Но HTML5 ввёл новые правила (обновление от 17. 08. 2023):
- <b> выделяет ключевики и названия продуктов.
- <u> подчёркивает орфографические ошибки и имена собственные.
- <i> оборачивает технические термины, таксономические обозначения, транслитерации, мысли, названия судов на западе, иностранные идиомы. Исключение: зарубежные термины. Их лучше оборачивать так:
Интересно: для выделения ударений вместо <u> лучше использовать <em> (пункт 4. 5. 22 HTML Living Standart от 17. 08. 2023).
Завершение
Материал вышел объёмнее, чем казалось. Разделю его на две статьи. Ниже оставлю обобщающий конспект и ссылку на обещанный код. Конспект и код содержат больше элементов, чем мы успели разобрать. Можете изучить их сами или дождаться выхода второй части.
Обобщающий конспект и код
Смотрите код по разметке на codepan. io (код письма).