Создание качественного веб-контента — это не только красивый дизайн и функциональная верстка, но и грамотное использование HTML-тегов, которые определяют структуру и стиль текста на веб-странице. Ключевую роль в этом играют так называемые контентные теги. В этой статье мы рассмотрим основные из них и поймём, как они помогают структурировать и стилизовать контент на сайте.
К контентным тегам относятся теги:
1. Элементы h1 - h6
2. Элемент p
3. Свойство line-height
4. Элементы ol , ul и li
5. Свойство list-style-type
6. Элемент img
7. Элементы figure и figcaption
8. Свойство float
9. Свойство padding
10. Свойство border
11. Свойство margin
12. Элемент span
Заголовки <h1> - <h6>
Заголовки — это основа иерархии вашего контента.
В HTML существует шесть уровней заголовков: от <h1> до <h6>.
Каждому из них отведена своя роль:
<h1>: Главный заголовок страницы, самый важный элемент, который должен быть только один.
<h2> - <h6>: Заголовки следующих уровней, которые используются для подзаголовков и подразделов. Уровни заголовков помогают поисковым системам и пользователям быстрее ориентироваться в организации контента на странице.
Заголовки — это важный способ структурирования информации и навигации по ней. Заголовок является своеобразным именем блока информации, объединенного общим смыслом.
Для разметки заголовков в HTML существует 6 тегов:
— <h1> — заголовок первого уровня. Это заголовок всей нашей страницы и он всегда один. Пример: <h1>Креативный дизайн</h1>;
— <h2> — заголовок второго уровня. Основные разделы нашего сайта, страницы, блога. Пример: <h2>Главные разделы</h2>;
— <h3> — заголовок третьего уровня. Основные подразделы нашего сайта, страницы, блога. Пример: <h3>Основные подразделы</h3>;
— <h4> — заголовок четвертого уровня. Второстепенные подразделы нашего сайта, страницы, блога. Пример: <h4>Второстепенные подразделы</h4>;
— <h5> — заголовок пятого уровня. Используется редко;
— <h6> — заголовок шестого уровня. Используется редко.
Уровень заголовка показывает, насколько важен заголовок. Таким образом, h1 — самый важный, а h6 — наименее важный.
Абзацы и свойство line-height
Элемент <p> используется для разметки блоков текста. Это основа вашего контента, которая делит его на логические части — абзацы.
Свойство line-height регулирует расстояние между строками в абзацах. Лучше использовать относительные величины, такие как line-height: 1.5;. Это значение отвечает за удобочитаемость текста, особенно важное при небольших размерах шрифта, и помогает избежать "слипания" строк.
В языке HTML существует специальный тег p для разметки фрагмента текста, объединённого общим смыслом. Тег p размечает текст на абзацы.
Пример разметки каждого абзаца элементом p <p>Текст</p>.
Подробное рассмотрение свойства line-height
Свойство line-height задает расстояние между строками в тексте. Чтобы задать значение для свойства можно использовать пиксели. Например, 10px или 20px .
Величина line-height , заданная в пикселях называется абсолютной, фиксированной величиной.
Но лучше всегда пользоваться относительным значением line-height . Относительные значения задаются в долях от размера шрифта. Визуально зависит от шрифта, который мы с вами используем.
Например: line-height: 1.25; Обратите внимание, что относительные значения записываются без единиц измерения. Если размер шрифта 16px, то line-height: 1.25 пересчитается браузером в 16 * 1.25 = 20px.
Значение normal
По умолчанию свойство имеет значение normal . Браузер, как правило, использует значение 1.2, и когда он встречает значение normal , то умножает текущее значение font-size элемента на 1.2 и итоговый результат также переводит в пиксели.
Ошибкой не будет указать line-height: 1.2 для селектора `body` в начале файла стилей. В этом случае вы будете уверены в поведении браузера.
Однострочный текст
У любого текста в вебе, даже если он состоит из одного слова, есть высота строки. Это добавляет небольшие отступы сверху и снизу от букв. Это необходимо учитывать.
Даже при высоте строки, равной 1, будут небольшие отступы. Они нужны, чтобы выносным элементам шрифта — например, крышечка у Й — было где расположиться.
У однострочного текста или отдельного слова принято оставлять стандартное значение высоты строки.
Стилизуем абзацы
Если междустрочный интервал составляет 24 пикселя, а размер шрифта - 16 пикселей. Чтобы правильно посчитать относительную величину, нужно разделить значение междустрочного интервала на размер шрифта:
line-height(отн) = line-height(px) / font-size(px)
line-height(отн) = 24px / 16px = 1.5
В результате расчётов будет установка для элементов p свойства line-height значения 1.5:
p {
line-height: 1.5;
}
Списки: <ol>, <ul> и <li>
Списки организуют информацию и делают её более читабельной.
HTML предлагает два вида списков:
<ol>: Нумерованные списки, когда порядок элементов важен.
<ul>: Маркированные списки, когда порядок не имеет значения.
К каждому пункту списка применяется тег <li>, обозначающий отдельный элемент.
Свойство list-style-type позволяет изменить тип маркеров или нумерации, делая списки визуально разнообразными.
Изображения и их оформление: <img>, <figure> и <figcaption>
Тег <img> встраивает изображения в HTML-страницу. Используйте атрибуты alt для улучшения доступности и SEO.
Элементы <figure> и <figcaption> помогают добавить контекст.
<figure> группирует изображение с его подписью <figcaption>, делая структуру документа более семантической.
Выравнивание и оформление: float, padding, margin, border
Свойства CSS, такие как float, padding, margin и border, важны для управления расположением и внешним видом элементов:
- Float позволяет обтекать текстом изображения и создаёт сложные макеты.
- Padding — внутренние отступы, которые создают "воздух" вокруг содержимого.
- Margin — внешние отступы для разделения элементов друг от друга.
- Border используется для создания границ вокруг элементов.
Элемент <span>
Тег <span> — универсальный инструмент для стилизации фрагментов текста внутри других элементов. Он не имеет собственного визуального представления и часто используется вместе с CSS для индивидуального оформления.
Заключение
Контентные теги в HTML — фундамент для правильной структуры и визуальной привлекательности вашего сайта. Они обеспечивают логическую организацию информации, улучшая навигацию и восприятие контента пользователями и поисковыми системами. Грамотное использование этих тегов и CSS-стилей не только делает страницу красивой, но и повышает её юзабилити и SEO-эффективность. Внимательное отношение к этим элементам поможет создать профессиональный и интерактивный пользовательский интерфейс.
Полезные ресурсы:
Премиум контент:
https://dzen.ru/grafantonkozlov?tab=premium
Сообщество дизайнеров в VK
https://vk.com/grafantonkozlov
Телеграмм канал сообщества
https://t.me/grafantonkozlov
Архив эксклюзивного контента
https://boosty.to/antonkzv
Канал на Дзен
https://dzen.ru/grafantonkozlov
---------------------------------------
Бесплатный Хостинг и доменное имя
https://tilda.cc/?r=4159746
Мощная и надежная нейронная сеть Gerwin AI
https://t.me/GerwinPromoBot?start=referrer_3CKSERJX
GPTs — плагины и ассистенты для ChatGPT на русском языке
https://gptunnel.ru/?ref=Anton
---------------------------------------
Донат для автора блога