Атрибуты HTML-элементов
Free PreviewДо этого момента мы использовали теги, чтобы описывать структуру документа. Но иногда нам нужно уточнить свойства элемента, например, добавить дополнительную информацию или повлиять на его поведение. Для этого в HTML используются атрибуты.
Что такое атрибуты
Атрибут — это дополнительная характеристика HTML-тега. Если тег отвечает на вопрос «что это за элемент?», то атрибут отвечает на вопрос «какой он?» или «как он себя ведёт?».
Атрибуты всегда записываются внутри открывающего тега. Они имеют формат имя="значение". Атрибуты помогают браузеру точнее понять как работать с элементом.
Важно запомнить что атрибуты не переопределяют поведение элементов, а лишь уточняют их свойства.
Глобальные атрибуты
Атрибуты бывают универсальными (еще их называют глобальными). Такие атрибуты можно применить практически к любому HTML-элементу.
Например, атрибут title может применяться ко всем визуальным HTML-элементам и дает браузеру интсрукцию отображать всплывающее окно с соответсвующим текстом при наведении курсора на элемент:
<h1 title="Главный заголовок страницы">Мой первый HTML-документ</h1>html
В результате, при наведении курсора мыши на заголовок вы увидете всплывающую подсказку с текстом, указанным в атрибуте:
Тег <a>
У некоторых тегов существуют атрибуты которые можно применить только к конкретнму тегу. Давайте рассмотрим тег <a>. Он испольуется для создания ссылок на другие документы.
Для того чтобы связать наш первый документ с какой либой страницей в интернете добавим на страницу следующий код:
<p> Это абзац содержащий <a href="https://ya.ru/">ссылку на внешний ресурс</a> </p>html
Попробуйте открыть обновленную страницу и найти элемент, который получается в результате добавления тега <a>. Обратите внимание на то как отображается элемент. По щелчку на ссылку откроется сайт, указанный в атрибуте href. Попробуйте заменить ya.ru на какой либо другой сайт.
Каждый тег может иметь много разных атрибутов и каждый из них отвечает за определенную часть фугкционала элемента.
Например если к ссылке выше мы добавим новый атрибут target со ззначением _blank то поведение ссылки изменится. До добавления этого атрибута новая страница открывается на той же вкладке, где мы были до этого.
Если ссылка имеет вид <a href="https://ya.ru/" target="_blank">, то браузер откроет ссылку в новой вкладке.
Другие теги и их атрибуты
Если Вы пользовались атоматическим созданием структуры HTML-документа, то должны были увидеть вот такой шаблон:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>html
Обратите внимание на атрибуты тегов использующиеся здесь. Например атрибут lang="en" подсказывает браузеру что основной язык данного документа - английский.
На самом деле HTML-теги имеют огромное количество различных атрибутов. Часть из них, как мы уже проговорили, являются глобальными. Подробнее о таких атрибутах можно прочитать, например в этой статье на doka.guide
Главное здесь понять общий принцип, а не запомнить все возможные атрибуты тегов (как собственно и сами теги). В идеале было бы запомнить основные из них и правила их использования. Далее мы не будем акцентировать внимание на отдельных атрибутах тегов, в будем просто использовать их когда это необходимо.