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