Семантические теги HTML5, которые вы должны использовать

Семантические теги HTML5, которые вы должны использовать

11 марта 2020 HTML

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

Основные семантические теги HTML, такие как <header>, <footer> и <nav>, почти не требуют пояснений. Но есть множество новых HTML-тегов, которые веб-разработчики также должны использовать. Здесь я собрал восемь HTML-тегов, которыми вы должны начать пользоваться прямо сейчас, и кратко объясню, как их следует использовать. Кроме того, здесь вы найдете описание ещё пяти HTML-тегов, которые необходимо немедленно заменить, если вы всё ещё используете их.

01. <picture> 

Тег <picture> аналогичен тегу <img>, но элемент <picture> обеспечивает гибкость, позволяя использовать вложенные элементы <source> в которых содержатся разные форматы одного и того же изображения. Изображения можно адаптировать на основе медиазапроса или поддержки типа изображения. Говоря простыми словами, тег выводит то изображение, которое подходит для конкретного устройства или браузера. Например, он может вывести изображение WebP в браузерах, которые поддерживают более новый формат изображений.

<picture>
	<!-- Вывод изображения в зависимости от разрешения экрана и поддержки формата -->
	<source srcset="/img/img1024.png" type="image/webp" media="(max-width: 1024px)">
	<source srcset="/img/img1280.png" type="image/png" media="(max-width: 1280px)">
	<source srcset="/img/img1920.jpg" type="image/jpg" media="(max-width: 1920px)">
</picture>

02. <datalist>

Тег <datalist> предоставляет интерфейс автозаполнения для элементов <input>. Каждый список содержит набор элементов <option>, имеющих соответствующее значение. При связывании с <input> с помощью атрибута «list» он может предоставить раскрывающийся список или даже отображать предложения в качестве пользовательских типов.

В приведенном ниже примере при вводе города в поле <input>, пользователю будут предложены варианты городов для автозаполнения:

<input list="city">
<datalist id="city">
	<option value="Москва"></option>
	<option value="Санкт-Петербург"></option>
	<option value="Нижний Новгород"></option>
</datalist>

03. <dl> 

Тег <dl> — это элемент, который служит контейнером для создания глоссария. Внутри него содержится термин (<dt>) и его определение (<dd>).

<dl>
  <dt>Термин 1</dt>
   <dd>Определение 1</dd>
  <dt>Термин 2</dt>
   <dd>Определение 2</dd>
</dl>

04. <details>

Используя тег <details> вместе с <summary>, мы можем достичь эффекта аккордеона без JavaScript, например страницу вопрос-ответ (FAQ). Нажатие на <summary> выведет остальную часть текста.

<details>
    <summary>Вопрос</summary>
    Текст ответа
</details>

05. <dfn>

Сложные термины или сокращения в тексте часто нуждаются в определении. Термин, заключенный в тег <dfn>, будет определяться текстом, который его окружает.

06. <figure>

Используется для группировки изображений, а с помощью тега <figcaption> можно добавить подписи к ним.

<figure>
    <img src="/img/img.jpg" alt="" />
    <figcaption>Описание изображения</figcaption>
</figure>

07. <code>

Выделяет программный код в тексте. Для больших блоков кода можно объединить с тегом <pre>.

08. <time>

Часто в тексте значения времени записываются по-разному. Помечая эти значения тегом <time>, поисковые системы могут быстро извлечь эту информацию. Используйте атрибут «datetime», чтобы указать определенное время в более удобном для машин формате.

<time>11-03-2020</time>
<time datetime="2020-03-11T10:23:11+03:00">11-03-2020</time>

5 HTML-тегов, которых нужно избегать

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

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

Ниже рассмотрим пять тегов, которые точно не должны находиться внутри HTML-кода страницы. Если вы обнаружите какие-либо из них в своем коде замените их.

01. <font>

Исторически, тег <font> использовался для стилизации блока текста, теперь лучше всего ориентироваться и стилизовать текст с помощью CSS. Согласно Advanced Web Ranking, почти 6,5 миллионов веб-сайтов по-прежнему используют этот тег, несмотря на то, что он устарел уже много лет назад.

02. <menuitem>

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

03. <big>

Тег <big> увеличил бы размер текста, находящийся внутри него на один уровень. Его сопутствующий <small> все еще является допустимым HTML, но теперь имеет более определенное семантическое значение, относящееся к мелкому шрифту.

04. <center>

Ранее тег <center> был единственным способом централизации как блочного, так и встроенного содержимого, но теперь он заменен на text-align: center в CSS, который выполняет ту же работу.

05. <marquee>

Тег <marquee> позволял тексту внутри тега перемещаться по экрану, как новостная лента. Ранее эта функция была популярна, но была классифицирована как устаревшая в пользу CSS-анимации.

Остались вопросы по статье? Задайте их прямо сейчас!
Похожие записи
Как конвертировать HTML в Word на JavaScript

Экспортировать HTML-страницу как документ Microsoft Word можно различными способами. Существуют PHP-библиотеки, плагины jQuery. Но когда HTML-файл прост без какой-либо сложной разметки, тогда можно экспортировать HTML-содержимое в формат .doc без особых усилий. Мне даже не нужны сторонние библиотеки. Если вы хотите Читать далее

Сохранение данных в форме после обновления страницы

Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность Читать далее

Использование drag and drop на HTML5

Из всех технологий, которые нужно освоить веб-разработчикам, кажется, что та, которая вызывает наибольшую путаницу и потенциальные проблемы, - это drag ‘n’ drop (перетаскивание). Это не новая технология, она существует уже много лет, но многие разработчики все ещё цепляются за старые Читать далее

Прижать футер с помощью Flexbox

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

Захват изображения с камеры с помощью HTML5

С появлением HTML спецификации Media Capture стало возможным получать медиаданные с камеры пользователя так же, как если бы он загрузил на сайт какой-то файл с помощью элемента <input type="file"/>. Media Capture переопределяет поле для отправки файла если к нему добавить Читать далее

Коды специальных символов HTML и символы юникода (unicode)

В статье приведена наиболее полная таблица кодов специальных символов HTML и символы юникода (unicode), которые можно использовать для своих проектов и в социальных сетях. Коды специальных символов HTML Чтобы клавиатура была удобной в использовании, она должна быть достаточно компактной. Однако Читать далее

Добавить комментарий

*

code