13 атрибутов HTML, чтобы повысить визуальную привлекательность сайта
Собрали 13 важных атрибутов, чтобы ваш сайт стал привлекательнее.
Собрали 13 важных атрибутов, чтобы ваш сайт стал привлекательнее.
Атрибут accept
используют с <input>
элементом (только для типа файла), чтобы указать типы файлов, которые может принимать сервер.
<input type="file" accept=".jpg, .jpeg, .png">
Атрибут alt
можно использовать с <img>
элементом, чтобы указать альтернативный текст на случай, если изображение невозможно отобразить на веб-странице.
<img src="nature.png" alt="A beautiful sunset">
Атрибут autocomplete
можно использоватьс элементами и <form>
для управления функцией автозаполнения браузера. <input>
<textarea>
<input type="text" name="name" autocomplete="on" />
Атрибут contenteditable
нужен, чтобы указать, является ли содержимое элемента редактируемым или нет. Так пользователи могут изменять содержимое внутри элемента.
Это глобальный атрибут, что означает, что вы можете использовать его со всеми элементами HTML.
<div contenteditable="true">You can edit this content.</div>
Атрибут download
можно использовать с <a>
элементом, чтобы указать, что при нажатии на ссылку, связанный ресурс должен загружаться, а не переходить по нему.
<a href="document.pdf" download="document.pdf">Download PDF</a>
Вы можете использовать атрибут hidden
, чтобы скрыть элемент на веб-странице. Это полезно для управления видимостью с помощью JavaScript или CSS.
Это глобальный атрибут, что означает, что вы можете использовать его со всеми элементами HTML.
<div hidden>This is hidden content.</div>
Вы можете использовать атрибут loading
с <img>
элементом, чтобы управлять тем, как браузер загружает изображение. Он имеет три значения: «eager», «lazy» и «auto».
<img src="image.png" loading="lazy" />
Вы можете использовать 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
с <video>
элементом для отображения изображения, пока пользователь не воспроизведет видео.
<video controls poster="image.png" width="500">
<source src="video.mp4" type="video/mp4" />
</video>
Вы можете использовать атрибут readonly
с <input>
элементом, чтобы указать, что элемент доступен только для чтения, а не для редактирования.
<input type="text" value="This is readonly." readonly />
Вы можете использовать атрибут srcset
с элементами <img>
и <source>
(in <picture>
), чтобы предоставить список источников изображений. Это помогает браузеру выбирать разные изображения для разных размеров экрана.
<img src="image.jpg" srcset="image.jpg, image-2x.jpg, image-3x.jpg">
Вы можете использовать атрибут spellcheck
с <input>
элементами (не паролями), элементами с редактируемым содержимым и <textarea>
элементом для включения или отключения проверки орфографии в браузере.
<input type="text" spellcheck="false" />
Вы можете использовать атрибут title
для предоставления дополнительной информации об элементе. Эта информация обычно отображается, когда пользователь наводит курсор на элемент.
Это глобальный атрибут, что означает, что вы можете использовать его со всеми элементами HTML.
<a href="document.pdf" title="Click to download">Download File</a>
Источник: https://shefali.dev/html-attributes/
Важные события в 2023 связанные с JavaScript — внедрение сигналов, React компоненты для сервера. JS уже фуллстек?
OpenSSH — это 100% реализация протокола SSH 2.0. которая включает поддержку sftp-клиента и сервера.
С 4 июня 2025 года популярный сервис Let’s Encrypt, известный своим вкладом в безопасность интернета, перестанет отправлять email-уведомления об истечении срока действия SSL-сертификатов. Это решение стало результатом анализа текущих тенденций и потребностей пользователей, а также стремления организации к повышению конфиденциальности данных. Почему Let’s Encrypt отказался от уведомлений? Как объяснили представители Let’s Encrypt, основная причина такого […]
Очки дополненной реальности могут внести новый опыт для веб-разработки и приложений. Какие приложения уже работаю с Vision Pro.