7 полезных атрибутов HTML, о которых не все знают

Каждый веб-разработчик должен иметь навыки использования HTML. Без знания этого языка нельзя стать стать настоящим профессионалом. Любой сайт в интернете создан на основе HTML, потому что он включает множество полезных и эффективных функций. Кроме того HTML также имеет атрибуты, которые можно использовать совместно с элементами или тегами, чтобы добавить им определенные интерактивные функции.

Рассмотрим далее несколько таких полезных возможностей HTML, которыми не все пользуются.

1. Accept

Как известно, HTML имеет средства ввода, позволяющие загружать файлы. Для расширения этой возможности атрибут HTML accept используется для указания допустимых при загрузке на сервер типов файлов или формата. 

Бывает так, что на сервер разрешена загрузка лишь файлов типа jpg и png.

Пример:

<input type="file" accept=".jpg, .png" >

Проверить это можно на сайте CodePen:

2. Multiple

Атрибут HTML multiple можно прикрепить к тегам <input> и <select>. По сути он позволяет пользователю вводить несколько значений. Например, его можно использовать для разрешения загрузки нескольких файлов.

Пример кода:

<input type="file" multiple />

3. Content editable

Атрибут contenteditable используется для разрешения редактирования на веб-странице содержимого HTML. По сути это позволяет пользователю редактировать элементы страницы, имеющие атрибут contenteditable.

Пример:

<div>
      <h1> Employees: </h1>
      <ul contenteditable="true">
        <li> 1. John </li>
        <li> 2. Mehdi </li>
        <li> 3. James </li>
      </ul>
  </div>

Этот код позволяет редактировать список сотрудников на веб-странице.

Проверим:

4. Download

Атрибут HTML download определяет загрузку после нажатия на ссылку. Этот атрибут позволяет пользователям скачивать файлы с сайтов.

Пример:

<div>
 <a href="index.html" download="fileName">Download this</a>
</div>

Нужно только указать название файла для атрибута download и путь к файлу для href.

Проверим:

5. Translate

Атрибут translate используется для того, чтобы указать, нужно или нет переводить содержимое. Это глобальный атрибут, он может быть прикреплен ко всем тегам HTML. Его можно использовать, например, на текстовых логотипах, чтобы сохранить оригинальное название бренда при переводе страницы на другой язык.

Пример кода:

<p translate="no">Mehdi</p>

6. Poster

Атрибут poster используется для отображения изображения во время загрузки HTML видео или до тех пор, пока пользователь не нажмет кнопку воспроизведения.

Пример кода:

<video poster="picture.jpeg" controls>
   <source src="file.mp4" type="file/mp4">
   <source src="file.ogg" type="file/ogg">
</video>

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

7. Pattern

Атрибут pattern позволяет легко добавлять регулярное выражение к элементу ввода внутри формы. Чтобы помочь пользователю вводить текст, соблюдая форму, также можно использовать с pattern другой атрибут title.

Пример кода:

<form >
  <label for="input">Country Code:</label>
  <input type="text" id="input" pattern="[A-Za-z]{3}" title="Three letters country code.">
  <input type="submit">
</form>

Проверим:

Заключение

Очевидно, что атрибуты HTML очень полезны. Их нужно знать, так как они позволяют добавлять к выражениям HTML полезные функции.

Читайте также:

• Работа с HTML и CSS: 10 полезных приемов для дизайнеров
• 5 полезных советов для загрузки HTML-файлов
• Создание пользовательского HTML-элемента без фронтенд-фреймворка

Читайте нас в Telegram, VK и Яндекс.Дзен

---

Перевод статьи Mehdi Aoussiad: 7 Useful HTML Attributes that You Probably Don’t Know