Приветствую, Хабр! Представляю вашему вниманию перевод статьи «9 Extremely Useful HTML Tricks» автора Klaus.

У HTML есть много практических секретов, которые могут вам пригодиться.


Ниже приведены 9 чрезвычайно полезных трюков HTML.

1. Тег «figure»

Его можно использовать для разметки фотографии.

Элемент «figure» также может содержать «figcaption»:

<figure>
  <img src="https://thepracticaldev.s3.amazonaws.com/i/g84et7kjgp2phal89140.jpg" alt="Swat Kats" style="width:100%">
  <figcaption>Fig.1 - SWAT Kats</figcaption>
</figure>

И вот как это будет выглядеть:


Fig.1 — SWAT Kats

2. Тег «video»

Он позволяет встроить медиаплеер для воспроизведения видео.

Например, вы можете загрузить свое видео на AWS S3 и использовать тег «video», чтобы вставить его на свой веб-сайт.

Использование YouTube для этого может показаться непрофессиональным.

И Vimeo не позволяет вам вставлять свои видео без оплаты.

Вы можете указать определенные характеристики, как ширина, высота, автозапуск, цикл, элементы управления и т. д.

<video autoplay="" loop="" controls="" width="640" height="480">
<source type="video/mp4" src="https://endtest-videos.s3-us-west-2.amazonaws.com/documentation/endtest_data_driven_testing_csv.mp4">
</video>

И вот как это будет выглядеть:


Вы также можете встроить прямой эфир, используя getUserMedia() или WebRTC

3. Тег «picture»

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

Он должен содержать один или несколько тегов «source» и один тег «img».

Тег «img» будет использоваться только в случае, если окно просмотра не соответствует ни одному из тегов «source» или если не поддерживается браузером.

<picture>
   <source media="(min-width: 968px)" srcset="large_img.jpg">
   <source media="(min-width: 360px)" srcset="small_img.jpg">
   <img src="default_img.jpg" alt="avatar">
</picture>

4. Тег «progress»

Тег «progress» отображает ход выполнения задачи.

Этот тег не следует путать с тегом «meter» (который представляет собой датчик).

<progress value="63" max="100">
</progress>

Вот как это выглядит:


5. Тег «meter»

Вы можете использовать тег «meter» для измерения данных в заданном диапазоне (датчик).

Результат может быть установлен через минимальные и максимальные значения или в процентах.

<meter value="2" min="0" max="10">2 out of 10</meter>

<meter value="0.6">60%</meter>

И вот они:

6. Тег «map»

Тег «map» используется для определения клиентской карты изображений.

Карта изображения — это изображение с интерактивными областями.

Все, что вам нужно сделать, это ввести координаты X и Y в элементах из «map».

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

<img src="solar_system.png" width="500" height="300" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,52,92" href="earth.htm" alt="Earth">
  <area shape="circle" coords="60,48,5" href="mars.htm" alt="Mars">
  <area shape="circle" coords="135,48,12" href="saturn.htm" alt="Saturn">
</map>

7. Атрибут contenteditable

Этот атрибут указывает, является ли содержимое элемента доступным для редактирования.

<p contenteditable="true">This is an editable paragraph.</p>

8. Предложения по вводу

<input type="text" list="planets">
<datalist id="planets">
    <option value="Mercury"></option>
    <option value="Venus"></option>
    <option value="Earth"></option>
    <option value="Mars"></option>
    <option value="Jupiter"></option>
    <option value="Saturn"></option>
    <option value="Uranus"></option>
    <option value="Neptune"></option>
</datalist>

Надеюсь, вы не возражаете, что я не добавил разнообразные стили.

Я предпочитаю оформлять примеры по своему вкусу, как можно красивее.


9. Тег «noscript»

Содержимое внутри элемента «noscript» отображается браузером, только если отключён JavaScript.

Это обеспечивает запасной механизм для компонентов, которые перестанут работать без JavaScript.

<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>

Я думаю, это действительно круто, что вы ищете трюки HTML, но уверены ли вы, что ваше веб-приложение работает правильно на всех браузерах и устройствах?

Вы можете использовать Endtest для быстрого создания автоматических тестов и их выполнения в кросс-браузерном облаке.

Вам даже не нужен код, чтобы использовать его.

Серьезно, просто прочитайте документы.