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

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

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

1. Multiple

Атрибут multiple позволяет пользователю вводить несколько значений для <input>. Этот атрибут подходит для <input> с типом file или email, а также для элемента <select>.

Если для <input> с type="email" указан атрибут multiple, значением может быть список email-адресов, разделенных запятыми. Пробелы из списка удаляются.

В <input> с type="file" и добавленным атрибутом multiple пользователь может выбрать несколько файлов (удерживая зажатый Shift или Crtl).

<input type="file" multiple>

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».

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

<video controls 
src="https://bit.ly/3nWh78w"
poster="posterImage.png">
</video>

7. Download

Используя атрибут download с элементом <a>, можно указать браузерам загружать URL, а не переходить к нему. Пользователю при этом будет предложено сохранить документ, на который ведет ссылка, как локальный файл.

Можно указать и имя файла.

<a href="index.html" download="fileName">Download me :)</a>

Перевод статьи «7 useful HTML attributes you may not know».

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх