Семантические теги 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 миллионов веб-сайтов по-прежнему используют этот тег, несмотря на то, что он устарел уже много лет назад.
В сочетании с <menu> тег <menuitem> будет предоставлять параметры и действия для выполнения внутри контекстных пунктов меню. На данный момент это удалено из спецификации, так как тег так и не стал поддерживаться во многих в браузерах.
03. <big>
Тег <big> увеличил бы размер текста, находящийся внутри него на один уровень. Его сопутствующий <small> все еще является допустимым HTML, но теперь имеет более определенное семантическое значение, относящееся к мелкому шрифту.
04. <center>
Ранее тег <center> был единственным способом централизации как блочного, так и встроенного содержимого, но теперь он заменен на text-align: center в CSS, который выполняет ту же работу.
05. <marquee>
Тег <marquee> позволял тексту внутри тега перемещаться по экрану, как новостная лента. Ранее эта функция была популярна, но была классифицирована как устаревшая в пользу CSS-анимации.
Как сделать кнопку назад на сайте? Самый простой вариант это с помощью JavaScript-функции history. С ней можно переходить вперед, назад, обновлять страницу и делать переход на две и более страницы сразу. Кнопка назад Как ссылка: <a onclick="javascript:history.back(); return false;">Назад</a> Как Читать далее
Чтобы при вводе даты в input выпадал удобный календарик можно воспользоваться двумя способами: стандартным полем HTML5 type="date" или JavaScript библиотекой Bootstrap Datepicker. Рассмотрим подробнее эти способы в этой статье. Календарь для input HTML5 Просто применяем у input атрибут type="date" или Читать далее
Стоп-форма - это всплывающее окно, призывающее к действию, которое открывается через определенное время нахождения пользователя на странице или когда он пытается покинуть её. Чаще всего стоп-формы используются на Landing page. Стоп-форма по таймеру Рассмотрим пример вплывающего окна с формой на Читать далее
В статье приведена наиболее полная таблица кодов специальных символов HTML и символы юникода (unicode), которые можно использовать для своих проектов и в социальных сетях. Коды специальных символов HTML Чтобы клавиатура была удобной в использовании, она должна быть достаточно компактной. Однако Читать далее
С появлением HTML спецификации Media Capture стало возможным получать медиаданные с камеры пользователя так же, как если бы он загрузил на сайт какой-то файл с помощью элемента <input type="file"/>. Media Capture переопределяет поле для отправки файла если к нему добавить Читать далее
Введение спецификации HTML5 принесло с собой множество новых семантических тегов, которые придают ещё больше смысла тегам HTML. Это означает, что теперь веб-разработчикам нужно меньше придумывать и создавать осмысленные типы тегов для построения структуры своего сайта. Основные семантические теги HTML, такие Читать далее
Создание прилипающего футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью Flexbox. Без прилипающего футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. Читать далее
Добавить комментарий