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

< >

5 / 5

Автор: Администратор

27.07.2014

Мы подошли к очень важной теме. Это атрибуты тегов. Как мы уже узнали из предыдущих статей, язык HTML строится на тегах. Важным элементом тегов являются его атрибуты, их очень много и каждый имеет свое назначение. Для каждого тега существует свой набор атрибутов. Некоторые атрибуты общие для нескольких тегов, а некоторые имеют специфическое назначение для определенного тега.

Атрибуты имеют свой синтаксис и пишутся внутри тега, за скобками, после имени тега но, не выходя за пределы закрывающей скобки. Важно! Атрибуты не пишутся у закрывающего тега.

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

Например, у тега вводного поля <input> есть атрибут обязательного заполнения, изначальное состояние, что поле можно не заполнять, а если добавить атрибут required, то поле станет обязательным к заполнению:

<input type="text" required/>

Для того, чтобы определить атрибут со свойством у какого-то тега нужно внутри тега написать название атрибута равно и значение атрибута в двойных кавычках. Для понимания у тега картинки <img> (не парный тег), есть атрибут src (путь до картинки/ссылка на нее). Тогда вот как это будет выглядеть:

<img src="/Путь/ссылка" />

Пример для парного тега ссылки <a></a> для него при помощи атрибута href задается ссылка на страницу сайта:

<a href="/Ссылка на страницу сайта">Нажми на меня и перейдет по ссылке</a>

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

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

Пример стилизирования текста внутри тега абзаца <p></p> при помощи атрибута style:

<p style="text-align:center;color: #00ff00;">Этот текст выравнен по центру и окрашен в зеленый цвет.</p>

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

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

<HTML>
    <HEAD>
        <TITLE> Пример по атрибутам </TITLE>
    </HEAD>
    <BODY>
        <input type="text" required/><br>
        <img src="/logo.png" /><br>
        <a href="http://web.cofp.ru">Нажми на меня и перейдешь по ссылке</a><br>
        <p style="text-align:center;color: #00ff00;">Этот текст выравнен по центру и окрашен в зеленый цвет.</p>
    </BODY>
</HTML>

Вот что мы увидим на страничке