Статьи

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

media=»(min-width: 50rem)»
/>
<source />
<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> 

1018 горячих новых HTML-тегов, которые стоит использовать сегодня | Творческий блок Блоки текста часто могут содержать ссылки, такие как диаграмма, диаграмма или изображение. Хотя это может быть связано, не требуется понимать контекст. Для такого рода контента элемент <figure> – идеальный выбор.Как правило, любой связанный контент, который может быть самодостаточным, является хорошими кандидатами, поскольку его можно использовать отдельно от основного потока документов. Скорее всего, на них будет ссылаться число в большем блоке текста.<Figcaption> элемент может быть использован , чтобы обеспечить описание к содержимому. Его использование обеспечивает семантическую связь и гарантирует, что описание не является частью самого рисунка.Если содержимое косвенно связано с основным документом, например, цитата, то лучше подходит элемент <aside> .<figure>
<img alt=»Chart showing a spike in React-based projects» src=»framework-usage.png» />
<figcaption>JavaScript framework statistics 2010-2020</figcaption>
</figure>

11. <menu>

Этот элемент должен содержать список различных действий, которые может выполнять пользователь. Например, это может использоваться при выборе кистей в приложении для рисования. Думайте об этом как об интерактивном эквиваленте элемента  <ul>.Раньше атрибут type влиял на поведение меню. Тип контекста позволял бы добавлять элементы в контекстное меню или контекстное меню, но с тех пор он был удален из спецификации. Прямо сейчас по умолчанию и доступен единственный тип – панель инструментов, которая используется для отображения этих элементов на экране.

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

      <menu>
      <li><button>Round</button></li>
      <li><button>Flat</button></li>
      <li><button>Fan</button></li>
      </menu>

      12. <del> and <ins>

      12 и 18 горячих новых HTML-тегов, которые стоит использовать сегодня | Творческий блок При отображении изменений в блоке текста может быть полезно иметь возможность визуально увидеть, что изменилось. Элемент показывает, что было удалено, и , что его заменило. Оба могут иметь атрибуты cite и datetime, которые определяют, почему и когда произошло это изменение. Despite the constant negative press <del>covfefe</del><ins>coverage</ins>

      13.  <input> 

      13 <ввод>18 горячих новых HTML-тегов, которые стоит использовать сегодня | Творческий блок Хотя элемент может быть одним из самых старых элементов, у него есть много хитростей в рукаве. Даже сегодня многие веб-сайты все еще не используют их в полной мере. Типа атрибут на входе может изменить его поведение резко. Например, цвет будет отображать палитру цветов для пользователя без необходимости в дополнительном JavaScript. Диапазон будет оказывать ползунок, чтобы выбрать между двумя значениями, вместо того, чтобы требовать значения конкретного быть введен. Дата ввод показывает локализованный выбор даты без каких – либо дополнительных накладных расходов. Хотя они имеют широкую поддержку браузеров, те, которые не отображают обычный ввод текста, могут быть предоставлены с возможностью отката. Все они автоматически проверяют свой контент способом, который имеет смысл для этого конкретного ввода. Для дополнительных проверок атрибут шаблона может принимать регулярное выражение, которое введенное значение должно пройти для отправки. <input type=»color» value=»#FF0657″ />
      <input name=»username» pattern=»[a-z]{5,10}» title=»Between 5 and 10 lowercase characters»>

      14. <dialog>

      14 Отображение контента в отдельном выделенном окне – популярный шаблон в Интернете. Их обычно называют модальными, но элемент охватывает больше вариантов использования, таких как предупреждения. Сам по себе элемент не будет виден. Он будет отображаться только с примененным атрибутом open, автоматически отображаемым над остальным содержимым страницы. Сопровождающий его API JavaScript позволяет открывать диалоги с помощью метода showModal, который затем предоставляет ему псевдоэлемент :: backdrop. Затем его можно стилизовать, чтобы затемнить содержимое за ним. В настоящее время поддерживаются только браузеры Chrome, Edge и Samsung. Для тех, кому не хватает поддержки, диалоги будут отображаться как любой другой контейнер и могут быть полифиллированы, чтобы действовать так же. <dialog open>
      <p>This is a HTML-powered dialog box.</p>
      </dialog>

      15. <kbd>

      18 горячих новых HTML-тегов, которые стоит использовать сегодня | Творческий блок При предоставлении инструкций с клавиатуры, таких как сочетания клавиш или ввод для поиска, нам необходимо различать имена клавиш с остальным окружающим текстом. Для этого специально применяется элемент <kbd> . При необходимости элементы <kbd> можно вкладывать друг в друга, например, комбинацию клавиш. Close this window by pressing <kbd>Esc</kbd>

      16. <meter>

      16 <метр>18 горячих новых HTML-тегов, которые стоит использовать сегодня | Творческий блок Для числовых данных, имеющих определенный диапазон, элемент может предоставить визуальное указание того, что эти данные означают в контексте. Браузер может условно стилизовать элемент, чтобы предупреждать о слишком высоких или низких значениях. < meter > не должен использоваться для обозначения прогрессии. Для этого лучше подходит элемент <progress> . <meter value=»6.4″ min=»0″ max=»10″ low=»4″ high=»9″ optimum=»7.5″></meter>

      17.  <time>

      17 <время>Хотя конкретная дата или время в предложении могут быть очевидны в контексте, машины, анализирующие это содержимое, могут не понять. Элемент отделяет дату или время от остальной части предложения и может предоставить атрибут datetime, который показывает дату в формате, который проще для машинного анализа. GenerateJS is happening on the <time datetime=»2020-04-02″>2nd April</time>!

      18. <dl>, <dt> and <dd>

      18Он используется для наборов пар ключ-значение, таких как глоссарий. Список описаний(<dl>) группирует набор терминов и их описания. Каждый термин содержится в элементе, за которым следует описание в . Несколько терминов могут быть определены одним описанием и наоборот. Порядок – единственное, что имеет значение.<dl>
      <dt>Element</dt>
      <dd>A group consisting of a start tag, contents, and an end tag.<dd>
      </dl> Статьи по Теме

      Кнопка «Наверх»