WEBWordPress - HTML

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

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

При таком огромном количестве 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>

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

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

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

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

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

Как добиться максимального эффекта от линкбилдинга за 4 шага

CSSWEB

CSS Game: 8 игр для увлекательного изучения CSS

WEB

DNS для веб-разработчиков

WEBWordPressWordPress - Админка

Используйте MailGun для пересылки электронной почты на вашем домене в Gmail