HTML Основы. Атрибуты

Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих

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

Атрибуты HTML. Для чего необходимы атрибуты?

Атрибут href

HTML ссылки определяются тегом <a>. Адрес ссылки указан в атрибуте href:

Пример:

<a href="https://www.w3schools.com">This is a link</a>
Попробуйте сами »

Подробнее о ссылках и теге <a> можно узнать в следующих разделах этого учебника.

Атрибут src

Изображения в HTML определяются тегом <img>.

Название файла источника изображения указывается в атрибуте src:

Пример:

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

Атрибуты width (ширина) и height (высота)

Изображения в HTML имеют набор атрибутов размера, который определяет ширину (width) и высоту (height) изображения:

Пример:

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

Размер изображения задаётся в пикселях: width = "500" означает ширину 500 пикселей.

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

Атрибут alt

Атрибут alt указывает альтернативный текст для использования, когда изображение не может быть отображено. Значение атрибута можно прочитать считывателями экрана (скринридерами). Таким образом, кто-то "слушает" веб-страницу, например, человек с нарушениями зрения может "услышать" элемент.

Пример:

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

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

Пример:

<img src="img_typo.jpg" alt="Girl with a jacket">
Попробуйте сами »

Атрибут style

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

Пример:

<p style="color:red">I am a paragraph</p>
Попробуйте сами »

Примечание: Вы узнаете больше про стилизацию в учебнике по CSS.

Атрибут lang

Язык веб-страницы можно объвить в теге <html>. Язык объявляется атрибутом lang. Объявление языка имеет важное значение для приложений доступности (программы для чтения с экрана) и поисковых систем:

Пример:

<!DOCTYPE html>
<html lang="en-US">
<body>
... Content
</body>
</html>

Первые две буквы определяют язык (например, en - английский). Если есть диалект, то используют ещё две буквы (US - США). Для русского языка используют буквы ru.

Атрибут title

Здесь атрибут title добавляется к элементу <p>. Значение атрибута заголовка будет отображаться как всплывающая подсказка, когда вы передвигаете курсор мыши над параграфом:

Пример:

<p title="I'm a tooltip">
This is a paragraph.
</p>
Попробуйте сами »

Используйте атрибуты нижнего регистра

Стандарт HTML5 не требует имён атрибутов в нижнем регистре. Атрибут title может быть записан в верхнем или нижнем регистре – title или TITLE.

Примечание: W3C рекомендует нижний регистр в HTML и требует нижний регистр для более строгих типов документов, таких как XHTML.

Значения атрибутов в кавычках

Стандарт HTML5 не требует кавычек вокруг значений атрибутов. Атрибут href, показаный выше, может быть написан без кавычек:

Пример (Плохо):

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

Пример (Хорошо):

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

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

Пример:

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

Примечание: Наиболее распространённым написанием HTML-кода является с использованием кавычек. Опускание кавычек может привести к ошибкам. В W3Schools всегда используют кавычки вокруг значений атрибутов.

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

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

Пример:

<p title='John "ShotGun" Nelson'>

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

Пример:

<p title="John 'ShotGun' Nelson">
Попробуйте сами »

Резюме раздела

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

Упражнение 1 » Упражнение 2 » Упражнение 3 » Упражнение 4 »

HTML Атрибуты

Ниже приведён алфавитный список некоторых атрибутов, которые часто используются в HTML:

Атрибут Описание
alt Определяет альтернативный текст для изображения, когда изображение не может быть отображено
disabled Указывает, что входной элемент должен быть отключен
href Указывает URL-адрес (веб-адрес) для ссылки
id Указывает уникальный идентификатор элемента
src Указывает URL-адрес (веб-адрес) изображения
style Определяет встроенный CSS стиль для элемента
title Определяет дополнительную информацию про элемент (отображается как всплывающая подсказка)

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