13 атрибутов HTML, чтобы повысить визуальную привлекательность сайта

Accept Attribute

Атрибут accept используют с  <input> элементом (только для типа файла), чтобы указать типы файлов, которые может принимать сервер.

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

Alt Attribute

Атрибут alt можно использовать с <img> элементом, чтобы указать альтернативный текст на случай, если изображение невозможно отобразить на веб-странице.

<img src="nature.png" alt="A beautiful sunset">

Autocomplete Attribute

Атрибут  autocomplete можно использоватьс   элементами и  <form>для управления функцией автозаполнения браузера. <input><textarea>

<input type="text" name="name" autocomplete="on" />

Contenteditable Attribute

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

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

<div contenteditable="true">You can edit this content.</div>

Download Attribute

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

 <a href="document.pdf" download="document.pdf">Download PDF</a>

Hidden Attribute

Вы можете использовать атрибут hidden, чтобы скрыть элемент на веб-странице. Это полезно для управления видимостью с помощью JavaScript или CSS.

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

<div hidden>This is hidden content.</div>

Loading Attribute

Вы можете использовать атрибут  loading с  <img> элементом, чтобы управлять тем, как браузер загружает изображение. Он имеет три значения: «eager», «lazy» и «auto».

<img src="image.png" loading="lazy" />

Multiple Attribute

Вы можете использовать Multiple Attribute multiple с  элементами <input> и  <select> , чтобы пользователи могли выбирать/вводить несколько значений одновременно.

<input type="file" multiple />
<select multiple>
   <option value="java">Java</option>
   <option value="javascript">JavaScript</option>
   <option value="typescript">TypeScript</option>
   <option value="rust">Rust</option>
</select>

Poster Attribute

Вы можете использовать атрибут  poster с  <video> элементом для отображения изображения, пока пользователь не воспроизведет видео.

<video controls poster="image.png" width="500">
   <source src="video.mp4" type="video/mp4" />
</video>

Readonly Attribute

Вы можете использовать атрибут  readonly с  <input> элементом, чтобы указать, что элемент доступен только для чтения, а не для редактирования.

<input type="text" value="This is readonly." readonly />

Srcset Attribute

Вы можете использовать атрибут  srcset с  элементами <img> и  <source> (in  <picture>), чтобы предоставить список источников изображений. Это помогает браузеру выбирать разные изображения для разных размеров экрана.

<img src="image.jpg" srcset="image.jpg, image-2x.jpg, image-3x.jpg">

Spellcheck Attribute

Вы можете использовать атрибут  spellcheck с  <input> элементами (не паролями), элементами с редактируемым содержимым и  <textarea> элементом для включения или отключения проверки орфографии в браузере.

<input type="text" spellcheck="false" />

Title Attribute

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

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

<a href="document.pdf" title="Click to download">Download File</a>

Источник: https://shefali.dev/html-attributes/