Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
ЯМаркет
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

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 Фреймы HTML с JavaScript HTML Путь к файлу HTML Мета теги HTML Макет HTML Адаптивный дизайн HTML Компьютерный код HTML Семантика HTML Синтаксис HTML Сущность HTML Символы HTML Эмодзи HTML Кодировка HTML URL Кодировка HTML в XHTML

HTML Формы

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

HTML Графика

HTML Холст HTML 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 Canvas HTML Аудио/Видео HTML Типы документов HTML Наборы символов HTML URL Кодировка HTML Коды языка 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.

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

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


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

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

Однако консорциум sw3C рекомендует строчные атрибуты в 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 Справочник атрибутов.