Найти тему
<Путь в IT/>

Что же такое - атрибут HTML тегов?

Оглавление
Схема правильного обозначения атрибутов
Схема правильного обозначения атрибутов

Что такое атрибут?

Атрибут - это расширение тега. То есть, если текст в параграфе

  • <p>Путь в IT</p> вам нужен например в центре сайта, то

вы можете указать этому тегу (<p>) атрибут, который будет давать ваши инструкции, как ему себя вести в данном случае.

Параграфы без атрибутов
Параграфы без атрибутов
Параграф с атрибутом
Параграф с атрибутом
Не понял, работает же...
Не понял, работает же...

Сейчас мы сказали тегу (<p>) - всё, что у тебя в содержимом, пускай шлёпает в центр.

Вопрос: есть ли разница между значениями center и middle, в атрибуте align? Ведь center - это середина между левой и правой стороной, а середина - это центр между как левым и правым, так и низом с верхом.

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

Ладно, что такое атрибуты и зачем они нужны, я маленько разобрался, некст...

Какие бывают атрибуты и их синтаксис

Ну, тут всё элементарно просто (нет). Атрибуты бывают логические и со значениями.

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

Синтаксис логических атрибутов

  • <тег атрибут>...</тег> логический атрибут может быть как сам по себе
  • <тег атрибут="">...</тег> так и просто пустым, в "" пусто.
  • <тег атрибут="атрибут"> так же, в значении атрибута можно указать имя этого же атрибута, это считается хорошим тоном верстальщика.

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

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

  • #00ffff - это например цвет морской волны (:
  • #008080 - а это сине-зелёный

Естественно, это мало кто сможет запомнить...

Вообще, значением атрибута называется всё, что пишется в апострофах (одинарные кавычки '...') или в двойных кавычках "..." .

Пример значений атрибутов
Пример значений атрибутов

По значениям атрибутов будет отельная статья.

Синтаксис атрибутов со значениями

  • <тег атрибут="значение">...</тег> атрибут со значением в парном теге.
  • <тег атрибут="значение"> атрибут со значением в самозакрывающемся теге.

Какие ещё бывают атрибуты?

А ещё, они бывают

  • Уникальные - атрибуты, которые предназначены для определенного тега.
  • Универсальные - общие атрибуты, которые подходят практически к любому тегу. Типа: id, class, style...
  • Атрибуты событий (HTML события) - эти атрибуты выполняют какое-либо действие, зависящее от того, какие действия выполнит пользователь, то есть посетитель сайта. Самые интересные на мой взгляд атрибуты.
На заметку: изначально, у каждого тега уже есть свой атрибут, стандартный атрибут. Если вы не назначаете никакого атрибута тегу, то ему присваивается свой стандартный атрибут, даже если его не видно в коде.

Кстати, кто внимательный, и заметил на одном из скриншотов незначительную, но ошибку в коде? (:

Она где-то в атрибутах и их значениях.

Спасибо! Sayonara