#7 – Что такое атрибуты в HTML?
Что такое атрибуты в HTML? Мы ни раз их уже писали, но все еще не говорили о них. В уроке мы изучим понятие атрибуты и дополнительно рассмотрим их создание на практике.
Видеоурок
В HTML существует гигантское количество различных атрибутов. Запомнить их все – невозможно. Многие атрибуты дублируются в различных тегах, например, атрибут title . Он добавляет всплывающую подсказку и используется в большинстве HTML тегов.
Многие другие атрибуты запоминаются по мере изучения HTML. Если вы не знаете какой-либо атрибут сейчас, то не переживайте. Все основные атрибуты вы все равно запомните, а второстепенные атрибуты помнить не обязательно.
Весь код будет доступен после подписки на проект!Вы уже знакомы с несколькими html-тегами и их использованием, например теги заголовков , , или тег абзаца
и другие. До сих пор мы использовали их в простейшей форме, но большинство тегов в HTML могут иметь атрибуты, которые являются дополнительными битами информации.
Атрибут – используется для определения характеристик html-элемента и помещается внутри открытого тега элемента. Все атрибуты состоят из двух частей – это имя и значение:
- Имя – это свойство, которое Вы хотите установить. Например, элемент абзаца
, в примере ниже, содержит атрибут align, который Вы можете использовать для указания выравнивания абзаца на странице.
- Значение – это значение, которое Вы хотите установить для свойства. Значение атрибута всегда помещается в кавычки. В приведенном ниже примере показаны три возможных значения атрибута align: left, center и right.
Имена и значения атрибутов в HTML не зависят от регистра. Однако консорциум World Wide Web (W3C) рекомендует в своей рекомендации HTML 4 использовать атрибуты и значения атрибутов в нижнем регистре.
Пример
Пример атрибута align Выровнено по левому краю.
Выровнено по центру.
Выровнено по правому краю.
Получим следующий результат:
Основные атрибуты HTML
Существует четыре основных атрибута в HTML, которые могут использоваться для большинства html-элементов (хотя и не для всех):
Атрибут id
Атрибут id html-тега может быть использован для однозначной идентификации любого элемента внутри html-страницы. Существуют две основные причины, по которым Вы можете использовать атрибут id для элемента:
- Если элемент содержит атрибут id как уникальный идентификатор, то можно идентифицировать только этот элемент и его содержимое.
- Если на веб-странице (или в таблице стилей) есть два элемента с одним и тем же именем, Вы можете использовать атрибут id для различения элементов, имеющих одно и то же имя.
Таблицу стилей мы обсудим в отдельном самоучителе. Пока же давайте использовать атрибут id для различения двух элементов абзаца, как показано ниже.
Этот абзац объясняет, что такое HTML.
Этот абзац объясняет, что такое каскадная таблица стилей (CSS).
Атрибут title
Атрибут title – дает название элемента для элемента. Синтаксис для атрибута title аналогичен атрибуту id.
Поведение этого атрибута будет зависеть от элемента, который его несет, хотя он часто отображается как подсказка, когда курсор наводится на элемент или когда элемент загружается.
Пример
Пример атрибута title Пример заголовка
Получим следующий результат:
Теперь попробуйте навести курсор на «Пример заголовка», и Вы увидите, что title, который Вы использовали в вашем коде, выйдет как подсказка курсора.
Атрибут class
Атрибут class – используется для связывания элемента со списком стилей и задает класс элементу. Вы узнаете больше об использовании атрибута class, когда изучите CSS (каскадные таблицы стилей). Так что пока можете это пропустить.
Значением атрибута может быть также список имен классов, разделенных пробелами. Например:
class="названиеКласса1 названиеКласса2 названиеКласса3" Атрибут style
Атрибут style – позволяет указывать правила каскадной таблицы стилей (CSS) внутри элемента.
Пример атрибута style Немного текста.
Получим следующий результат:
На данный момент мы не изучаем CSS, так что давайте продолжим, не беспокоясь о CSS. Здесь Вам нужно понять, какие существуют html-атрибуты, и как их можно использовать при форматировании содержимого.
Атрибуты интернационализации
Существует три атрибута интернационализации в HTML, которые доступны для большинства (хотя и не для всех) элементов XHTML.
Атрибут dir
Атрибут dir – позволяет указать браузеру направление потока текста. Атрибут dir может принимать одно из двух значений, которые Вы можете видеть в следующей таблице:
| Значение | Описание |
| ltr | Слева направо (значение по умолчанию). |
| rtl | Справа налево (для языков, таких как иврит или арабский, которые читаются справа налево). |
Пример
Пример направления потока текста Отображает направленный текст справа налево.
Получим следующий результат:
Когда атрибут dir используется в теге , он определяет, как текст будет представлен во всем документе. При использовании в другом теге он управляет направлением текста только для содержимого этого тега.
Атрибут lang
Атрибут lang – позволяет указать основной язык, используемый в документе, но этот атрибут хранится в HTML только для обратной совместимости с более ранними версиями HTML. Этот атрибут был заменен атрибутом xml:lang в новых xhtml-документах.
Значения атрибута lang – это стандартные двухсимвольные языковые коды ISO-639. Проверьте коды ISO-639 для языка HTML, перейдите по ссылке для получения полного списка кодов языков.
Пример
Русский язык страницы Эта страница использует русский язык.
Атрибут xml:lang
Атрибут xml:lang – это XHTML замена для атрибута lang. Значение атрибута xml:lang должно быть ISO-639 кодом страны, которые указаны выше.
Общие атрибуты
Ниже представлена таблица некоторых других атрибутов, которые можно легко использовать со многими html-тегами.
Мы ещё увидим соответствующие примеры атрибутов при изучении других html-тегов (полный список html-тегов и связанных атрибутов).
Оглавление
- 1. HTML – Самоучитель для начинающих
- 2. HTML – Введение
- 3. HTML – Основные теги
- 4. HTML – Элементы
- 5. HTML – Атрибуты
- 6. HTML – Форматирование текста
- 7. HTML – Фразовые теги
- 29. HTML – Теги
- 41. Коды языков ISO
Атрибуты HTML
Атрибуты
Атрибуты HTML тегов
Атрибут — это свойство HTML тега. У атрибутов HTML имеются значения.
Схема HTML-тега с атрибутом и значением, выглядит следующим образом:
Схема парного тега:
<имяТега атрибут="значение">
Схема одиночного тега:
атрибут="значение">
Вместо слова атрибут , можно говорить свойство .
Виды (категории) атрибутов HTML-тегов
Атрибуты HTML делятся на несколько видов . Я их разделил на семь категорий , в других учебниках количество категорий может различаться:
- Глобальные атрибуты,
- Атрибуты событий,
- Сокращенные атрибуты,
- Атрибуты форматирования,
- Атрибуты указания пути (адрес),
- Атрибуты селекторы,
- Атрибут стиля.
Глобальные атрибуты
Глобальные атрибуты — это атрибуты, которые можно вставить в любой тег HTML-документа.
Вот небольшой список глобальных атрибутов:
title=» » — даёт описание элементу,
hidden=» » — делает элемент невидимым,
id=» » — присваивает элементу уникальный идентификатор.
Атрибуты событий
Атрибуты событий — это атрибуты, которые применяются при использовании программирования. Событие запускает функцию или инструкцию, которая выполняет какое либо действие, например изменяет размер шрифта у текста или проверяет введённые пользователем данные и т.д.
Вот небольшой список атрибутов событий:
onclick=» » — событие возникает при щелчке левой кнопки мыши на элементе,
onmouseover=» » — событие возникает при наведении курсора мыши на элемент,
onload=» » — событие возникает при загрузке HTML-документа в браузер.
Сокращенные атрибуты
Сокращенные атрибуты — это атрибуты которые можно записать в сокращенной форме.
Вот небольшой список сокращенных атрибутов:
checked=»checked» — в сокращённой форме можно записать как checked ,
readonly=»readonly» — в сокращённой форме можно записать как readonly ,
controls=»controls» — в сокращённой форме можно записать как controls .
Атрибуты форматирования
Атрибуты форматирования — это атрибуты которые влияют на внешний вид тега, например на цвет, высоту, ширину и т.д.
Форматирование — это изменение внешнего вида.
Вот небольшой список атрибутов форматирования:
color=» » — влияет на цвет,
align=» » — влияет на выравнивание,
size=» » — влияет на размер шрифта.
В современном сайтостроении, атрибуты форматирования НЕ используют, вместо них работайте с CSS-свойствами.
Атрибуты указания пути
Атрибуты указания пути — это атрибуты которые применяются для того, чтобы указать адрес файла, страницы или сайта.
Атрибутов указания пути всего два:
href=» » — может указывать на адрес страницы в теге ссылки a ,
src=»https://gabdrahimov.ru/html-atributy» — может указывать на адрес фотографии в теге изображения img
Атрибуты селекторы
Атрибуты селекторы — это атрибуты которые предназначены для создания выборки элементов (используются в CSS и JavaScript).
Атрибутов селекторов всего два:
class=»имяКласса» — атрибут селектора класса ,
id=»имяУникальногоИдентификатора» — атрибут селектора уникального идентификатора .
Более подробно о селекторах вы можете прочитать в статье Селекторы в CSS
Атрибут стиля
Атрибут стиля — это атрибут, который размещает CSS-код непосредственно в HTML-тег.
Атрибут стиля:
style=» «
Пример внедрения атрибута style=» » в HTML-тег:
style="font-size:12px; width:400px;"> Абзац
В заключение
1. Один и тот же атрибут может принадлежать к разным категориям. Например атрибут id=» » это одновременно и атрибут селектора и глобальный атрибут .
2. К HTML-тегу, можно применить сразу несколько атрибутов, например:
Абзац
Уроки по верстке сайтов: теги и атрибуты в HTML
Назар Токар
Из этого урока вы узнаете, как создать тег, назначить ему тот или иной атрибут, а также познакомитесь с классами и идентификаторами.
Теги (tags, таги, тэги) — это ключевые слова, которые окружены угловыми скобками ( < и >). Теги являются основой языка HTML. Структура тега всегда такова:
content
Теги могут требовать закрытия и могут не требовать. Выше пример тега, который закрывается, для этого перед именем стоит символ / .
Теги, которые не требуют закрытия имеют такой вид:
Обратите внимание на закрывающий слэш в конце, он иногда используется в качестве закрывающего символа, но использовать его не обязательно.
Теги не мы не увидим в браузере, но они являются основой вёрстки любого сайта. Задача тегов — “объяснить” браузеру, где какие размещать элементы, какими свойствами они должны обладать. Далее вы увидите, как писать код и поймёте, где и какие теги следует использовать.
Вот основные теги, которые определяют структуру документа:
| Тег | Описание |
|---|---|
| . | Весь документ. Всё содержимое должно находиться внутри этого тега |
| . | Информация о документе |
| Заголовок страницы, он отображается в заголовке вкладки в браузере | |
| . | Визуальное содержимое страницы, все видимые элементы должны находиться внутри этого тега |
. |
Заголовок, может меняться от h1 , самого главного, до h6 |
|
. |
Параграф текста |
Атрибуты тегов
Свойства тегов называют “атрибутами”. Теги могут иметь один или множество атрибутов, а могут быть совсем без них.
Атрибуты используются, чтобы браузер мог отличать одни теги от других, они содержат дополнительную информацию об элементах и всегда указываются в открывающем теге.
Правильно:
Неправильно:
Атрибуты указываются парами в виде имени и значения: имя=»значение» . Например, вы можете добавить атрибут lang элементу :
Эта строка читается так: у тега есть атрибут lang , и его значение — en-US .
Гиперссылки и изображения
У одного и того же элемента может быть множество атрибутов. Например, тег , который отвечает за изображения:
Давайте разберёмся в этой строке: у элемента есть такие атрибуты:
- src — источник изображения, адрес файла, который должен загрузиться;
- alt — альтернативный текст, он будет отображаться вместо изображения, если оно по каким-то причинам не загружено. Например: изображение ещё загружается, неправильно указан его адрес или пользователь использует текстовый режим браузера;
- title — заголовок (подсказка) изображения, появляется при наведении курсора на него. Может также использоваться для гиперссылок;
- width и height — ширина и высота изображения в пикселях, реже указывается в процентах: height=»50%» . Если мы не указываем размеры, то изображение отобразится со своими реальными шириной и высотой.
Как добавлять атрибуты
Правила написания атрибутов очень просты:
- значения всегда должны указываться в кавычках;
- используйте только одни и те же кавычки: если слева значения стоит одинарная или двойная кавычка ( ‘ и » соответственно), то справа должна быть такая же;
- используйте только строчные буквы для имён атрибутов (не касается значений).
Приведу одни из самых часто используемых атрибутов:
| Атрибут | Описание |
|---|---|
| alt | альтернативный текст для изображения |
| class | класс или классы |
| href | адрес, куда указывает ссылка |
| id | идентификатор |
| src | источник, обычно для изображений |
| title | подсказка для изображения или ссылки |
| value | значение, часто используется в формах |
Атрибуты class и id
Классы и идентификаторы — это атрибуты, которые называются class и id соответственно. Они нужны, чтобы можно было выбирать элементы, к которым применять стили. Для выбора элементов по классу, идентификатору или имени тега используются селекторы.
Селекторами могут быть любые имена тегов, но в том случае, когда тегов много, их придётся часто повторять. Тогда верстальщику пригодятся классы и идентификаторы, чтобы отличать одни теги от других.
Атрибуты class и id используются, чтобы можно было применить стили только к указанным объектам, они необходимы для стилевого оформления страниц (это CSS, речь о нём пойдёт в следующих уроках и он ещё успеет вам надоесть), а также для скриптов на страницах.
Идентификатор должен быть уникальным, не повторяться на странице и применяться только к одному элементу. Для одного и того же элемента можно указать только один идентификатор.
Правильно:
Неправильно:
Классов может быть любое количество, они указываются через пробел в атрибуте class , для одного и того же объекта можно указать как только идентификатор, так и только классы, а также и то, и то.
Пример:
Текст
Для имён идентификаторов и классов используются одинаковые правила:
- только латинские буквы
хорошо: class=»class_01″ , плохо: class=»класс_01″ ; - только нижний регистр
хорошо: class=»class_01″ , нежелательно: ; - первый символ — только буква
хорошо: image_01 , плохо: 01_image ;
Атрибут alt — обязателен для изображений
По правилам разметки у всех изображений обязательно должен быть указан атрибут alt . Если он вам не нужен, оставляйте его пустым, но всё равно добавляйте везде:
Нижний регистр для имён атрибутов
Как имена классов и id, так и имена тегов должны указываться в нижнем регистре.
Вообще HTML-теги регистронезависимы, то есть для браузера равнозначен
. В спецификации HTML5 нет указаний о том, какой регистр необходимо использовать. Тем не менее, раньше использование прописных букв в именах тегов являлось ошибкой.
Правильно:
Как хорошо, что вы больны не мной
Неправильно:
Как хорошо, что я больна не вами
Сегодня вы немного больше узнали о тегах и атрибутах. Далее мы продолжим изучать теги, я расскажу вам о формах на страницах, метаданных, заголовках и правилах написания HTML. Делитесь уроками с друзьями, а я пока пойду писать следующий урок. До встречи!