HTML Атрибуты
В этой теме:
Атрибуты предоставляют дополнительную информацию об элементах HTML.
HTML Атрибуты
- Все элементы HTML могут иметь атрибуты
- Атрибуты предоставляют дополнительную информацию об элементе
- Атрибуты всегда указываются в начальном теге
- Атрибуты обычно входят в пары имя/значение, например: имя="значение"
Атрибут href
HTML ссылки определяются с помощью тега <a>. Адрес ссылки указывается в атрибуте href:
Подробнее о ссылках и теге <a> можно узнать в следующих разделах этого учебника.
Атрибут src
HTML изображения определяются с помощью тега <img>.
Имя файла источника изображения указывается в атрибуте src:
Атрибуты width (ширина) и height (высота)
HTML изображения также имеют атрибуты width (ширина) и height (высота), которые определяют ширину и высоту изображения:
Ширина и высота указываются в пикселях по умолчанию; поэтому width="500" означает ширину 500 пикселей.
Подробнее об изображениях вы узнаете в главе HTML Изображения.
Атрибут alt
Атрибут alt указывает альтернативный текст, который будет использоваться, если изображение не может быть отображено.
Значение атрибута alt может быть прочитано программами чтения с экрана (скринридерами). Таким образом, можно "прослушивать" веб-страницы, например, человек с нарушениями зрения может "слышать" элемент, т.е. будет знать, что изображено на картинке.
Атрибут alt также полезен, если изображение не может быть отображено (например, если оно не существует на сайте):
Пример
Посмотрите, что произойдет, если мы попытаемся отобразить изображение, которое не существует:
<img src="img_typo.jpg" alt="Девушка с жакетом">
Попробуйте сами »
Атрибут style
Атрибут style используется для указания стиля элемента, такого как цвет, шрифт, размер и т.д.
Вы узнаете больше о стилизации позже в этом учебнике, и в CSS Учебнике на этом сайте.
Атрибут 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-элемента?
- В каком регистре рекомендуется писать имена атрибутов?
- Нужно ли писать атрибуты в кавычках?
- Какие кавычки - одинарные или двойные - рекомендуется писать вокруг значений атрибутов?
