Атрибуты HTML предоставляют дополнительную информацию об элементах HTML.
HTML-атрибуты
- Все элементы HTML могут иметь атрибуты
- Атрибуты предоставляют дополнительную информацию об элементах
- Атрибуты всегда указываются в начальном теге
- Атрибуты обычно представлены в виде пар «имя-значение», например: имя="значение"
Атрибут href
Тег <a> определяет гиперссылку. Атрибут href указывает URL-адрес страницы, на которую ведёт ссылка:
Пример:
<a href="123">Посетите наш канал</a>
Атрибут src
Тег <img> используется для встраивания изображения на HTML-страницу. Атрибут src указывает путь к отображаемому изображению:
Пример:
<img src="img_girl.jpg">
Существует два способа указать URL-адрес в src атрибуте:
1. Абсолютный URL-адрес — ссылка на внешнее изображение, размещенное на другом сайте. Пример: src="123/images/img_girl.jpg".
Примечание: внешние изображения могут быть защищены авторским правом. Если вы не получите разрешение на их использование, вы можете нарушить законы об авторском праве. Кроме того, вы не можете контролировать внешние изображения; они могут быть внезапно удалены или изменены.
2. Относительный URL-адрес — ссылка на изображение, размещённое на сайте. В этом случае URL-адрес не включает доменное имя. Если URL-адрес начинается без косой черты, он будет относительным по отношению к текущей странице. Пример: src="img_girl.jpg". Если URL-адрес начинается с косой черты, он будет относительным по отношению к домену. Пример: src="/images/img_girl.jpg".
Совет: почти всегда лучше использовать относительные URL-адреса. Они не сломаются, если вы измените домен.
Атрибуты width и height
Тег <img> также должен содержать атрибуты width и height, которые определяют ширину и высоту изображения (в пикселях):
Пример:
<img src="img_girl.jpg" width="500" height="600">
Атрибут alt
Обязательный атрибут alt для тега <img> указывает альтернативный текст для изображения, если изображение по какой-то причине не может быть отображено. Это может быть связано с медленным подключением, ошибкой в атрибуте src или с тем, что пользователь использует программу чтения с экрана.
Пример:
<img src="img_girl.jpg" alt="Девушка в куртке">
Пример
Посмотрите, что произойдет, если мы попытаемся отобразить изображение, которого не существует:
<img src="img_typo.jpg" alt="Девушка в куртке">
Атрибут style
Атрибут style используется для добавления стилей к элементу, таких как цвет, шрифт, размер и другие.
Пример:
<p style="color:red;">Это красный абзац.</p>
Атрибут lang
Вы всегда должны включать атрибут lang внутри тега <html>, чтобы указать язык веб-страницы. Это помогает поисковым системам и браузерам.
В следующем примере в качестве языка указан английский:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Коды стран также могут быть добавлены к коду языка в lang атрибуте. Таким образом, первые два символа определяют язык HTML-страницы, а последние два символа определяют страну.
В следующем примере в качестве языка указан английский, а в качестве страны - Соединенные Штаты:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Атрибут title
Атрибут title определяет некоторую дополнительную информацию об элементе.
Значение атрибута title будет отображаться в виде всплывающей подсказки при наведении курсора на элемент:
Пример:
<p title="I'm a tooltip">This is a paragraph.</p>
Краткое содержание главы
- Все элементы HTML могут иметь атрибуты
- href Атрибут <a> указывает URL-адрес страницы, на которую ведёт ссылка
- src Атрибут <img> указывает путь к отображаемому изображению
- width и height атрибуты <img> предоставляют информацию о размере изображений
- alt Атрибут из <img> предоставляет альтернативный текст для изображения
- Атрибут style используется для добавления стилей к элементу, таких как цвет, шрифт, размер и другие
- Атрибут lang тега <html> определяет язык веб-страницы
- Атрибут title определяет некоторую дополнительную информацию об элементе