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

HTML Учебник

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

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Геолакация HTML Drag/Drop HTML Веб Место хранения HTML Веб Работник HTML 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 Справочник атрибутов.