Семь крутых HTML-элементов, которые мало кто использует

В этой статье раскрываются семь малоизвестных, но мощных HTML-элементов, таких как meter, progress, sup, sub, datalist, map, area, details, summary, object и abbr. Узнайте, как эти элементы могут улучшить ваш сайт и функциональность без использования JavaScript.

meter & progress

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

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

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

sup & sub

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

Пример использования sup

  
<p>
  <strong>Теорема Пифагора</strong>: 
  в прямоугольном треугольнике квадрат гипотенузы 
  равен сумме квадратов двух других сторон (катетов).
</p>
<p>
  <var>a<sup>2</sup></var> + 
  <var>b<sup>2</sup></var> = 
  <var>c<sup>2</sup></var>
</p>
<p>
  <i>a</i> = длина 1-го катета, <i>b</i> = длина 2-го катета, <i>c</i> = длина гипотенузы
</p>
  

Теорема Пифагора: в прямоугольном треугольнике квадрат гипотенузы равен сумме квадратов двух других сторон (катетов).

a² + b² = c²

a = длина 1-го катета, b = длина 2-го катета, c = длина гипотенузы

Пример использования sub

  
<p>
  Почти у каждого разработчика любимая молекула — это
  <strong>
    C<sub>8</sub>
    H<sub>10</sub>
    N<sub>4</sub>
    O<sub>2</sub>
  </strong>
  , известная как кофеин.
</p>
  

Почти у каждого разработчика любимая молекула — это C₈ H₁₀ N₄ O₂ , известная как кофеин.

datalist

datalist позволяет добавить автозаполнение в ваши элементы ввода.

  
<label for="ice-creame-choice">Choose a flavor:</label>
<input list="ice-creame-flavors" id="ice-creame-choice" name="ice-creame-choice" />

<datalist id="ice-creame-flavors">
  <option value="Chocolate" />
  <option value="Coconut" />
  <option value="Mint" />
  <option value="Strawberry" />
  <option value="vanilla" />
</datalist>
  

Пример: Choose a flavor:

Примечание: Данный элемент не ограничивается текстовыми полями, могут использоваться с цветом, датой, временем и даже диапазонами. Стиль по умолчанию, мягко говоря, неприятен для глаз. Но вы всегда можете стилизовать его с помощью CSS.

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>
  

details & summary

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

  
<details>
  <summary>Детальное описание</summary>
  Какое то детальное описание =)
</details>
  

Пример:

object

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

abbr

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

  
<p>
  Вы можете использовать <abbr title="Cascading Style Sheets">CSS</abbr> для стилизации своей <abbr title="HyperText Markup Language">HTML</abbr> страницы
</p>    
  

Пример: Вы можете использовать CSS для стилизации своей HTML страницы