Шаг 4. Размечаем мелкие элементы

Автор: Мелихова Ева-София

Списки

Когда на странице появляется несколько элементов, связанных между собой по функции и смыслу, их лучше оформить в виде списка. Списки группируют элементы, которые равны по значению и важности. Если порядок элементов не имеет значения, используется тег <ul> (ненумерованный список), а если порядок важен, то применяют <ol> (нумерованный список).

Частая ошибка — объединение несвязанных элементов в один список. Это касается элементов разной природы, которые не равноправны по смыслу. Например, на макете ошибочно объединять кнопку/логотип и ссылки меню пользователя в один список. Эти элементы различны: ссылки можно обернуть в список, а кнопку и логотип лучше вынести как отдельный элемент.

Пример разметки:

<header>
    <nav>
        <a href="./index.html">
            <img src="" alt="Логотип агенства Adrasteia" />
        </a>
        <ul>
            <li>
                <a href="#">Главный</a>
            </li>
            <li>
                <a href="#">О нас</a>
            </li>
            <li>
                <a href="#">Услуги</a>
            </li>
            <li>
                <a href="#">Как мы работаем</a>
            </li>
            <li>
                <a href="#">Клиенты</a>
            </li>
            <li>
                <a href="#">Контакты</a>
            </li>
        </ul>
        <button>Оформить заявку</button>
    </nav>
</header>

Если возникает сомнение, является ли блок списком, проговорите его структуру: если это что-то вроде «вот перечень/список…», вероятно, вы имеете дело с реальным списком. Обычно они имеют одну и ту же структуру, но различаются лишь по содержанию. Кстати, некоторые программы для чтения экрана (скринридеры) перед перечислением элементов озвучивают фразу вроде «Список из… элементов», что облегчает восприятие пользователям с ограниченными возможностями.

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

Пример разметки блока “Услуг”:

<section>
    ...
    <ul>
        <li>
            <img src="" alt="Папки с информацией" />
            <h3>Работа с информацией</h3>
            <ul>
                <li>Поиск и проверка информации</li>
                <li>Составление персонального досье</li>
                <li>Защита с репутацией</li>
                <li>Информация по номера телефона</li>
            </ul>
        </li>
    </ul>
    ...
</section>

Кроме стандартных списков, существует также список описаний (<dl> - Description List). Этот элемент используется для представления пар терминов и их описаний. Тег <dt> используется для обозначения термина, а <dd> - для его описания.

Пример использования:

<dl>
    <dt>Статус</dt>
    <dd>В продаже</dd>

    <dt>Дата рождения</dt>
    <dd>24.04.2023</dd>

    <dt>Пол</dt>
    <dd>Девочка</dd>

    <dt>Окрас</dt>
    <dd>Рыже-белый</dd>
    ...
</dl>

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

Параграфы и переносы

Давайте посмотрим, когда нужно использовать тег <p> , который указывает на абзац. Абзац - это отдельный кусочек текста. Найдем на макете:

Рассмотрим последний блок “Наши клиенты”. «Строго соблюдаем конфиденциальность и дорожим репутацией каждого клиента», который встречается в макете. Чтобы правильно оформить этот текст в HTML, можно использовать тег <p>, обозначающий абзац. Однако, будет ли этого достаточно для того, чтобы текст выглядел так же, как на макете? Даже если задать нужную ширину через стили, автоматический перенос строк в нужных местах не получится. Для этого применяют тег <br>, который создаёт перенос строки. Но важно помнить, что тег <br> следует использовать только в исключительных случаях, например, в коротких текстах или для оформления по макету.

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

Стандарты HTML чётко указывают, когда допустимо использовать тег <br>, и неправильное его применение может вызвать проблемы с отображением страницы.

Осталось совсем немножко, ты настоящий герой, если дочитал до этого момента

Размечаем контактную информацию

В футере веб-страницы часто размещают информацию о том, как с вами связаться: телефон, адрес, email и т.д. Для такой информации можно использовать стандартные теги, например, параграфы, но HTML предоставляет специальный тег для контактных данных — <address>.

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

Обычно тег <address> используется внутри футера (<footer>), что логично и соответствует назначению этого элемента, так как футер часто содержит контактные данные и другие информационные блоки.

Если мы бы знали ссылки социальных сетей, то добавили его в address, но мы его не знаем. Поэтому получим вот такую интересную запись:

Пример разметки:

<footer>
    ...
    <a href="#">Twitter</a>,
    <a href="#">Facebook</a>
    <address>
        <a href="mailto:Adrasteia@mail.com">Adrasteia@mail.com</a>
    </address>
    ...
</footer>