HTML Атрибуты
HTML Атрибуты предоставляют дополнительную информацию об элементах HTML.
В этой теме:
HTML Атрибуты
- Все HTML элементы могут иметь атрибуты
- Атрибуты предоставляют дополнительную информацию об элементе
- Атрибуты всегда указываются в начальном теге
- Атрибуты обычно входят в пары имя/значение, например: имя="значение"
Атрибут href
HTML ссылки определяются с помощью тега <a>. Адрес ссылки указывается в атрибуте href:
Подробнее о ссылках и теге <a> вы узнаете в следующих разделах этого учебника.
Атрибут src
HTML изображения определяются с помощью тега <img>.
Имя файла источника изображения указывается в атрибуте src:
Атрибуты width (ширина) и height (высота)
HTML изображения также имеют атрибуты width (ширина) и height (высота), которые определяют ширину и высоту изображения:
Ширина и высота указываются в пикселях по умолчанию; поэтому width="500" означает ширину 500 пикселей, а height="600" означает высоту 600 пикселей.
Подробнее об изображениях вы узнаете в разделе HTML изображения на нашем сайте W3Schools на русском.
Атрибут alt
Атрибут alt определяет альтернативный текст, который будет использоваться, если изображение не может быть отображено.
Значение атрибута alt может быть прочитано программами чтения с экрана (скринридерами). Таким образом, можно "прослушивать" веб-страницы, например, человек с проблемами зрения может "слышать" элемент, т.е., будет знать, что изображено на картинке.
Атрибут alt также полезен, если изображение не может быть отображено (например, если оно не существует на сайте):
Пример
Посмотрите, что произойдёт, если мы попробуем отобразить изображение, которого не существует:
<img src="img_typo.jpg" alt="Девушка в жакете">
Попробуйте сами »
Атрибут style
Атрибут style используется для определения стиля элемента, такого как цвет, шрифт, размер и т.д.
Вы узнаете больше о стилизации HTML элементов далее в этом учебнике, и в CSS Учебнике на нашем сайте W3Schools на русском.
Атрибут lang
Язык документа может быть объявлен в теге <html>.
Язык ообъявляется с помощью атрибута lang.
Объявление языка значимо для приложений с расширенными возможностями (например, средств чтения с экрана - скринридеров) и поисковых систем:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Первые две буквы указывают на язык (en - английский). Если есть диалект, добавьте ещё две буквы (здесь US, т.е. США).
Атрибут title
Здесь атрибут title добавляется к элементу <p>. Значение атрибута title будет отображаться в виде подсказки при наведении мыши на параграф:
Использовать строчные атрибуты (в нижнем регистре)
Стандарт HTML5 не требуетє имён атрибутов в нижнем регистре.
Атрибут title может быть написан в верхнем или нижнем регистре, например title или TITLE.
W3C рекомендует использовать нижний регистр в HTML и требует нижний регистр для более строгих типов документов, таких как XHTML.
У W3Schools всегда используют имена атрибутов в нижнем регистре.
Мы предлагаем: значения атрибутов брать в кавычки
Стандарт HTML5 не требует кавычек вокруг значений атрибутов.
Атрибут href, показаный выше, можно писать без кавычек:
W3C рекомендует кавычки в HTML и требует кавычки для более строгих типов документов, например XHTML.
Иногда необходимо использовать кавычки. Этот пример не будет правильно отображать атрибут title, поскольку он содержит пробел:
Использование кавычек наиболее распространено при написании HTML-кода. Пропуск кавычек может привести к ошибкам. В W3Schools всегда используют кавычки вокруг значений атрибутов.
Одинарные или двойные кавычки?
Двойные кавычки вокруг значений атрибутов наиболее распространены в HTML, но также можно использовать и одинарные кавычки.
В некоторых ситуациях, когда само значение атрибута содержит двойные кавычки, необходимо использовать одинарные кавычки:
<p title='John "ShotGun" Nelson'>
Или наоборот:
<p title="John 'ShotGun' Nelson">
Попробуйте сами »
Резюме раздела
- Все HTML элементы могут иметь атрибуты
- Атрибут
titleобеспечивает дополнительную информацию в виде "сплывающей подсказки" - Атрибут
hrefпредоставляет адресную информацию для ссылок - Атрибуты
widthиheightпредоставляют информацию о размере изображений - Атрибут
altпредоставляет текст для программ чтения с экрана (скринридерам) - В W3Schools всегда используют строчные (в нижнем регистре) значения атрибутов
- В W3Schools всегда значения атрибутов пишут в кавычках
HTML Упражнения
HTML Атрибуты
Ниже приведён алфавитный список некоторых атрибутов, часто используемых в HTML, о которых вы узнаете больше в этом учебнике:
| Атрибут | Описание |
|---|---|
| alt | Определяет альтернативный текст для изображения, когда изображение не может быть отображено |
| disabled | Указывает, что входящий элемент должен быть отключен |
| href | Указывает URL-адрес (веб-адрес) для ссылки |
| id | Указывает уникальный идентификатор элемента |
| src | Указывает URL-адрес (веб-адрес) изображения |
| style | Определяет встроенный CSS стиль для элемента |
| title | Определяет дополнительную информацию об элементе (отображается как подсказка) |
Полный список всех атрибутов для каждого HTML элемента приведён в: HTML Справочнике атрибутов на нашем сайте W3Schools на русском.
Вопросы для самоконтроля
- Что такое HTML-атрибуты?
- Зачем нужны атрибуты HTML-элементам?
- Где указываются атрибуты?
- Какие бывают атрибуты?
- Какой атрибут определяет адрес ссылки?
- Какой атрибут указывает источник изображения?
- Какие атрибуты определяют ширину и высоту элемента?
- Какой атрибут указывает альтернативный текст?
- Какой атрибут используется для указания стиля элемента?
- С помощью какого атрибута объявляется язык веб-страницы?
- С помощью какого атрибута указывается подсказка для HTML-элемента?
- В каком регистре рекомендуется писать имена атрибутов?
- Нужно ли писать атрибуты в кавычках?
- Какие кавычки – одинарные или двойные – рекомендуется писать вокруг значений атрибутов?
