11 недооцененных тегов HTML5 для повышения качества веб-дизайна

HTML5 - это мощный язык разметки, который веб-разработчики используют для структурирования содержимого веб-страниц. Хотя большинство разработчиков знакомы с такими широко используемыми тегами, как div, p и img, есть несколько менее известных тегов HTML5, которые могут быть невероятно полезны в определенных сценариях. В этой статье мы рассмотрим 11 из этих менее известных тегов HTML5.

1. time - информация о дате и времени

Тег time используется для обозначения определенных дат, времени или длительности. Он предоставляет стандартный способ представления временной информации в документе.

<p>Статья опубликована <time datetime="2024-09-27">27 сентября 2024</time></p>

Атрибут datetime используется для указания машиночитаемого формата даты или времени, позволяя браузерам и поисковым системам правильно понимать и интерпретировать информацию. Кроме того, он предоставляет возможность применять стили CSS или взаимодействия JavaScript на основе значения даты или времени.

2. Низкая важность с тегом small

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

<footer>
  <small>&copy; 2024 Сайт. Все права защищены.</small>
</footer>

Используя тег small, вы можете визуально отличить менее важный контент от основного содержимого страницы.

3. Цитирование с помощью q и blockquote

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

<blockquote>
  <p>
    <q>
      "Единственный способ делать работу на отлично – любить то, чем занимаетесь."
    </q>
    - Стив Джобс
  </p>
</blockquote>

В приведенном выше примере тег q используется для выделения цитируемого текста, а тег blockquote указывает на то, что это цитата на уровне блока. Кроме того, тег cite может использоваться для указания авторства цитируемого источника.

4. Определение сочетания клавиш тегом kbd

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

<p>Чтобы сохранить документ, нажмите <kbd>Ctrl + S</kbd>.</p>

В приведенном выше примере тег kbd используется для выделения сочетания клавиш Ctrl + S для сохранения документа. Это помогает пользователям легко идентифицировать информацию, связанную с клавиатурой.

5. Контекстное выделение с тегом mark

Тег mark позволяет выделить релевантный контент в документе. Он особенно полезен, когда вы хотите привлечь внимание к определенной информации или результатам поиска. Заключив соответствующий текст в тег mark, вы можете визуально подчеркнуть его важность. Например:

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Sed in magna <mark>aliquet ligula</mark> aliquet bibendum.
</p>

В приведенном выше примере текст aliquet ligula будет визуально выделен, что выделит его на фоне окружающего контента.

6. Обозначение аббревиатур тегом abbr

Тег abbr используется для обозначения сокращений в документе. Он позволяет указать дополнительную информацию или полную форму сокращения для наглядности. Вот пример:

<p><abbr title="Всемирная паутина">WWW</abbr> произвела революцию в том, как мы получаем доступ к информации.</p>

В приведенном выше примере тег abbr используется для обозначения аббревиатуры WWW, а атрибут title предоставляет полную форму World Wide Web в качестве всплывающей подсказки, когда пользователи наводят курсор на аббревиатуру.

7. Вставка, удаление и редактирование тегами ins, del, и s

Теги ins, del и s используются для указания изменений или исправлений в документе. Тег ins представляет вставленное содержимое, тег del - удаленное содержимое, а тег s - содержимое, которое больше не соответствует действительности. Эти теги полезны для контроля версий, редактирования документов или выделения изменений. Вот пример:

<p>
  Цена продукта была снижена с <del>$99.99</del> до <ins>$79.99</ins>.
  Пожалуйста, обратите внимание, что это изменение вступает в силу с <s>1 января, 2024</s> по <ins>1 февраля, 2024</ins>.
</p>

В приведенном выше примере тег del используется для определения старой цены, тег ins указывает на новую цену, а тег s указывает на то, что предыдущая дата больше не действительна.

8. Выделение фото с figure и figcaption

Теги figure и figcaption используются совместно для разметки изображений или иллюстраций вместе с подписями к ним. Тег figure представляет художественное оформление или мультимедийный материал, в то время как тег figcaption содержит подпись или описание. Вот пример:

<figure>
  <img src="example.jpg" alt="Некоторое фото">
  <figcaption>Пример изображения.</figcaption>
</figure>

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

9. Организация вариантов с помощью optgroup

Тег optgroup используется в теге select для объединения связанных параметров. Он особенно полезен, когда у вас большое количество параметров и вы хотите обеспечить более организованный и интуитивно понятный пользовательский интерфейс. Вот пример:

<label for="car-model">Выберите марку машины:</label>
<select id="car-model" name="car-model">
  <optgroup label="Седаны">
    <option value="camry">Toyota Camry</option>
    <option value="accord">Honda Accord</option>
  </optgroup>
  <optgroup label="Внедорожники">
    <option value="crv">Honda CR-V</option>
    <option value="rav4">Toyota RAV4</option>
  </optgroup>
</select>

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

10. Добавление контактов с тегом address

Тег address используется для представления контактной информации в документе. Его можно использовать для указания контактных данных автора, организации или любого другого соответствующего объекта. Вот пример:

<address>
  <p>Иван Петров</p>
  <p>Пр-кт Ленина 12, Екатеринбург</p>
  <p>Россия</p>
  <p>Почта: i.petrov90@mail.ru</p>
  <p>Телефон: +7 (912) 345 67-89</p>
</address>

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

11. Предопределенные параметры с тегом datalist

Тег datalist позволяет вам предоставить предопределенный список параметров для поля input. Он работает в сочетании с атрибутом list тега input. Когда пользователи взаимодействуют с полем ввода, они видят выпадающий список предложений, основанных на предопределенных параметрах. Вот пример:

<label for="fruit">Выберите фрукт:</label>
<input type="text" id="fruit" name="fruit" list="fruit-list">
<datalist id="fruit-list">
  <option value="Яблоко">
  <option value="Банан">
  <option value="Апельсин">
  <option value="Манго">
</datalist>

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

Заключение

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

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