Что такое атрибуты в html

Вы уже знакомы с несколькими html-тегами и их использованием, например теги заголовков , , или тег абзаца

и другие. До сих пор мы использовали их в простейшей форме, но большинство тегов в HTML могут иметь атрибуты, которые являются дополнительными битами информации.

Атрибут – используется для определения характеристик html-элемента и помещается внутри открытого тега элемента. Все атрибуты состоят из двух частей – это имя и значение:

• Имя – это свойство, которое Вы хотите установить. Например, элемент абзаца

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

• Значение – это значение, которое Вы хотите установить для свойства. Значение атрибута всегда помещается в кавычки. В приведенном ниже примере показаны три возможных значения атрибута align: left, center и right.

Имена и значения атрибутов в HTML не зависят от регистра. Однако консорциум World Wide Web (W3C) рекомендует в своей рекомендации HTML 4 использовать атрибуты и значения атрибутов в нижнем регистре.

Пример

     
Выровнено по левому краю.
 
Выровнено по центру.
 
Выровнено по правому краю.
   

Получим следующий результат:

Основные атрибуты HTML

Существует четыре основных атрибута в HTML, которые могут использоваться для большинства html-элементов (хотя и не для всех):

Атрибут id

Атрибут id html-тега может быть использован для однозначной идентификации любого элемента внутри html-страницы. Существуют две основные причины, по которым Вы можете использовать атрибут id для элемента:

• Если элемент содержит атрибут id как уникальный идентификатор, то можно идентифицировать только этот элемент и его содержимое.
• Если на веб-странице (или в таблице стилей) есть два элемента с одним и тем же именем, Вы можете использовать атрибут id для различения элементов, имеющих одно и то же имя.

Таблицу стилей мы обсудим в отдельном самоучителе. Пока же давайте использовать атрибут id для различения двух элементов абзаца, как показано ниже.

Этот абзац объясняет, что такое HTML.
 
Этот абзац объясняет, что такое каскадная таблица стилей (CSS).
 

Атрибут title

Атрибут title – дает название элемента для элемента. Синтаксис для атрибута title аналогичен атрибуту id.

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

Пример

     
Пример заголовка
   

Получим следующий результат:

Теперь попробуйте навести курсор на «Пример заголовка», и Вы увидите, что title, который Вы использовали в вашем коде, выйдет как подсказка курсора.

Атрибут class

Атрибут class – используется для связывания элемента со списком стилей и задает класс элементу. Вы узнаете больше об использовании атрибута class, когда изучите CSS (каскадные таблицы стилей). Так что пока можете это пропустить.

Значением атрибута может быть также список имен классов, разделенных пробелами. Например:

class="названиеКласса1 названиеКласса2 названиеКласса3" 

Атрибут style

Атрибут style – позволяет указывать правила каскадной таблицы стилей (CSS) внутри элемента.

     
Немного текста.
   

Получим следующий результат:

На данный момент мы не изучаем 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> head> title>Заголовок документа title> head> body> a href="https://ru.w3docs.com">Нажмите на ссылку, и вы будете перенаправлены на домашнюю страницу нашего сайта. a> body> html>

Результат

В браузере код будет отображаться так:

В одном HTML элементе могут содержаться два и более атрибутов. Отделяются атрибуты друг от друга пробелом. Последовательность атрибутов не имеет значения.

Синтаксис

1=”значение” атрибут2=”значение”>Текст

Список HTML атрибутов

Ниже мы приводим HTML атрибуты, которые используются чаще всего.

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

HTML Атрибуты

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

Атрибуты тегов HTML

• Все HTML элементы могут иметь атрибуты
• Атрибуты предоставляют дополнительную информацию об элементах
• Атрибуты всегда задаются в начальном теге
• Атрибуты обычно входят в пары имя/значение, такие как: name=»value»

Атрибут href

Пример

Вы узнаете больше о ссылках в разделе HTML Ссылки.

Атрибут src

Тег используется для встраивания изображения в HTML страницу. Атрибут src указывает путь к отображаемому изображению:

Пример

Атрибуты width и height

Тег также должен содержать атрибуты width и height , который определяет ширину и высоту изображения (в пикселях):

Пример

Атрибут alt

Обязательный атрибут alt требуется для тега указывает альтернативный текст для изображения, если изображение по какой-либо причине не может быть отображено. Это может быть связано с медленным соединением или ошибкой в системе. Атрибут src , используется пользователем для чтения программы с экрана.

Пример

Пример

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

