5. HTML — Атрибуты

Вы уже знакомы с несколькими html-тегами и их использованием, например теги заголовков <h1>, <h2>, или тег абзаца <p> и другие. До сих пор мы использовали их в простейшей форме, но большинство тегов в HTML могут иметь атрибуты, которые являются дополнительными битами информации.

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

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

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример атрибута align</title>
  </head>
  <body>
    <p align="left">Выровнено по левому краю.</p>
    <p align="center">Выровнено по центру.</p>
    <p align="right">Выровнено по правому краю.</p>
  </body>
</html>

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

Пример атрибута align, атрибут align в HTML

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

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

  • id
  • title
  • class
  • style

Атрибут id

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

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

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

<p id="html">Этот абзац объясняет, что такое HTML.</p>
<p id="css">Этот абзац объясняет, что такое каскадная таблица стилей (CSS).</p>

Атрибут title

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

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример атрибута title</title>
  </head>
  <body>
    <h2 title="Привет самоучитель по HTML!">Пример заголовка</h2>
  </body>
</html>

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

Пример атрибута title, атрибут title в HTML

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

Атрибут class

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

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

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

Атрибут style

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

<!DOCTYPE html>
<html>
  <head>
    <title>Пример атрибута style</title>
  </head>
  <body>
    <p style="align: center; color: #008cff;">Немного текста... </p>
  </body>
</html>

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

Пример атрибута style, атрибут style в HTML

На данный момент мы не изучаем CSS, так что давайте продолжим, не беспокоясь о CSS. Здесь Вам нужно понять, какие существуют html-атрибуты, и как их можно использовать при форматировании содержимого.

Атрибуты интернационализации

Существует три атрибута интернационализации в HTML, которые доступны для большинства (хотя и не для всех) элементов XHTML.

  • dir
  • lang
  • xml:lang

Атрибут dir

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

ЗначениеОписание
ltrСлева направо (значение по умолчанию).
rtlСправа налево (для языков, таких как иврит или арабский, которые читаются справа налево).

Пример

<!DOCTYPE html>
<html dir="rtl">
  <head>
    <title>Пример направления потока текста</title>
  </head>
  <body>
    <p>Отображает направленный текст справа налево.</p>
  </body>
</html>

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

Пример атрибута dir, атрибут dir в HTML

Когда атрибут dir используется в теге <html>, он определяет, как текст будет представлен во всем документе. При использовании в другом теге он управляет направлением текста только для содержимого этого тега.

Атрибут lang

Атрибут lang — позволяет указать основной язык, используемый в документе, но этот атрибут хранится в HTML только для обратной совместимости с более ранними версиями HTML. Этот атрибут был заменен атрибутом xml:lang в новых xhtml-документах.

Значения атрибута lang — это стандартные двухсимвольные языковые коды ISO-639. Проверьте коды ISO-639 для языка HTML, перейдите по ссылке для получения полного списка кодов языков.

Пример

<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Русский язык страницы</title>
  </head>
  <body>
    <p>Эта страница использует русский язык.</p>
  </body>
</html>

Атрибут xml:lang

Атрибут xml:lang — это XHTML замена для атрибута lang. Значение атрибута xml:lang должно быть ISO-639 кодом страны, которые указаны выше.

Общие атрибуты

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

АтрибутОпцияФункция
alignright, left, centerГоризонтальное выравнивание тегов.
valigntop, middle, bottomВертикально выравнивает тегов внутри html-элемента.
bgcolorчисловые, шестнадцатеричные, RGB значенияПомещает фоновый цвет за элемент.
backgroundURLПомещает фоновое изображение за элемент.
idопределяется пользователемИменование элемента для использования с каскадными таблицами стилей.
classопределяется пользователемКлассифицирует элемент для использования с каскадными таблицами стилей.
widthчисловое или процентное значениеЗадает ширину таблиц, изображений или ячеек таблицы.
heightчисловое или процентное значениеЗадает высоту таблиц, изображений или ячеек таблицы.
titleопределяется пользователем«Всплывающий» заголовок элементов.

Мы ещё увидим соответствующие примеры атрибутов при изучении других html-тегов (полный список html-тегов и связанных атрибутов).

Поделитесь:

О сайте

Все материалы сайта proglang.su являются результатом труда его авторов. Копирование материалов в некоммерческих целях без указания источника в виде прямой ссылки на сайт proglang.su запрещено. Использование материалов в коммерческих целях разрешено только с письменного согласия автора. Нарушение авторских прав преследуется по закону. Мы это делаем, чтобы защитить плоды своих трудов от воровства. © 2014-2017

Присоединяйтесь


Обратная связь