Атрибуты являются важной частью HTML-разметки. Они используются для того, чтобы определить характеристики открывающегося тега. Атрибуты всегда указываются в начальном теге (или открывающем), их значения всегда должны быть заключены в кавычки.
Некоторые атрибуты обязательны для определенных элементов. Например, тег <img> должен содержать атрибуты src и alt.
Все атрибуты состоят из двух частей — имени и значения, точнее, имя=значение, еще более точно — name=»value»
- Имя — это устанавливаемый атрибут. Например, тег <font> имеет атрибут с именем face, который используется, чтобы указать, какой шрифт для текста вы хотите выбрать.
- Значение — это параметр, который будет иметь выбранный атрибут. Соответственно, атрибут face может иметь значение, например, Arial, то есть для текста задан шрифт Arial.
С помощью атрибутов элементу можно задавать параметры, определять стиль оформления. Если для тега атрибут не добавлен, то браузер будет подставлять значение по умолчанию.
Распространенные атрибуты html
С помощью атрибутов можно задавать размеры элементов, цвет, выравнивание и т.д. Атрибутов очень много, но мы рассмотрим для начала самые распространённые и универсальные атрибуты, которые могут использоваться со многими HTML-тегами:
| Атрибут | Параметры | Описание |
| align | right, left, center | Выравнивание тега по горизонтали |
| valign | top, middle, bottom | Вертикальное выравнивание тега |
| bgcolor | числовые, шестнадцатеричные значения RGB | Цвет фона позади тега |
| background | URL-адреса | Фоновое изображения за тегом |
| id | Определяется пользователем | Имя тега |
| class | Определяется пользователем | Имя тега для использования каскадных таблиц стилей CSS |
| width | Числовое значение (%, px) | Задает ширину таблицы, ее ячейки или изображения |
| height | Числовое значение (%, px) | Задает высоту таблицы, ее ячейки или изображения |
| href | a, area, base, link | URL связанного ресурса |
| title | Определяется пользователем | Вывод названия страницы во вкладке браузера |
| name | button, form, fieldset, iframe, input, keygen, object, output, select, textarea, map, meta, param | Имя элемента |
Как правильно писать атрибуты html
Так же, как и теги, атрибуты со значениями принято писать маленькими буквами. В целом значения атрибутов нечувствительны к регистру, за исключением определенных, таких как id и class. Однако валидатор W3C рекомендует использовать строчные буквы для указания значений атрибутов в их спецификации.
Значения с атрибутами записываются в таком формате:
| 1 2 3 4 | атрибут="значение" lang="en" |
Писать атрибуты всегда нужно внутри открывающего тега, после зарезервированного слова.
| 1 2 3 | <p align="center">Абзац</p> |
Обычно для одного тега доступно несколько атрибутов. В каком порядке они будут перечислены, неважно — на результат отображения их расположение не влияет. Поэтому теги вида
| 1 2 3 | <img src="/images/foto.png" width="440" height="120"> |
и
| 1 2 3 | <img height="120" width="440" src="/images/foto.png"> |
по своему действию равны.
Каждый атрибут тега относится к определенному типу (например: текст, число, путь к файлу и др.), который обязательно должен учитываться при написании атрибута. Например, тег <img> добавляет на веб-страницу рисунок, а его атрибут height задает высоту изображения в пикселах. Если поставить не число, а, скажем, прописать «one hundred and twenty», то значение будет проигнорировано и возникнет ошибка при валидации документа.
Атрибут должен иметь:
- Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).
- Имя атрибута и следующий за ним знак равенства.
- Значение атрибута, заключённое в кавычки.
Для указания значений атрибутов могут использоваться как одинарные, так и двойные кавычки, но двойные более распространенные. Например, оба приведенных ниже варианта верны и равны:
| 1 2 3 | <a href="http://ссылка">Анкор</a> |
и
| 1 2 3 | <a href='http://ссылка'>Анкор</a> |
Но смешивать кавычки ни в коем случае нельзя! Такой вариант будет неверным:
| 1 2 3 | <a href="http://ссылка'>Анкор</a> |
Пустые атрибуты (булевые, логические)
Есть атрибуты без значений, применяются они в HTML5. Состоят только из имени. К часто используемым логическим атрибутам можно отнести: checked, disabled, readonly, required и т.д. Значение не требуется, так как само наличие или отсутствие атрибута уже меняет поведение элемента.
Пустые атрибуты допустимо записывать в трёх видах:
- без значения,
- с пустым значением,
- со значением, совпадающим с именем атрибута.
Все нижеприведенные варианты равнозначны, но желательно придерживаться одной выбранной формы записи:
| 1 2 3 4 5 | controls controls="" controls="controls" |
Универсальные (глобальные) атрибуты
У некоторых элементов есть свой набор характерных атрибутов, но кроме этого существуют атрибуты, которые можно добавлять к любому элементу. По этой причине они называются универсальными, или глобальными атрибутами. Рассмотрим самые популярные: class, hidden, id, lang, style, title, align.
Атрибут class позволяет связать тег с заранее заданным с помощью CSS оформлением.
Атрибут hidden позволяет скрыть содержимое элемента, чтобы оно не отображалось в браузере. При значении false объект отображается, при true — скрывается.
Атрибут id задаёт идентификатор элемента — своего рода имя, которое нужно для простой смены стиля объекта, а также для того, чтобы к нему могли обращаться скрипты. Значением атрибута и будет его имя. Начинаться оно должно обязательно с латинской буквы, и может содержать цифры, буквы всё того же латинского алфавита (большие и маленькие), а также символы дефиса (-) и подчёркивания (_). Русских букв содержать не может.
Атрибут lang помогает браузеру понять, на каком языке написан контент, и задать ему соответствующий стиль (например, в языках могут использоваться разные кавычки). Значениями выступают коды языков (русский — ru, английский — en и т. п.).
Атрибут style позволяет задать оформление элемента с помощью CSS-кода.
Атрибут title — всплывающая подсказка, которая появится, если подвести мышку к элементу и на некоторое время оставить её неподвижной. Строка в значении и будет подсказкой.
Атрибут align задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение left), по правому (right), по центру (center) или по ширине (justify). Для изображений (тег <img>) также доступно выравнивание по верхней границе самого высокого элемента строки (top), по нижней границе (bottom), а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.
Стоит иметь в виду, что использовать атрибут align не рекомендуется, а выравнивать текст лучше с помощью CSS.
Практическое применение атрибутов к тегам
Давайте на практике применим атрибуты к каким-нибудь тегам и посмотрим, что получится.
| 1 2 3 4 5 6 7 8 9 10 | <html> <head> <title>Тестируем атрибуты</title> </head> <body> Здесь у нас написан текст. </body> </html> |
Для примера выделим текст Здесь у нас написан текст красным цветом. Для этого нам необходим тег <font>, который отвечает за характеристику шрифта, в данном случае — за его цвет. А сам цвет задаётся атрибутом color, который прописывается следующим образом — color=»#код цвета». Все коды цветов есть здесь.
В конечном итоге наш код примет такой вид:
| 1 2 3 4 5 6 7 8 9 10 | <html> <head> <title>Тестируем атрибуты</title> </head> <body> <font color="#ff000">Здесь у нас написан текст.</font> </body> </html> |
Теперь сохраняем этот файл в формате html и смотрим, как это будет выглядеть в браузере:
Рассмотрим еще один небольшой пример. Наш текст располагается с левой стороны в браузере. Сейчас мы выставим его по центру. Чтобы весь текст выставить по центру, воспользуемся тегом <div> с атрибутом align, который отвечает за выравнивание элемента страницы.
Атрибуту align присваиваются следующие значения:
center — выравнивание текста по центру
left — выравнивание текста по левому краю
right — выравнивание текста по правому краю
justify — выравнивание по левому и правому краю.
Нам нужно выравнять по центру — <div align=»center»>
Для выравнивания всего текста тег <div> устанавливается в начале документа и в конце обязательно закрывается. Наш код примет следующий вид:
| 1 2 3 4 5 6 7 8 9 10 11 | <html> <div align="center"><head> <title>Тестируем атрибуты</title> </head> <body> <font color="#ff000">Здесь у нас написан текст.</font> </div> </body> </html> |
Теперь текст передвинется в середину браузера:
Для лучшего освоения таких уроков можно скачать и установить программу Nvu — html редактор с официального сайта, программа бесплатная. У программы большие возможности. Например вы пишете код, переключили в режим просмотра и видите, что получилось.
Статья была полезной?