7 полезных атрибутов HTML, о которых вы, возможно, не знаете
Хочешь знать больше про веб?
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
HTML — угловой камень веб-разработки. Тем не менее, многие начинающие программисты изучают его весьма поверхностно, желая как можно быстрее перейти к CSS, JS и т. д. В результате они не пользуются потенциалом HTML на полную катушку.
В этой статье вы найдете список атрибутов, о которых многие новички не знают, а стоило бы.
1. Multiple
Атрибут multiple позволяет пользователю вводить несколько значений для <input>. Этот атрибут подходит для <input> с типом file или email, а также для элемента <select>.
Если для <input> с type="email" указан атрибут multiple, значением может быть список email-адресов, разделенных запятыми. Пробелы из списка удаляются.
В <input> с type="file" и добавленным атрибутом multiple пользователь может выбрать несколько файлов (удерживая зажатый Shift или Crtl).
2. Accept
У элемента <input> есть также атрибут accept. Он позволяет указать типы файлов, которые пользователь может загружать.
Для этого атрибуту accept присваивается значение в виде строки с перечисленными (через запятую) расширениями.
Этот атрибут также можно использовать для ограничения ввода только звуковыми, графическими или видеофайлами. Для этого в качестве значения для атрибута accept указывается audio/*, image/* или video/*.
<input type="file" accept=".png, .jpg">
3. Contenteditable
contenteditable — глобальный атрибут, общий для всех элементов HTML. С его помощью можно сделать так, чтобы контент стал доступным для редактирования пользователем. Но нужно проявлять осторожность и открывать для редактирования только видимый контент.
<div contenteditable="true">I'm a cool editable div ;)</div>
4. Spellcheck
Еще один глобальный атрибут в нашем списке — spellcheck. Используется для проверки грамматики в HTML-элементах, например, в полях ввода.
Примечание. Обычно нередактируемые элементы не проверяются на ошибки, даже если браузер поддерживает проверку правописания, а spellcheck имеет значение true.
<p contenteditable="true" spellcheck="true">
Thanks furr checkinng my speling :)</p>
5. Translate
Атрибут translate сообщает браузеру, нужно ли переводить контент.
Например, при помощи этого атрибута можно сделать так, чтобы Google Translate не пытался автоматически перевести название вашего бренда или компании.
<footer><p translate="no">LearnPine</p></footer>
6. Poster
При помощи атрибута poster можно указать, какая картинка должна показываться, пока загружается видео или пока пользователь не нажмет на кнопку «Play».
Если изображение не определено, то ничто не будет показываться, пока не станет доступным первый фрейм видео, а затем этот первый фрейм станет постером.
7. Download
Используя атрибут download с элементом <a>, можно указать браузерам загружать URL, а не переходить к нему. Пользователю при этом будет предложено сохранить документ, на который ведет ссылка, как локальный файл.
<a href="index.html" download="fileName">Download me :)</a>
Перевод статьи «7 useful HTML attributes you may not know».