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

атрибут(attribute). Что такое атрибут. Для чего используется? Примеры использован атрибутов!

Подробно об атрибутах

1. Что такое атрибут?
2. Примеры использования атрибутов.
3. Кавычки и атрибуты.
4. Смешанные кавычки внутри значений атрибутов.

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

Дадим определение - "Что такое атрибут":

Атрибуты - это зарезервированные слова, используемые внутри первого тега.

Существует несколько разновидностей атрибутов - они разделяются по наличию/отсутствию значения.

Сколько типов атрибутов существует?

Я бы разделил атрибуты на 3 типа:

Атрибут без значения, например:

selected

Атрибут со значением, например:

type

Атрибут со свойством и значением, например:

attribute style

Примеры атрибутов:

Возьмем для примера иллюстрации атрибута один из уже описанных атрибутов.

Пример атрибута со значением.

В качестве атрибута со значением может выступать, например ссылка и атрибут href:

Красным цветом выделен "атрибут".

Фиолетовым цветом выделено "значение атрибута".

<a href="адрес_ссылки">текст_ссылки</a>

Второй пример: атрибут со свойством и значением.

Как уже было сказано выше... атрибут может иметь свойство и значение! Для иллюстрации данного примера атрибута нам понадобится:

Пусть это будет элемент Dom div

Добавим attribute style

+ Свойство color

И значение цвет

Соберем весь код примера атрибута вместе:

Красным цветом(опять) выделен "атрибут".

Фиолетовым цветом выделено "свойство атрибута".

И через двоеточие значение : цвет.

<div style=" color : green ">атрибут со свойством и значением</div>



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

Выше рассмотрели несколько вариантов атрибутов. Есть некоторые атрибуты, которые могут быть разными, но иметь одно и тоже значение, например атрибут "disabled" - все из выше приведенных вариантов использования данного атрибута приведут к одному и тому же!

Запрет на заполнение input

<input disabled>
<input disabled="">
<input disabled="disabled">

Выведем примеры атрибутов прямо здесь:






Как видим... из примера атрибутов - все они одинаковые.

Прим автора

Некоторые вещи могут ставить в тупик - "зачем так сделано"?

На это нет конкретного ответа.

Выскажу свое мнение... поскольку всё, что связано с сайтом... html, css, php, javascript и др. - это совсем молодые разделы "web"-а, и они просто ещё не сформировались окончательно! Поэтому... процесс формирования , иногда, имеет причудливые формы!




Кавычки и атрибуты.

Кавычки и атрибуты - как они меду собой взаимодействуют?

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

Возможно использование значения атрибута без кавычек вот таким образом:

<a href=адрес_ссылки>Атрибут без кавычек</a>

Если у вас два атрибута без кавычек, то между ними должен быть пробел;

<a href=адрес_ссылки target=_blank>Атрибут без кавычек</a>

Использование двойных кавычек в атрибуте:

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

<a href="адрес_ссылки">Атрибут с двойными кавычками</a>
<a href="адрес_ссылки" target="_blank">Атрибут с двойными кавычками</a>

Использование одинарных кавычек в атрибуте:

Реже используются одинарные кавычки: Примеры использования одинарных кавычек в атрибутах:

<a href='адрес_ссылки'>Атрибут с одинарными кавычками</a>
<a href='адрес_ссылки' target='_blank'>Атрибут с одинарными кавычками</a>



Смешанные кавычки внутри значений атрибутов.

Иногда требуется выделить часть текста в значении атрибута кавычками!

Как можно это сделать правильно?

Данная задачка - это тоже самое, как и проблема двойных и одинарных кавычек в php или другими словами..., чтобы синтаксис "html" не был нарушен, то:

Правильный синтаксис смешанных кавычек в атрибуте

Снаружи двойные - внутри одинарные.

Снаружи одинарные - внутри двойные.

Пример кавычек: снаружи одинарные, внутри двойные в атрибуте

<div title='Часть значения атрибута в одинарных кавычках "другая в двойных"'> </div>

Пример кавычек: снаружи двойные , внутри одинарные в атрибуте

Или наоборот:

<div title="Часть значения атрибута в двойных кавычках 'другая в одинарных'"> </div>