Малоизвестные атрибуты HTML-элементов

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

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

Редкие атрибуты HTML-элементов и их применение

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

Contenteditable

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

<p contenteditable="true">Образец текста</p>

Hidden

Еще один глобальный атрибут. Как следует из названия, он скрывает или указывает, что элемент еще не актуален или более таковым не является.

<p hidden>Этот текст скрыт</p>

Multiple

Позволяет пользователю вводить более одного значения. Этот атрибут HTML-элемента применяется для input и select.

// Позволяет загружать несколько файлов
<input type="file" multiple> 

// Позволяет выбирать несколько элементов option 
<select multiple>      
    <option value="#">Item 1</option>      
    <option value="#">Item 2</option>      
    <option value="#">Item 3</option>
</select>

Poster

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

<video controls poster="image.jpg"></video>

Spellcheck

Атрибут HTML-элемента spellcheck, в частности, определяет необходимость проверки орфографии и грамматики в содержимом элемента. Тем не менее, следует понимать, что его не стоит использовать в некоторых случаях.

// Не стоит использовать его для поля ввода пароля
<input type="text" spellcheck="true">

Малоизвестные атрибуты HTML-элементов: accept

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

// Позволяет загружать только файлы в pdf формате 
<input type="file" accept="application/pdf"> 

// Позволяет загружать только изображения 
<input type="file" accept="image/*"> 

// Позволяет загружать только изображения jpeg/jpg формата 
<input type="file" accept="image/jpeg"> 

// Позволяет загружать только изображения png формата 
<input type="file" accept="image/png">

Читайте также: Выделение текста с помощью HTML-тега mark.

Редкие атрибуты HTML-элементов: кроссбраузерность

Стоит отметить, что все эти атрибуты обладают полной поддержкой всех популярных браузеров:

• Contenteditable
• Hidden
• Multiple
• Poster
• Spellcheck
• Accept