Атрибуты HTML

В прошлом уроке вы узнали, что элементы состоят из тегов и содержимого. Атрибуты дают этим тегам дополнительную информацию. Без атрибутов многие элементы не могут выполнить свою настоящую работу — ссылке нужен адрес, изображению — путь к файлу.

Что такое атрибут HTML?

Атрибут HTML — это имя и значение внутри открывающего тега элемента. Он сообщает браузеру что-то об элементе, что не является тем же видимым текстом между тегами.

Прямой ответ

Атрибуты используют простой шаблон: name="value". Они принадлежат открывающему тегу, до закрывающей >. Частые примеры: href для ссылок и src вместе с alt для изображений. Следующие уроки часто используют атрибуты — выучите шаблон один раз здесь.

Читаем пример

• У ссылки href хранит URL назначения
• Видимый текст ссылки по-прежнему содержимое между <a> и </a>
• У изображения src указывает на файл изображения
• alt даёт альтернативный текст, если изображение не загрузилось, или для доступности
• Оба атрибута находятся в открывающем теге

Правила синтаксиса, которые стоит помнить

1. Ставьте атрибуты только в открывающий тег — не в закрывающий
2. Отделяйте имя атрибута от значения знаком =
3. Большинство значений заключайте в кавычки: href="https://example.com"
4. Можно поставить несколько атрибутов в одном открывающем теге, разделяя пробелами
5. Имена атрибутов в современном HTML обычно пишут строчными буквами

Здесь href задаёт адрес, а title может дать дополнительный поясняющий текст (часто как подсказка в настольных браузерах). Не нужно ставить каждый необязательный атрибут на каждый тег — используйте то, что нужно элементу.

Атрибуты и содержимое

Содержимое — то, что между открывающим и закрывающим тегами, например слова абзаца. Атрибуты живут на открывающем теге и настраивают элемент. Путаница вызывает ошибки: URL только в тексте ссылки не создаёт рабочую ссылку; URL принадлежит href.

Заметка о пустых элементах

Пустые элементы вроде img всё равно используют атрибуты, даже без отдельного закрывающего тега. Это нормально: атрибуты описывают элемент; это не то же самое, что обёрнутое содержимое.

Попробуйте сами

1. Откройте базовую HTML-страницу в редакторе
2. Добавьте ссылку с атрибутом href на реальный или примерный URL
3. Добавьте img с src и осмысленным alt (любой учебный путь или временное имя для изучения синтаксиса)
4. Сохраните и откройте страницу в браузере
5. Нажмите ссылку и проверьте в исходном коде, что разметка изображения есть, даже если файла нет

Частые ошибки

• Писать атрибуты на закрывающем теге
• Забывать кавычки вокруг нужных значений
• Использовать неверный атрибут (например URL в src у ссылки вместо href)
• Оставлять alt пустым у информативных изображений
• Считать, что текст атрибута всегда виден как содержимое страницы — многие атрибуты настраивают поведение или доступность

Кратко

• Атрибуты добавляют дополнительную информацию в открывающий тег
• Обычная форма — name="value"
• Ссылкам нужен href; изображениям часто нужны src и alt
• Содержимое между тегами; атрибуты настраивают тег
• Можно сочетать несколько атрибутов на одном открывающем теге
• Последующие уроки снова используют этот шаблон для заголовков, форм, медиа и другого