16 полезных атрибутов HTML, которые пригодятся всем
- 30 сентября 2021
Не все HTML-теги такие самодостаточные, что их можно применять без всяких дополнений. Часто нужна дополнительная информация, чтобы тег был действительно полезным. Для этого разработчики используют атрибуты. Атрибуты тегов помогают браузеру понять, как именно должен отображаться элемент страницы. Мы собрали список атрибутов, которые вам точно пригодятся.
alt
Атрибут показывает на странице текст, в случае, если изображение не загрузилось.
<img src="wrong/path/to/img.png" alt="прекрасный вид из окна">
Кстати, у нас в блоге есть подробная инструкция, как правильно писать alt-текст.
autoplay, muted
Autoplay
используется для видео и аудио и запускает воспроизведение, когда контент готов и загружен:
<audio src="/music.mp3" autoplay>
Атрибут Autoplay muted
запускает видео без звука при загрузке страницы:
<video src="path/to/video.mp4" autoplay muted>
rows, cols
Эти атрибуты задают размер текста в поле ввода: rows
определяет количество строк, а cols
— количество знаков в строке:
<textarea id="example" name="example" rows="5" cols="33">>
Пять строк, 33 колонки, два атрибута.
</textarea>
type
Нужен, чтобы задать полю ввода тип. Например, виджет для выбора цвета будем задавать так:
<input type="color">
А так получится поле выбора календарной даты:
<input type="date">
Если атрибут type
не задан, то по умолчанию поле ввода будет текстовым.
for
Атрибут привязывает тег label
к полю ввода, если они разделены:
<label for="username">Как вас зовут</label>
<input type="text" id="username">>
placeholder
Даёт пользователю подсказку, как можно заполнить поле ввода:
<input type="text" id="username" placeholder="Kot Keks">>
lang
Помогает определить язык элемента. Можно использовать не только для HTML, но и для тегов.
<p>This paragraph is English, but the language is not specifically defined.</p>
<p lang="en-GB">This paragraph is defined as British English.</p>
<p lang="fr">Ce paragraphe est défini en français.</p>
rel
Его используют вместе с тегами a
и link
. Он определяет текущий документ как базовый по отношению к тому, на который ведёт ссылка (rel — от relationship).
<a href="#" target="_blank" rel="nofollow noopener">Страница</a>
Атрибут target="_blank"
указывает браузеру открыть ссылку в новой вкладке. При этом страница, на которую вы ссылаетесь, получает частичный доступ к текущей странице. Это происходит с помощью объекта window.opener и ставит под угрозу ваши данные. Значение noopener
не позволяет предоставить доступ к данным текущей страницы, а noreferrer
скрывает адрес страницы, с которой вы перешли.
Значение nofollow
объявляет поисковой системе, что документ не имеет влияния на page ranking документа, к которому ведет ссылка, то есть не передаёт ему свою ценность.
download
Этот атрибут сообщает о том, что ссылка <a>
должна быть использована для скачивания файла:
<a href=" download="wallpaper.jpg">Скачать обои для рабочего стола</a>
contentEditable
Помогает изменить текст в элементах, для которых он указан. Например, можете стереть этот абзац.
<p contentEditable="true">Пример какого-то текста, который вы тоже можете стереть</p>
У нас даже есть отдельная статья, где можно посмотреть, как работает этот атрибут.
ping
Атрибут нужен, чтобы узнать, по каким сторонним ссылкам люди переходят на сайт:
<a href="https://www.example.com/article/"
ping="https://www.example.com/magic/">15 популярных тегов</a>
loading
Задаёт поведение браузера при загрузке изображения. Принимает два значения: eager
(картинка загружается всегда, независимо от области просмотра) и lazy
(загрузка откладывается, пока изображение не достигнет области просмотра).
<img src="https://example.com/image.jpg" loading="lazy">
list
Определяет список возможных значений поля для ввода, который будет предлагаться пользователю:
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice"> />
<datalist id="ice-cream-flavors">>
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
title
Содержит текст с дополнительной информацией для элемента.
К примеру, может прикрепляться как заголовок для тегов <link>
, <abbr>
, <input>
и <menuitem>
.
<p>Newlines in <code>title</code> should be taken into account,
like <abbr title="This is a multiline title">example</abbr>.</p>
Может также содержать подсказку, которая всплывает, когда пользователь наводит курсор на элемент:
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Что писать в атрибуте alt
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 27 февраля 2024
Что такое Lazy Loading и как её включить на сайте
Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.
<img src="picture.jpg" loading="lazy">
<iframe src="supplementary.html" loading="lazy"></iframe>
Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.
- 22 ноября 2023
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport
.
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport
, который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport
, то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport
тоже нужен.
- 18 сентября 2023
Атрибут class в HTML на примерах
Атрибут class
используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
<!-- Один класс -->
<div class="container">
<!-- ... -->
</div>
<!-- Несколько классов -->
<div class="container special-box">
<!-- ... -->
</div>
- 14 сентября 2023
В чём отличия цитат
В HTML есть разные теги для цитирования и указания источников. Основные из них: <blockquote>
, <cite>
и <q>
. Давайте разберёмся в их различиях.
- 12 сентября 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023
Как отличить h1, h2 и h3
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от <h1>
до <h6>
. Каждый уровень заголовка имеет свой семантический вес, где <h1>
имеет наибольший вес, а <h6>
— наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023
Как правильно вставлять SVG
Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.
SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG
IH�aV
PLTE�������0�
IDAcZ�d���� �W=
S�3�o;���]P
���IEND�B`�~
Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
<svg width="20">
<rect fill="#fc0"
width="20"
height="20"/>
<line stroke="black"
x1="0" y1="0"
x2="20" y2="20"/>
</svg>
SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.
- 1 июня 2023