При таком огромном количестве HTML-тегов, которые можно использовать, как узнать, какие из них лучше? Что ж, чтобы помочь вам, мы перечислили в общей сложности 18 замечательных тегов, которые помогут вам построить ваш сайт правильно.
Если вы пропустили первую часть списка, попробуйте первые 12 горячих HTML-тегов. Хотите новые блестящие ресурсы? Вот наш список отличных инструментов для веб-дизайна.
01 <sub> и <sup>
01 и
Текст, отображаемый как нижний или верхний индекс, например атомы в химических формулах или экспоненты в математических формулах, может быть индивидуально оформлен в CSS. Однако, чтобы сохранить их семантическое значение, мы можем использовать элементы и соответственно. Их не следует использовать исключительно по стилистическим причинам. В таких случаях CSS – правильный подход.
H<sub>2</sub>O
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>02 <address>
02
Многие веб-сайты предоставляют контактную информацию, чтобы найти компанию или связаться с автором. Элемент следует использовать для обертывания всей этой информации, чтобы упростить ее получение автоматическими инструментами. Он относится к автору веб-сайта, но может также относиться к автору статьи, если помещен в элемент
<address>
Email: <a href="mailto:netmag@futurenet.com">netmag@futurenet.com</a>
Twitter: <a href="https://www.twitter.com/netmag</a>@netmag</a>
</address>03 <map> и <area>
03Карты изображений позволяют использовать различные части изображения как ссылки. Хотя это не новый шаблон проектирования, они все же полезны для создания взаимодействий, которые были бы затруднены с помощью текста, например карты. < map > принимает name атрибута, который связывает <IMG> элемент где -то еще с usemap атрибутом. Каждый <area> внутри <map> определяет место, по которому пользователь может щелкнуть внутри определяет место, по которому пользователь может щелкнуть.
<map name="london">
<area shape="circle" coords="200,75,50" href="westminster.html" alt="Westminster">
</map>
<img usemap="#london" src="map.png" alt="Map of London" />04 <video>
04Элемент <video> стал выдающимся дополнением к HTML5. Это, вместе с его эквивалентом <audio> , сегодня поддерживает практически все средства массовой информации в Интернете.
Он может иметь атрибут src, определяющий воспроизводимый контент, или набор элементов внутри него, из которых браузер может выбирать. Он решит, какой источник играть, в зависимости от порядка их предоставления. Мы можем выбрать показ видео более высокого качества для пользователей с экранами с более высокой плотностью изображения или менее динамичный контент для тех, кто предпочитает ограниченное движение.
Некоторые браузеры экспериментируют с отображением видео в небольшом плавающем окне на экране, когда вкладка неактивна. Это можно включить с помощью атрибута autopictureinpicture. Его также можно явно отключить с помощью disablepictureinpicture.
Точно так же контентом можно поделиться на удаленном устройстве, таком как Chromecast или Apple TV, если браузер поддерживает это. Это можно контролировать с помощью JavaScript или полностью отключить с помощью атрибута disableremoteplyback.
<video>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>05 <cite>
05Хотя атрибут cite в элементах и может быть полезными метаданными, сам элемент используется, когда мы хотим показать процитированный источник пользователю. < blockquote> элемент должен содержать только имя цитируемой работы, такие как книги или пьесу. Он не должен включать имена тех, кто участвовал в его создании.
<cite>Net magazine</cite>06 <picture>
06Современные устройства поставляются с экранами разных размеров, соотношений сторон и плотностей пикселей. Предоставляя только маленькие или только большие изображения, пользователи получают более низкое качество из-за получения изображений с низким разрешением или из-за более медленной загрузки страницы.
Элемент позволяет нам определять разные источники для одного и того же изображения в зависимости от множества факторов, таких как ширина экрана, ориентация устройства или поддержка определенного формата, такого как WebP. Все, что требуется, – это установить соответствующий медиа-запрос для каждого определенного с атрибутом srcset.
Например, пользователям, использующим темный режим, может быть предоставлено более темное изображение с помощью запроса prefers-color-scheme: dark media.
Это дает нам конкретный контроль над тем, какое изображение и когда показывать. Аналогичный атрибут srcset в элементе. <picture> дает браузеру больше свободы в выборе источника. Используйте элемент для преднамеренного художественного оформления, например, для упрощения схемы для небольших экранов.
<picture>
<source
srcset="images/2x-landscape.jpg 2x, images/1x-landscape.jpg 1x"
media="(min-width: 50rem)"
/>
<source srcset="images/2x-square.jpg 2x, images/1x-square.jpg 1x" />
<img src="images/1x-landscape.jpg" />
</picture>07 <dfn>
07 Заключение слова или фразы в элемент <dfn> указывает на то, что это определяемый термин. Когда он помещается внутри <p> , <dl> или <section>, окружающее его содержимое рассматривается как определение. Атрибут id может использоваться для обратной ссылки, когда он в следующий раз появится на странице.<p>
<dfn>Semantic markup</dfn> is HTML that provides meaning to content as well as presentation.
</p>08 <var>
08В технической литературе <var> – обычное дело. Чтобы избежать путаницы с остальными словами в предложении, можно использовать элемент для их разделения и стилизации по отдельности. Для более крупных выражений более подходящим подходом может быть MathML. Но может быть полезным при обращении к частям более крупного выражения как части предложения.
Using Pythagoras' theorem, the squares of sides <var>a</var> and <var>b</var> give the square of the hypotenuse <var>c</var>.09 <q> и <blockquote>
<q> элемент представляет собой встроенный элемент, предназначенный содержать цитаты от кого – то или что – то. Стили пользовательского агента автоматически заключают свое содержимое в кавычки. Он имеет необязательный атрибут cite, который может быть ссылкой на исходный источник.
Jeremy Keith describes HTML as the <q>unifying language of the World Wide Web</q>.
<blockquote>
It has an optional `cite` attribute that can be a link back to the original source.
</blockquote>10. <figure> и <figcaption>
10
Блоки текста часто могут содержать ссылки, такие как диаграмма, диаграмма или изображение. Хотя это может быть связано, не требуется понимать контекст. Для такого рода контента элемент <figure> – идеальный выбор.Как правило, любой связанный контент, который может быть самодостаточным, является хорошими кандидатами, поскольку его можно использовать отдельно от основного потока документов. Скорее всего, на них будет ссылаться число в большем блоке текста.
<Figcaption> элемент может быть использован , чтобы обеспечить описание к содержимому. Его использование обеспечивает семантическую связь и гарантирует, что описание не является частью самого рисунка.
Если содержимое косвенно связано с основным документом, например, цитата, то лучше подходит элемент <aside> .
