TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

18 интересных HTML-тегов, которые стоит использовать сегодня

4 680

При таком огромном количестве HTML-тегов, которые можно использовать, как узнать, какие из них лучше? Что ж, чтобы помочь вам, мы перечислили в общей сложности 18 замечательных тегов, которые помогут вам построить ваш сайт правильно.

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

01 <sub> и <sup>

Текст, отображаемый как нижний или верхний индекс, например атомы в химических формулах или экспоненты в математических формулах, может быть индивидуально оформлен в CSS. Однако, чтобы сохранить их семантическое значение, мы можем использовать элементы и соответственно. Их не следует использовать исключительно по стилистическим причинам. В таких случаях CSS – правильный подход.

02 <address>

 

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

 
.

03 <map> и <area>

03 и

Карты изображений позволяют использовать различные части изображения как ссылки. Хотя это не новый шаблон проектирования, они все же полезны для создания взаимодействий, которые были бы затруднены с помощью текста, например карты. < map > принимает name атрибута, который связывает <IMG> элемент где -то еще с usemap атрибутом. Каждый <area> внутри <map> определяет место, по которому пользователь может щелкнуть внутри определяет место, по которому пользователь может щелкнуть.

04  <video>

Элемент <video> стал выдающимся дополнением к HTML5. Это, вместе с его эквивалентом <audio> , сегодня поддерживает практически все средства массовой информации в Интернете.

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

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

Точно так же контентом можно поделиться на удаленном устройстве, таком как Chromecast или Apple TV, если браузер поддерживает это. Это можно контролировать с помощью JavaScript или полностью отключить с помощью атрибута disableremoteplyback.

05 <cite>


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

06 <picture>

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

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

Например, пользователям, использующим темный режим, может быть предоставлено более темное изображение с помощью запроса prefers-color-scheme: dark media.

Это дает нам конкретный контроль над тем, какое изображение и когда показывать. Аналогичный атрибут srcset в элементе.  <picture> дает браузеру больше свободы в выборе источника. Используйте элемент для преднамеренного художественного оформления, например, для упрощения схемы для небольших экранов.

07  <dfn>

Заключение слова или фразы в элемент <dfn> указывает на то, что это определяемый термин. Когда он помещается внутри <p> , <dl> или <section>, окружающее его содержимое рассматривается как определение. Атрибут id может использоваться для обратной ссылки, когда он в следующий раз появится на странице.

08 <var>

В технической литературе  <var> – обычное дело. Чтобы избежать путаницы с остальными словами в предложении, можно использовать элемент для их разделения и стилизации по отдельности. Для более крупных выражений более подходящим подходом может быть MathML. Но может быть полезным при обращении к частям более крупного выражения как части предложения.

09 <q> и <blockquote>

18 горячих новых HTML-тегов, которые стоит использовать сегодня | Творческий блок

<q> элемент представляет собой встроенный элемент, предназначенный содержать цитаты от кого – то или что – то. Стили пользовательского агента автоматически заключают свое содержимое в кавычки. Он имеет необязательный атрибут cite, который может быть ссылкой на исходный источник.

Элемент <blockquote> выполняет ту же роль, но для более длинных цитат на уровне блока.

10. <figure> и <figcaption> 

18 горячих новых HTML-тегов, которые стоит использовать сегодня | Творческий блок

Блоки текста часто могут содержать ссылки, такие как диаграмма, диаграмма или изображение. Хотя это может быть связано, не требуется понимать контекст. Для такого рода контента элемент <figure> – идеальный выбор.
Как правило, любой связанный контент, который может быть самодостаточным, является хорошими кандидатами, поскольку его можно использовать отдельно от основного потока документов. Скорее всего, на них будет ссылаться число в большем блоке текста.
<Figcaption> элемент может быть использован , чтобы обеспечить описание к содержимому. Его использование обеспечивает семантическую связь и гарантирует, что описание не является частью самого рисунка.
Если содержимое косвенно связано с основным документом, например, цитата, то лучше подходит элемент <aside> .

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