Вы узнаете больше об изображениях в нашем разделе HTML Изображения.

Атрибут style

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

Пример

Вы узнаете больше о стилях в нашем разделе HTML Стили.

Атрибут lang

Всегда подключайте атрибут lang внутри тега , чтобы объявить язык веб страницы. Это делается для того, чтобы помочь поисковым системам и браузерам.

В следующем примере в качестве языка указывается русский язык:

Коды стран также могут быть добавлены к коду языка в разделе атрибута lang . Таким образом, первые два символа определяют язык HTML страницы, а последние два символа определяют страну.

В следующем примере в качестве языка указан русский, а в качестве страны — РОССИЯ:

Вы можете увидеть все языковые коды в нашем приложении. Справочник кода языка HTML.

Атрибут title

Атрибут title определяет некоторую дополнительную информацию об элементе.

Значение атрибута title будет отображаться в виде всплывающей подсказки при наведении курсора мыши на элемент:

Пример

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

Стандарт HTML не требует имен атрибутов в нижнем регистре.

Атрибут title (и все остальные атрибуты) могут быть записаны в верхнем или нижнем регистре, например title или TITLE.

Однако консорциум sw3C рекомендует строчные атрибуты в HTML и требует строчные атрибуты для более строгих типов документов, таких как XHTML.

Schoolsw3 всегда использует имена атрибутов в нижнем регистре.

Всегда цитировать значения атрибутов

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

Однако консорциум sw3C рекомендует строчные атрибуты в HTML и требует строчные атрибуты для более строгих типов документов, таких как XHTML.

Хорошо:

Плохо:

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

Пример

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

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

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

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

Краткое содержание главы

• Все HTML элементы могут иметь атрибуты
• Атрибут href в теге указывает URL адрес страницы, на которую переходит ссылка
• Атрибут src в теге указывает путь к отображаемому изображению
• Атрибут width и height в теге предоставьте информацию о размере изображений
• Атрибут alt в теге предоставляет альтернативный текст для изображения
• Атрибут style используется для добавления стилей к элементу, таких как цвет, шрифт, размер и многое другое
• Атрибут lang в теге тег объявляет язык веб страницы
• Атрибут title определяет некоторую дополнительную информацию об элементе

Упражнения HTML

Справочник атрибутов HTML

Полный список всех атрибутов для каждого HTML элемента приведен в нашем разделе: HTML Справочник атрибутов.

Мы только что запустили
SchoolsW3 видео

курс сегодня!

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

Schoolsw3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

HTML: Атрибуты HTML

Разметка информации на странице включает в себя множество тонкостей и нюансов. Например, можно задавать не только тип элемента, но и передавать дополнительную информацию, которая будет обработана браузером. Наведите курсор на текст ниже:

Наведите курсор мыши на эту строку текста. Лучше сделать это с компьютера

При наведении мыши на элемент появилось небольшое окно с текстом «Всплывающая подсказка. Здесь можно указать дополнительную информацию». Такое поведение задаётся с помощью атрибутов — специальных конструкций, которые могут влиять на вывод информации на странице. Каждый тег в HTML имеет несколько стандартных атрибутов, которые записываются по шаблону атрибут=»значение» , где:

• Атрибут — название атрибута. Для появления всплывающей подсказки использовался атрибут title
• Значение — значение атрибута. Оно может быть разным, в зависимости от самого атрибута. В примере, в качестве значения, использовался текст, который должен быть выведен при наведении на элемент

Разметка примера со всплывающей подсказкой:

Наведите курсор мыши на эту строку текста. Лучше сделать это с компьютера
 

Атрибут title можно использовать не только на параграфах, а на любом элементе страницы. Такие атрибуты называются глобальными, так как не зависят от элемента. В противовес им есть атрибуты, которые уникальны для одного или нескольких тегов. Например, атрибут colspan , который указывает на объединение ячеек в таблицах. Его использование вне таблиц не имеет никакого смысла.

Атрибуты могут неявно влиять на вывод информации. Например, при использовании языка стилей CSS, встречается атрибут class , задача которого — отделить похожие элементы друг от друга с помощью значения атрибута. О работе классов вы узнаете из курса по CSS, а сейчас важно знать, что этот атрибут никак не проявляет себя при выводе информации на страницу

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

Параграф с несколькими атрибутами
 

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

Задание

Создайте параграф с произвольным текстом и всплывающей подсказкой. Добавьте к нему класс hexlet

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

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

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Полезное

• Все глобальные атрибуты можно посмотреть на MDN Web Docs