Как добавить атрибут в HTML-тег

Дженнифер Кирнин — профессиональный веб-разработчик, помогающий другим в изучении веб-дизайна, HTML, CSS и XML.

Язык HTML включает в себя ряд элементов. К ним относятся часто используемые компоненты веб-сайта, такие как абзацы, заголовки, ссылки и изображения. Есть также ряд новых элементов, которые были представлены в HTML5, включая заголовок, навигацию, нижний колонтитул и многое другое. Все эти элементы HTML используются для создания структуры документа и придания ему смысла. Чтобы добавить еще больше смысла элементам, вы можете присвоить им атрибуты.

Базовый открывающий тег HTML начинается с символа <. Затем следует имя тега, и, наконец, вы завершаете тег символом >. Например, тег открывающего абзаца будет написан так:

Чтобы добавить атрибут к вашему HTML-тегу, вы сначала ставите пробел после имени тега (в данном случае это «p»). Затем вы должны добавить имя атрибута, которое вы хотите использовать, за которым следует знак равенства. Наконец, значение атрибута будет заключено в кавычки. Например:

Теги могут иметь несколько атрибутов. Вы бы отделили каждый атрибут от других пробелом.

Элементы с обязательными атрибутами

Некоторым элементам HTML на самом деле требуются атрибуты, если вы хотите, чтобы они работали должным образом. Элемент изображения и элемент ссылки являются двумя примерами этого.

Для элемента изображения требуется атрибут «src». Этот атрибут сообщает браузеру, какое изображение вы хотите использовать в этом месте. Значением атрибута будет путь к файлу изображения. Например:

Вы заметите, что мы добавили к этому элементу еще один атрибут, атрибут «alt» или альтернативный текст. Технически это не обязательный атрибут для изображений, но рекомендуется всегда включать этот контент для доступности.Текст, указанный в значении атрибута alt, — это то, что будет отображаться, если изображение по какой-либо причине не загрузится.

Другим элементом, требующим определенных атрибутов, является якорь или тег ссылки. Этот элемент должен включать атрибут «href», что означает «гипертекстовая ссылка». Это причудливый способ сказать «куда должна вести эта ссылка». знать, где он должен быть. Вот как может выглядеть тег ссылки:

Теперь эта ссылка приведет человека на веб-сайт, указанный в значении атрибута. В данном случае это главная страница Dotdash.

Атрибуты как CSS-хуки

Другое использование атрибутов — это когда они используются в качестве «крючков» для стилей CSS. Поскольку веб-стандарты диктуют, что вы должны хранить структуру вашей страницы (HTML) отдельно от ее стилей (CSS), вы используете эти обработчики атрибутов в CSS, чтобы указать, как структурированная страница будет отображаться в веб-браузере. Например, у вас может быть этот фрагмент разметки в вашем HTML-документе.

Если вы хотите, чтобы этот раздел имел черный цвет фона (#000) и размер шрифта 1,5 em, вы должны добавить это в свой CSS:

Атрибут класса «featured» действует как крючок, который мы используем в CSS для применения стилей к этой области. Мы также могли бы использовать здесь атрибут ID, если бы захотели. И классы, и идентификаторы являются универсальными атрибутами, что означает, что их можно добавить к любому элементу. Они также могут быть нацелены на определенные стили CSS, чтобы определить внешний вид этого элемента.

Что касается Javascript

Наконец, использование атрибутов для определенных элементов HTML также может использоваться в Javascript. Если у вас есть сценарий, который ищет элемент с определенным атрибутом ID, это еще одно использование этой общей части языка HTML.