HTML атрибуты - что это такое. Статья-инструкция

Изучаем самостоятельно HTML атрибуты веб документа

22 декабря, 2017 Максим Метелев 12535 просмотров Комментариев нет

Атрибуты представляют дополнительную информацию об элементах html.

Все элементы языка могут иметь атрибуты, такие как:

Представлять дополнительную информацию об элементе
Всегда указываются в начальном теге
Обычно входят в пару имя=значение, например name=”value”

Содержание

1 Атрибуты ссылок href
2 Атрибуты src для тегов изображений
3 Атрибуты width и height изображений
4 Атрибут alt для картинок
5 Атрибут стилей style
6 Атрибут lang
7 Атрибут title
8 Мы предлагаем: использовать строчные атрибуты
9 Мы предлагаем: значения атрибута в кавычках
10 Одинарные или двойные кавычки?
11 Все элементы html могут иметь атрибуты.
12 Попрактикуемся!

Атрибуты ссылок href

HTML-ссылки определяются тегом <a> . Адрес ссылки указан в атрибуте href:

Пример:

<a href="https://www.w3schools.com">This is a link</a>

1	<a href="https://www.w3schools.com">This is a link</a>

Атрибуты src для тегов изображений

Изображения html определяются тегом <img>

Имя источника для картинки указано в атрибуте src, что дословно с английского можно перевести как source (источник).

<img src="img_girl.jpg">

1	<img src="img_girl.jpg">

HTML атрибут изображений src

Атрибуты width и height изображений

Любое медиа изображение имеет свои параметры длины и высоты, которые задаются соответствующими атрибутами

<img src="img_girl.jpg" width="500" height="600">

1	<img src="img_girl.jpg" width="500" height="600">

Все размеры задаются в пикселях. Width=”500” означает длину в 500 пикселей.

Атрибут alt для картинок

Он указывает на альтернативный текст к изображению или простым языком говоря, описывает это изображение. Текст внутри будет оставаться в том случае, если у пользователя в браузере отключены картинки. Т.е вместо картинки будет обычный текст.

Значение атрибута можно считывать с экрана. Таким образом, кто-то может «слушать» веб страницу, например слепой человек может «слышать» элемент.

Пример:

<img src="img_girl.jpg" alt="Девочка в жилетке">

1	<img src="img_girl.jpg" alt="Девочка в жилетке">

Данный атрибут также будет полезен если изображения не существует!

Вот как это выглядит:

Альтернативный текст при отсутствующем изображении

Атрибут стилей style

Атрибут стилей style используется тогда, когда мы хотим задать какому-то одному элементу определенное свойство, например, мы может задать цвет шрифту, его размер и начертание.

<p style="color:red">Я параграф красного цвета</p>

1	<p style="color:red">Я параграф красного цвета</p>

Мы еще коснемся блока со стилями и вы научитесь придавать документу невероятно красивые очертания. Об этом позже.

Атрибут lang

Язык документа может быть объявлен в теге <html>
Язык объявляется атрибутом lang

Это важно для приложений доступности (программы для чтения с экрана) и поисковых систем.

Пример:

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

<!DOCTYPE html>

<body>

...

</body>

</html>

Первые две буквы как раз указывают на языковую принадлежность. Если есть диалект, то можно через дефис указать еще две буквы (US).

Атрибут title

В данном примере атрибут title добавлен к элементу параграфа <p>

Значение атрибута будет отбражаться в виде подсказки при наведении курсора указателя мышки на абзац. Их еще называют тултипы. За их помощью мы будем обращаться, когда будем верстать сложные проекты.

Пример:

<p title="I'm a tooltip">
This is a paragraph.
</p>

This is a paragraph.

</p>

Тултип или подсказка для заголовка

Атрибут title у параграфа

Мы предлагаем: использовать строчные атрибуты

Стандарт HTML 5 не требует строчных имен атрибутов

Например атрибут title может быть записан как БОЛЬШИМИ буквами, так и маленькими.

Наш всеми любимый стандарт W3C призывает именно к строчныму написанию, особенно для строгих типов документов, таких как XHTML.

Мы используем только нижние буквы регистра. И вас к этому призываем!

Мы предлагаем: значения атрибута в кавычках

Стандарт HTML5 не требует кавычек вокруг значений атрибутов.

Атрибут href, продемонстрированный выше, может быть записан как:

<a href=https://www.w3schools.com>

1	<a href=https://www.w3schools.com>

W3C рекомендует использовать кавычки в HTML и требует строгой котировки для XHTML документов.

Иногда просто необходимо использовать кавычки. В примере ниже атрибут title будет отображаться не правильно, поскольку он содержит пробел.

Пример:

<p title=About W3Schools>

1	<p title=About W3Schools>

Следует всегда статвить кавычки в значениях атрибутов

Важно! Всегда используйте кавычки вокруг значений атрибутов. В противно случае это может привести к ошибкам в интерпретации кода в браузере.

Одинарные или двойные кавычки?

Использование двойных кавычек наиболее частая практика при создании html документов, но никто не запрещает использовать и одинарные.

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

Вот пример:

Использование одинарных кавычек внутри двойных у атрибута title

И обратная ситуация:

Использование двойных кавычек внутри одинарных у атрибута title

Итак, краткое содержание урока в виде выдержек:

Все элементы html могут иметь атрибуты.

Title представляет дополнительную информацию об элементе тега
Href предоставляет адресную информацию для ссылок
Width и height у изображений показывают браузеру значение длины и высоты
Alt – представляет текст для чтения с экрана.
Все значения атрибутов указываем в двойных кавычках и только в маленьком регистре (строчное написание)

Попрактикуемся!

Ниже я подготовил для вас 5 примеров с домашними заданиями.

Задание #1

Задание #2

Задание #3

Задание #4

Задание #5

Ниже в виде таблицы в алфавитном порядке представил наиболее часто используемые html атрибуты.

Атрибут	Описание
alt	Задает альтернативный текст у изображений. Используется если изображения нет
disabled	Указывает на то, что входной элемент должен быть отключен
href	Указывает url (веб адрес) для ссылки
id	Показывает уникальный идентификатор элемента
src	Говорит браузеру какой источник у изображения на сайте. Где брать кратинку
style	Добавляет конкретный стиль для элемента
title	Дополнительная информация об элементе

О полном списке всех атрибутов мы расскажем дальше в специальном блоке «Справочник атрибутов HTML». А сейчас данный урок считаю закрытым. Тренируйтесь, не ленитесь всем хорошего дня! До связи на страницах моего обучающего блога!

Рубрики: Обучение html