Атрибуты HTML

Раскрываем тему об атрибутах в HTML-тегах

Атрибуты
Атрибуты HTML тегов
Описание видов HTML атрибутов по категориям.

Атрибут — это свойство HTML тега. У атрибутов HTML имеются значения.

Схема HTML-тега с атрибутом и значением, выглядит следующим образом:

Схема парного тега:

<имяТега атрибут="значение"> </имяТега>

Схема одиночного тега:

<имяТега атрибут="значение">

Вместо слова атрибут, можно говорить свойство.

Виды (категории) атрибутов HTML-тегов

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

  1. Глобальные атрибуты,
  2. Атрибуты событий,
  3. Сокращенные атрибуты,
  4. Атрибуты форматирования,
  5. Атрибуты указания пути (адрес),
  6. Атрибуты селекторы,
  7. Атрибут стиля.

Глобальные атрибуты

Глобальные атрибуты — это атрибуты, которые можно вставить в любой тег HTML-документа.

Вот небольшой список глобальных атрибутов:
title=" " — даёт описание элементу,
hidden=" " — делает элемент невидимым,
id=" " — присваивает элементу уникальный идентификатор.

Атрибуты событий

Атрибуты событий — это атрибуты, которые применяются при использовании программирования. Событие запускает функцию или инструкцию, которая выполняет какое либо действие, например изменяет размер шрифта у текста или проверяет введённые пользователем данные и т.д.

Вот небольшой список атрибутов событий:
onclick=" " — событие возникает при щелчке левой кнопки мыши на элементе,
onmouseover=" " — событие возникает при наведении курсора мыши на элемент,
onload=" " — событие возникает при загрузке HTML-документа в браузер.

Сокращенные атрибуты

Сокращенные атрибуты — это атрибуты которые можно записать в сокращенной форме.

Вот небольшой список сокращенных атрибутов:
checked="checked" — в сокращённой форме можно записать как checked,
readonly="readonly" — в сокращённой форме можно записать как readonly,
controls="controls" — в сокращённой форме можно записать как controls.

Атрибуты форматирования

Атрибуты форматирования — это атрибуты которые влияют на внешний вид тега, например на цвет, высоту, ширину и т.д.
Форматирование — это изменение внешнего вида.

Вот небольшой список атрибутов форматирования:
color=" " — влияет на цвет,
align=" " — влияет на выравнивание,
size=" " — влияет на размер шрифта.

В современном сайтостроении, атрибуты форматирования НЕ используют, вместо них работайте с CSS-свойствами.

Атрибуты указания пути

Атрибуты указания пути — это атрибуты которые применяются для того, чтобы указать адрес файла, страницы или сайта.

Атрибутов указания пути всего два:
href=" " — может указывать на адрес страницы в теге ссылки a,
src=" " — может указывать на адрес фотографии в теге изображения img

Атрибуты селекторы

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

Атрибутов селекторов всего два:
class="имяКласса" — атрибут селектора класса,
id="имяУникальногоИдентификатора" — атрибут селектора уникального идентификатора.

Более подробно о селекторах вы можете прочитать в статье Селекторы в CSS

Атрибут стиля

Атрибут стиля — это атрибут, который размещает CSS-код непосредственно в HTML-тег.

Атрибут стиля:
style=" "

Пример внедрения атрибута style=" " в HTML-тег:

<p style="font-size:12px; width:400px;">
 Абзац</p>

В заключение

1. Один и тот же атрибут может принадлежать к разным категориям. Например атрибут id=" " это одновременно и атрибут селектора и глобальный атрибут.

2. К HTML-тегу, можно применить сразу несколько атрибутов, например:

<p id="имяId" class="имяКласса" onclick="имяФункции()" title="Описание абзаца">
 Абзац</p>

Читать далее: Глобальные атрибуты HTML


Дата публикации поста: 5 февраля 2016
Дата обновления поста: 15 октября 2014
Бесплатный хостинг от компании Бегет, для начинающих: beget.com/ru/hosting/free

2 Replies to “Атрибуты HTML”

  1. Марго 12.09.2015 at 23:27

    Все очень понятно, особенно для чайников! Спасибо автор)))

    Ответить

    1. Пожалуйста 🙂

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *