Полезные HTML-атрибуты, о которых вы, возможно, не знаете

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

Атрибут: Accept

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

Например, мы можем принять загрузку на наш сервер только jpg и png. Вот пример:

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

HTML-атрибуты: Multiple

Атрибут multiple в HTML можно прикрепить к тегам input и select. Это в основном позволяет пользователю вводить несколько значений.

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

Вот пример:

<input type="file" multiple />

Атрибуты HTML: Contenteditable

Атрибут contenteditable используется, чтобы сделать HTML-контент доступным для редактирования на веб-странице. Вот, например, описание списка, содержимое которого можно редактировать, находясь на веб-странице:

<div>
      <h1> Employees: </h1>
      <ul contenteditable="true">
        <li> 1. Alex </li>
        <li> 2. Hellen </li>
        <li> 3. Cris </li>
      </ul>
  </div>

Но нужно проявлять осторожность и открывать для редактирования только видимый контент.

HTML-атрибуты: Download

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

Вот пример:

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

Translate

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

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

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

HTML-атрибуты: Poster

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

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

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

Атрибут: Pattern

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

<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-элементы дополнительными возможностями. Спасибо, что прочитали эту статью. Я надеюсь, что вы сочли ее полезной.

Elena Sochirca

Привет! Меня зовут Елена и я занимаюсь веб-дизайном и веб-разработкой. Я стараюсь создавать интересный и полезный контент для своих читателей, чтобы помочь им научиться создавать красивые и функциональные веб-сайты. Я увлечена этой областью и постоянно изучаю новые технологии, чтобы оставаться в курсе последних трендов в веб-разработке.