Язык HTML включает в себя ряд элементов. К ним относятся часто используемые компоненты сайта, такие как абзацы, заголовки, ссылки и изображения. Есть также ряд новых элементов, которые были введены в HTML5, включая заголовок, навигацию, нижний колонтитул и многое другое. Все эти элементы HTML используются для создания структуры документа и придания ему смысла. Чтобы добавить еще больше значения элементам, вы можете дать им атрибуты.
Базовый открывающий тег HTML начинается с символа. Например, тег открывающего абзаца будет записан так:
Чтобы добавить атрибут в тэг HTML, сначала необходимо поставить пробел после имени тэга (в данном случае это «p»). Затем вы добавите имя атрибута, который вы хотите использовать, после которого следует знак равенства. Наконец, значение атрибута будет заключено в кавычки. Например:
Теги могут иметь несколько атрибутов. Вы должны отделить каждый атрибут от других пробелом.
Элементы с необходимыми атрибутами
Некоторые HTML-элементы на самом деле требуют атрибутов, если вы хотите, чтобы они работали как задумано. Элемент image и элемент link являются двумя примерами этого.
Элемент изображения требует атрибута «src». Этот атрибут сообщает браузеру, какое изображение вы хотите использовать в этом месте. Значением атрибута будет путь к файлу изображения. Например:
Вы заметите, что мы добавили еще один атрибут к этому элементу, «alt» или альтернативный текстовый атрибут. Технически это не обязательный атрибут для изображений, но рекомендуется всегда включать этот контент для доступности. Текст, указанный в значении атрибута alt, будет отображаться, если по какой-либо причине изображение не загружается.
Другим элементом, который требует определенных атрибутов, является тег привязки или ссылки. Этот элемент должен включать атрибут «href», который обозначает «гипертекстовая ссылка». Это причудливый способ сказать «куда должна идти эта ссылка». Так же, как элемент изображения должен знать, какое изображение загружать, тег ссылки должен знать, где это должно быть. Вот как может выглядеть тег ссылки:
Эта ссылка теперь приведет человека на сайт, указанный в значении атрибута. В данном случае это главная страница Dotdash.
Атрибуты как CSS-хуки
Другое использование атрибутов, когда они используются в качестве «хуков» для стилей CSS. Поскольку веб-стандарты требуют, чтобы структура страницы (HTML) была отделена от ее стилей (CSS), вы используете эти атрибуты в CSS, чтобы определить, как структурированная страница будет отображаться в веб-браузере. Например, у вас может быть эта часть разметки в вашем HTML-документе.
Если вы хотите, чтобы это деление имело черный цвет фона (# 000) и размер шрифта 1,5em, добавьте это в свой CSS:
.Featured {background-color: # 000; размер шрифта: 1,5em;}
Атрибут «featured» действует как ловушка, которую мы используем в CSS для применения стилей к этой области. Мы могли бы также использовать атрибут ID здесь, если мы хотим. И классы, и идентификаторы являются универсальными атрибутами, что означает, что они могут быть добавлены к любому элементу. Оба могут также быть нацелены с определенными стилями CSS, чтобы определить визуальный внешний вид этого элемента.
Что касается Javascript
Наконец, использование атрибутов в определенных элементах HTML также является тем, что вы можете использовать в Javascript. Если у вас есть скрипт, который ищет элемент с определенным атрибутом ID, это еще одно использование этого общего фрагмента языка HTML.
