Фото Сергея Белосова
Блог Сергея Белоусова
  • - Разработка сайтов
  • - Обучаю профессиональной верстке
  • - Консультации по разработке сайтов и поиску клиентов
Мои контакты: skype skype skype skype

HTML для начинающих: Атрибуты HTML тегов #4

HTML для начинающих: Атрибуты HTML тегов #4

Для расширения возможностей тегов и более гибкого управления содержимым контейнеров, существуют атрибуты которые прописываются внутри открывающегося тега, смотрим пример ниже:

<p атрибут="значение">содержимое тега</p>

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

<p атрибут1="значение1" атрибут2="значение2">содержимое тега</p>

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

Но для чего же нужны эти атрибуты у тегов, давайте разберемся. Возьмем в пример одиночный тег <img>, который мы уже рассматривали ранее (все мы помним для чего нужны одиночные теги, да ?):

<img src="img.png">

Как мы уже знаем тег <img>  говорит браузеру что в этом месте нужно выводить изображение, а сам путь до изображения мы пишем в значение атрибута src="путь", то есть src - это название атрибута. Если мы напишем тег <img> без атрибута src, то браузер просто проигнорирует его и нечего не покажет на экране. А если мы все же напишем атрибут src, но укажем не правильный путь до картинки, то браузер будет показывать ошибку, смотрим пример:

<img src="img-2.png">

Картинки img-2.png по этому пути не существует, по этому браузер показывает иконку ошибки, во всех браузерах она выглядит по разному. Но если мы пропишем второй атрибут alt="":

<img src="img-2.png" alt="Имя картинки">
Имя картинки

Мы видим что вместо изображения выводится его альтернативное имя, то есть атрибут alt="" - это как бы название картинки, которое служит по большей части для поисковых систем и в отличии от src его не обязательно указывать. Изображение, с правильно указанным значением атрибута src будет показываться и без атрибута alt, но его все же рекомендуется указывать правилами валидации HTML кода. Про правила валидации буду рассказывать в других выпусках.

Теперь вы понимаете всю важность атрибута src для тега img и в HTML существуют еще подобные теги, зависящих от атрибутов, про которые я буду рассказывать в следующих выпусках. Но есть атрибуты не обязательные к написанию, но очень полезны в разных ситуациях. Например атрибут title, можно указывать абсолютно любым тегам.

<p title="Заголовок">Параграф</p>

Параграф

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

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

Не забудьте рассказать друзьям!

Хотите научиться верстать и зарабатывать ? Скачайте книгу!

Книга Как быстро научиться верстке сайтов и зарабатывать на этом

Подробнее о книге, жми!