Перейти к основному содержимому

Теги и атрибуты

Тег (tag) — элемент языка разметки гипертекста. Это самые маленькие строительные блоки, из которых состоит любая веб-страница. Каждый тег обозначает какую-то сущность: заголовок, список, абзац текста, изображение.

Для выделения тегов среди текста документа используются угловые скобки, в которых указывается имя тега и его атрибуты.

<имя_тега>...</имя_тега>

Открывающий тег указывает на то, где начинается элемент, закрывающий - где заканчивается. Закрывающий тег образуется путем добавления слэша (/) перед именем тега. Между открывающим и закрывающим тегами находится содержимое тега - контент.

Примеры тегов.

<section>Секция</section>
<p>Абзац</p>
<a>Ссылка</a>
<button>Кнопка</button>

Комментарии​

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

<!-- Это комментарий, его содержимое не отобразится на странице -->

<p>Это абзац текста, он будет на странице.</p>

<!--
  Комментарий может быть многострочным.
  Это удобно для более ёмких описаний.
-->

Атрибуты​

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

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

<a href="https://google.com" class="link">...</a>

<img src="cat.jpg" alt="cute cat" />

<input type="text" name="user_name" />

<button type="submit">...</button>

<p class="text">...</p>

Рассмотрим некоторые атрибуты тега <a>.

<a href="http://google.com" target="_blank" title="Поисковая система Google">
  Google.com
</a>
  • href - адрес страницы, на которую перейдёт пользователь при нажатии на текст ссылки.
  • target - указывает то, в какой вкладке откроется страница при клике по ссылке.
  • title - добавляет всплывающую подсказку к тексту ссылки.

Рассмотрим некоторые атрибуты тега <img>.

<img
  src="https://picsum.photos/640/480"
  alt="Произвольная картинка от генератора"
/>
  • src - адрес изображения.
  • alt - альтернативный текст, который будет показан если картинка не загрузилась.
Полезно

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

Парные теги​

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

<!-- Статъя с заголовком и абзацем -->
<article>
  <h1>Кратко о парных тегах</h1>
  <p>
    Большинство тегов парные. Их контент заключён между открывающим и
    закрывающим тегом.
  </p>
</article>

Одиночные теги​

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

<!-- Метаинформация о кодировке -->
<meta charset="utf-8" />

<!-- Поле ввода -->
<input type="text" />

<!-- Изображение -->
<img src="cat.jpg" alt="cool cat" />
Интересно

В предыдущих стандартах HTML одиночные теги обязательно записывались с обратным символом / перед закрывающей скобкой. Например <img /> или <input />. В современном стандарте это необязательно и ни на что не влияет.

Вложенность тегов​

Придерживаясь некоторых правил, теги можно вкладывать друг в друга. При вложении следует соблюдать порядок их закрытия по принципу матрёшки.

<тег1>
  <тег2>
    <тег4>...</тег4>
    <тег5>...</тег5>
  </тег2>
  <тег3>
    <тег6>...</тег6>
  </тег3>
</тег1>

Вот валидная разметка абзаца со ссылкой и выделенным текстом, а также списка преимуществ с описанием.

<p>
  <a href="squoosh.app">Squoosh</a> - сервис <em>оптимизации</em> изображений.
</p>

<p>Преимущества</p>
<ul>
  <li>Работает в браузере</li>
  <li>Не грузит систему</li>
  <li>Удобный интерфейс</li>
</ul>

А в этой версии есть проблемы (строки подсвечены).

<!-- Не соблюдается порядок закрытия тегов -->
<p><a href="squoosh.app">Squoosh</a> - сервис <em></a>оптимизации</p> изображений.</em>

<!-- Не соблюдаются специфические правила вложения тегов -->
<ul>
  <p>Преимущества</p>
  <li>Работает в браузере</li>
  <li>Не грузит систему</li>
  <li>Удобный интерфейс</li>
</ul>

Спецификация HTML​

Спецификация HTML Living Standard - главный документ, описывающий стандарты, возможности и будущее развитие языка HTML.

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

Полезно

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

Вложенность тегов​

Алгоритм определения возможности вложения тега довольно прост.

  • Идем в спецификацию и находим нужный элемент.
  • Проверяем контентную модель элемента (Content model), в который вкладываем.
  • Проверяем категории элемента (Categories), который вкладываем.
  • Если категория подходит и ограничения не запрещают, то вкладывать можно, иначе нельзя.

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

Справочники​

Кроме спецификации под рукой полезно иметь справочники и шпаргалки. Помнить всё наизусть не нужно, более специфические или редко используемые вещи всегда можно подсмотреть.