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

htmltags-1220859

11 марта 2020 HTML

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

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

01.  

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

        
        
        
        

02.

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

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


        
        
        

03.  

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

  Термин 1
   Определение 1
  Термин 2
   Определение 2

04.

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

    Вопрос
    Текст ответа

05.

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

06.

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

    
    Описание изображения

07.

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

.

08.


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

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


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

01.


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

03.


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

04.


Ранее тег

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

05.

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

Читайте также: