САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
×

HTML Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветHTML с CSSHTML СсылкиHTML ИзображениеHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML с JavaScriptHTML Путь к файлуHTML Мета тегиHTML Методы версткиHTML Адаптивный дизайнHTML Компьютерный кодHTML5 СемантикаHTML5 СинтаксисHTML СущностьHTML СимволыHTML ЭмодзиHTML КодировкаHTML URL КодировкаHTML в XHTML

HTML Формы

HTML ФормыHTML Элементы вводаHTML Типы вводаHTML Атрибуты вводаHTML Атрибуты форм ввода

HTML Графика

HTML5 CanvasHTML5 SVG

HTML Медиа

HTML Медиа форматHTML5 ВидеоHTML5 АудиоHTML ПлагиныHTML YouTube

HTML API

HTML5 ГеолокацияHTML5 ПеретаскиваниеHTML5 Веб хранилищеHTML5 Веб работникHTML5 SSE

HTML Примеры

HTML ПримерыHTML ТестированиеHTML УпражненияHTML СертификатHTML ЗаключениеHTML Возможности

HTML Справочники

HTML Список теговHTML АтрибутыHTML Глобальные атрибутыHTML Поддержка браузераHTML СобытияHTML ЦветаHTML ХолстHTML Аудио/ВидеоHTML Типы документовHTML Кодировка символовHTML URL КодировкаHTML Коды языкаHTTP СообщенияHTTP МетодыPX в EM конвертерКлавишные комбинации

HTML - Атрибуты



Атрибуты содержат дополнительную информацию об элементах HTML.

Атрибуты HTML

  • Все HTML элементы могут иметь атрибуты
  • Атрибуты предоставляют дополнительную информацию об элементах
  • Атрибуты всегда задаются в начальном теге
  • Атрибуты обычно входят в пары имя/значение, такие как: name="value"

Атрибут href

Тег <a> определяет гиперссылку. Атрибут href указывает URL адрес страницы, на которую переходит ссылка:

Пример

<a href="https://schoolsw3.com">Посетить Schoolsw3</a>
Попробуйте сами »

Вы узнаете больше о ссылках в разделе HTML Ссылки.


Атрибут src

Тег <img> используется для встраивания изображения в HTML страницу. Атрибут src указывает путь к отображаемому изображению:

Пример

<img src="img_girl.jpg">
Попробуйте сами »

Атрибуты width и height

Тег <img> также должен содержать атрибуты width и height, который определяет ширину и высоту изображения (в пикселях):

Пример

<img src="img_girl.jpg" width="500" height="600">
Попробуйте сами »

Атрибут alt

Обязательный атрибут alt требуется для тега <img> указывает альтернативный текст для изображения, если изображение по какой-либо причине не может быть отображено. Это может быть связано с медленным соединением или ошибкой в системе. Атрибут src, используется пользователем для чтения программы с экрана.

Пример

<img src="img_girl.jpg" alt="Девушка в куртке">
Попробуйте сами »

Пример

Посмотрите, что произойдет, если мы попытаемся отобразить изображение, которого не существует:

<img src="img_typo.jpg" alt="Девушка в куртке">
Попробуйте сами »

Вы узнаете больше об изображениях в нашем разделе HTML Изображения.



Атрибут style

Атрибут style используется для добавления стилей к элементу, таких как цвет, шрифт, размер и т. д.

Пример

<p style="color:red;">Это красный параграф.</p>
Попробуйте сами »

Вы узнаете больше о стилях в нашем разделе HTML Стили.


Атрибут lang

Всегда подключайте атрибут lang внутри тега <html>, чтобы объявить язык веб страницы. Это делается для того, чтобы помочь поисковым системам и браузерам.

В следующем примере в качестве языка указывается русский язык:

<!DOCTYPE html>
<html lang="ru">
<body>
...
</body>
</html>

Коды стран также могут быть добавлены к коду языка в разделе атрибута lang. Таким образом, первые два символа определяют язык HTML страницы, а последние два символа определяют страну.

В следующем примере в качестве языка указан русский, а в качестве страны - РОССИЯ:

<!DOCTYPE html>
<html lang="ru-RU">
<body>
...
</body>
</html>

Вы можете увидеть все языковые коды в нашем приложении. HTML Справочник код языка.


Атрибут title

Атрибут title определяет некоторую дополнительную информацию об элементе.

Значение атрибута title будет отображаться в виде всплывающей подсказки при наведении курсора мыши на элемент:

Пример

<p title="Я подсказка">Это параграф.</p>
Попробуйте сами »

Всегда использовать строчные атрибуты

Стандарт HTML не требует имен атрибутов в нижнем регистре.

Атрибут title (и все остальные атрибуты) могут быть записаны в верхнем или нижнем регистре, например title или TITLE.

Однако консорциум W3C рекомендует строчные атрибуты в HTML и требует строчные атрибуты для более строгих типов документов, таких как XHTML.

Schoolsw3 всегда использует имена атрибутов в нижнем регистре.


Всегда цитировать значения атрибутов

Стандарт HTML не требует кавычек вокруг значений атрибутов.

Однако консорциум W3C рекомендует строчные атрибуты в HTML и требует строчные атрибуты для более строгих типов документов, таких как XHTML.

Хорошо:

<a href="https://schoolsw3.com/html/">Посетите HTML учебник</a>

Плохо:

<a href=https://schoolsw3.com/html/>Посетите HTML учебник</a>

Иногда приходится использовать кавычки. В примере атрибут title отображается неправильно, так как он содержит пробел:

Пример

<p title=О Schoolsw3>
Попробуйте сами »

 В Schoolsw3 всегда используем кавычки вокруг значений атрибутов.


Одинарные или двойные кавычки?

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

В некоторых ситуациях, когда само значение атрибута содержит двойные кавычки, необходимо использовать одинарные кавычки:

<p title='Джон "Дробовик" Нельсон'>

Или наоборот:

<p title="Джон 'Дробовик' Нельсон">
Попробуйте сами »

Краткое содержание главы

  • Все HTML элементы могут иметь атрибуты
  • Атрибут href в теге <a> указывает URL адрес страницы, на которую переходит ссылка
  • Атрибут src в теге <img> указывает путь к отображаемому изображению
  • Атрибут width и height в теге <img> предоставьте информацию о размере изображений
  • Атрибут alt в теге <img> предоставляет альтернативный текст для изображения
  • Атрибут style используется для добавления стилей к элементу, таких как цвет, шрифт, размер и многое другое
  • Атрибут lang в теге <html> тег объявляет язык веб страницы
  • Атрибут title определяет некоторую дополнительную информацию об элементе

HTML Упражнения

Проверьте себя с помощью упражнений

Упражнение:

Добавьте "всплывающую подсказку" к нижеприведенному паграфу с текстом "О Schoolsw3".

<p ="О Schoolsw3">Schoolsw3 - сайт для веб разработчика.</p>

Начните упражнение


HTML Справочник атрибутов

Полный список всех атрибутов для каждого HTML элемента приведен в нашем разделе: HTML Справочник атрибутов.