Атрибуты

Множество элементов HTML5 могут иметь атрибуты. Атрибут предоставляет дополнительную информацию о конкретном элементе, и они всегда указываются в открывающем теге. Например, вы хотите создать ссылку. Элемент ссылки указывается как <a> тег и адрес назначения указываются в атрибуте href.

<a href="http://www.myurl.com">This is a link</a>

Как вы видите, элемент ссылки состоит из открывающего тега <a> и закрывающего тега </a>. Содержимое элемента-ссылки: «Это ссылка» (This is a link). Но внутри открывающего тега находиться атрибут, href. Атрибут href всегда имеет значение, в данном случае http://www.myurl.com. Каждый раз, когда у вас есть элемент с атрибутом, шаблон для записи атрибутов будет attribute = "value" (атрибут = "значение").

Здесь вы должны заметить, что за именем атрибута следует символ «=», а значение атрибута всегда заключено в "". В HTML5 вы можете фактически опустить кавычки, если значение не содержит ограниченных символов (например >, = или пробел), но это увеличивает риск ошибок - давайте рассмотрим элемент картинки, чтобы показать это.

<img src="my-puppy.jpg" alt="This is a picture of my puppy, Bob">

Если вы посмотрите на атрибут alt (alt- аббревиатура альтернативного текста), вы заметите несколько слов. Проблемы не возникает, если вы используете кавычки: кавычки показывают, что всё между ними- это значение атрибута alt. Но, поскольку проблем является ограниченным символом вы не можете писать так:

<img src="my-puppy.jpg" alt=This is a picture of my puppy, Bob>

Если вы написали таким образом, ваш браузер предположит, что значение атрибута alt равно «this», а остальная часть вашего предполагаемого alt-текста («картинка моего щенка, Боб») может сломать остальную часть вашей страницы.

Чему вы научились

• Некоторые элементы HTML могут иметь атрибуты
• Шаблон для атрибутов: attribute = "value"
• Атрибуты предоставляют дополнительную информацию про элемент.
• Атрибуты всегда указываются в начальном теге
• Вам необязательно использовать кавычки, однако это не лучшая идея.

Надеюсь, вы поняли основы HTML, и поэтому, мы готовы перейти к вашей первой веб-странице, на которую мы посмотрим на следующей странице.