Поиск классных элементов HTML, особенно если вы не знаете, что ищете, часто похож на выбрасывание в кучу мусора.

Не волнуйтесь, я сделал за вас грязную работу!

Изучив, казалось бы, бесконечную кучу HTML элементов, я откопал несколько редко используемых драгоценных камней!

1. meter и progress

Элемент progress — это семантически правильный способ отображения индикаторов выполнения.

Элемент meter — это progress на стероидах. Помимо отображения скалярного измерения в пределах известного диапазона, он позволяет указать минимальное, высокое и оптимальное диапазон.

<meter
  min="0"
  max="100"
  low="25"
  high="75"
  optimum="80"
  value="50"
></meter>

2. sup и sub

Вы можете добавить в документ надстрочные индексы (например, x²) с помощью sup и подстрочные индексы (например, x₀) с помощью sub.

3. datalist

datalist позволяет добавлять предложения автозаполнения к вашим input элементам.

ПРИМЕЧАНИЕ

  1. Предложения НЕ ОГРАНИЧИВАЮТСЯ текстом inputs, но могут использоваться с цветом, датой, временем и даже диапазоном входы.
  2. Стиль предложений по умолчанию, по меньшей мере, неприятный на вид. Но вы всегда можете стилизовать его с помощью CSS.

4. map и area

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

<img
  src="workplace.jpg"
  alt="Workplace"
  usemap="#workmap"
  width="400"
  height="379"
/>
<map name="workmap">
  <area
    shape="rect"
    coords="34,44,270,350"
    alt="Computer"
    href="computer.html"
  />
  <area
    shape="rect"
    coords="290,172,333,250"
    alt="Phone"
    href="phone.html"
  />
  <area
    shape="circle"
    coords="337,300,44"
    alt="Cup of coffee"
    href="coffee.html"
  />
</map>

4. details и summary

details и summary используются для создания сворачиваемого содержимого без использования какого-либо JavaScript. Это семантический метод создания раскрывающихся списков.

6. object

Рвёте волосы, чтобы встроить файлы на свой сайт? Не смотрите дальше!

object позволяет встраивать широкий спектр файлов, таких как PDF, изображения, видео, аудио и даже >видео на YouTube.

7. abbr

Элемент abbr позволяет добавлять в документ аббревиатуры. Когда пользователь наводит курсор на аббревиатуру, отображается полная форма. Кроме того, программы чтения с экрана также можно настроить для считывания полной формы, когда встречается аббревиатура.

Это все, ребята! 🎉

Ссылка

  1. Школы W3
  2. МДН

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

Нужен фрилансер по фронтенд-разработке с самым высоким рейтингом, чтобы избавиться от проблем с разработкой? Свяжитесь со мной на Upwork

Хотите увидеть, над чем я работаю? Загляните на мой Персональный сайт и GitHub

Хотите подключиться? Свяжитесь со мной в LinkedIn

Я цифровой кочевник и иногда путешествую. Подпишитесь на меня в Instagram, чтобы узнать, чем я занимаюсь.