Из этого урока вы узнаете, как создать тег, назначить ему тот или иной атрибут, а также познакомитесь с классами и идентификаторами.
Теги (tags, таги, тэги) — это ключевые слова, которые окружены угловыми скобками (<
и >
). Теги являются основой языка HTML. Структура тега всегда такова:
<tag>content</tag>
Теги могут требовать закрытия и могут не требовать. Выше пример тега, который закрывается, для этого перед именем стоит символ /
.
Теги, которые не требуют закрытия имеют такой вид:
<tag />
Обратите внимание на закрывающий слэш в конце, он иногда используется в качестве закрывающего символа, но использовать его не обязательно.
Теги не мы не увидим в браузере, но они являются основой вёрстки любого сайта. Задача тегов — “объяснить” браузеру, где какие размещать элементы, какими свойствами они должны обладать. Далее вы увидите, как писать код и поймёте, где и какие теги следует использовать.
Вот основные теги, которые определяют структуру документа:
Тег | Описание |
---|---|
<html>...</html> |
Весь документ. Всё содержимое должно находиться внутри этого тега |
<head>...</head> |
Информация о документе |
<title>...</title> |
Заголовок страницы, он отображается в заголовке вкладки в браузере |
<body>...</body> |
Визуальное содержимое страницы, все видимые элементы должны находиться внутри этого тега |
<h1>...</h1> |
Заголовок, может меняться от h1 , самого главного, до h6 |
<p>...</p> |
Параграф текста |
Атрибуты тегов
Свойства тегов называют “атрибутами”. Теги могут иметь один или множество атрибутов, а могут быть совсем без них.
Атрибуты используются, чтобы браузер мог отличать одни теги от других, они содержат дополнительную информацию об элементах и всегда указываются в открывающем теге.
Правильно:
<a href="...">...</a>
Неправильно:
<a>...</a href="...">
Атрибуты указываются парами в виде имени и значения: имя="значение"
. Например, вы можете добавить атрибут lang
элементу <html>
:
<html lang="en-US">
Эта строка читается так: у тега <html>
есть атрибут lang
, и его значение — en-US
.
Гиперссылки и изображения
Для создания гиперссылки используется тег <a>
, основным атрибутом для ссылки всегда служит атрибут href
, который указывает, какая страница откроется при клике на этой ссылке. Вот пример текстовой ссылки, то есть содержимое тега <a>
в данном случае — текст:
<a href="http://tokar.ua">Уроки верстки сайтов</a>
У одного и того же элемента может быть множество атрибутов. Например, тег <img>
, который отвечает за изображения:
<img src="img.jpg" alt="Alt text" title="Title" width="100" height="350">
Давайте разберёмся в этой строке: у элемента <img>
есть такие атрибуты:
- src — источник изображения, адрес файла, который должен загрузиться;
- alt — альтернативный текст, он будет отображаться вместо изображения, если оно по каким-то причинам не загружено. Например: изображение ещё загружается, неправильно указан его адрес или пользователь использует текстовый режим браузера;
- title — заголовок (подсказка) изображения, появляется при наведении курсора на него. Может также использоваться для гиперссылок;
- width и height — ширина и высота изображения в пикселях, реже указывается в процентах:
height="50%"
. Если мы не указываем размеры, то изображение отобразится со своими реальными шириной и высотой.
Как добавлять атрибуты
Правила написания атрибутов очень просты:
- значения всегда должны указываться в кавычках;
- используйте только одни и те же кавычки: если слева значения стоит одинарная или двойная кавычка (
'
и"
соответственно), то справа должна быть такая же; - используйте только строчные буквы для имён атрибутов (не касается значений).
Приведу одни из самых часто используемых атрибутов:
Атрибут | Описание |
---|---|
alt |
альтернативный текст для изображения |
class |
класс или классы |
href |
адрес, куда указывает ссылка |
id |
идентификатор |
src |
источник, обычно для изображений |
title |
подсказка для изображения или ссылки |
value |
значение, часто используется в формах |
Атрибуты class и id
Классы и идентификаторы — это атрибуты, которые называются class
и id
соответственно. Они нужны, чтобы можно было выбирать элементы, к которым применять стили. Для выбора элементов по классу, идентификатору или имени тега используются селекторы.
Селекторами могут быть любые имена тегов, но в том случае, когда тегов много, их придётся часто повторять. Тогда верстальщику пригодятся классы и идентификаторы, чтобы отличать одни теги от других.
Атрибуты class
и id
используются, чтобы можно было применить стили только к указанным объектам, они необходимы для стилевого оформления страниц (это CSS, речь о нём пойдёт в следующих уроках и он ещё успеет вам надоесть), а также для скриптов на страницах.
Идентификатор должен быть уникальным, не повторяться на странице и применяться только к одному элементу. Для одного и того же элемента можно указать только один идентификатор.
Правильно:
<img src="img.jpg" alt="" id="image_01">
Неправильно:
<img src="img.jpg" alt="" id="image_01 image_bordered">
Классов может быть любое количество, они указываются через пробел в атрибуте class
, для одного и того же объекта можно указать как только идентификатор, так и только классы, а также и то, и то.
Пример:
<p class="txt-bigger align-center" id="paragraph-main">Текст</p>
Для имён идентификаторов и классов используются одинаковые правила:
- только латинские буквы
хорошо:class="class_01"
, плохо:class="класс_01"
; - только нижний регистр
хорошо:class="class_01"
,нежелательно: class="Class_01"
; - первый символ — только буква
хорошо:image_01
, плохо:01_image
;
Атрибут alt — обязателен для изображений
По правилам разметки у всех изображений обязательно должен быть указан атрибут alt
. Если он вам не нужен, оставляйте его пустым, но всё равно добавляйте везде:
<img src="..." alt="">
Нижний регистр для имён атрибутов
Как имена классов и id, так и имена тегов должны указываться в нижнем регистре.
Вообще HTML-теги регистронезависимы, то есть <P>
для браузера равнозначен <p>
. В спецификации HTML5 нет указаний о том, какой регистр необходимо использовать. Тем не менее, раньше использование прописных букв в именах тегов являлось ошибкой.
Правильно:
<p>Как хорошо, что вы больны не мной</p>
Неправильно:
<P>Как хорошо, что я больна не вами</P>
Сегодня вы немного больше узнали о тегах и атрибутах. Далее мы продолжим изучать теги, я расскажу вам о формах на страницах, метаданных, заголовках и правилах написания HTML. Делитесь уроками с друзьями, а я пока пойду писать следующий урок. До встречи!
Очень доходчиво и структурировано написано! спасибо вам большое!
Когда же будет приложение?