[Перевод] 7 полезных HTML-атрибутов, о которых вы, возможно, не знаете01.04.2021 15:47

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

l6ml5vp8p_qut_xtpr-0ttwutvi.jpeg

Некоторые атрибуты общеизвестны, а вот о некоторых кое-кто, возможно, и не знает. Сегодня мы поговорим о таких вот малоизвестных HTML-атрибутах.

1. Accept


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

Например, можно сделать так, чтобы поле позволяло бы выбирать только файлы с расширениями .jpg и .png:

Поэкспериментировать с атрибутом accept можно в этом CodePen-проекте. Этот же проект демонстрирует применение атрибута, который описан в следующем разделе.

2. Multiple


Атрибут multiple можно назначать тегам и 

3. Contenteditable


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

      
 Employees: 

      
    
        
  •  1. John 
    • 
        
  •  2. Mehdi 
    • 
        
  •  3. James 
    • 
      

  

Вот соответствующий интерактивный пример на CodePen.

4. Download


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

Вот пример:

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

Вот пример.

5. Translate


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

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

Вот как им пользоваться: 

Mehdi

6. Poster


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

7. Pattern


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

Вот как атрибуты pattern и title используются при описании поля, предназначенного для ввода трёхбуквенного кода страны: 


  
  
  

Пример использования атрибута pattern можно найти здесь.

Итоги


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

Бывало ли так, что вы узнавали о некоем HTML-атрибуте только после того, как другими способами реализовывали предоставляемые им возможности?

oug5kh6sjydt9llengsiebnp40w.png

© Habrahabr.ru