Элементы, теги и атрибуты — Основы HTML, CSS и веб-дизайна

Немного формальностей

Мало кто любит терминологию и формальности, но, к счастью, в мире HTML всё довольно просто.

Вкратце:

1. Страница состоит из элементов.
2. Элемент — это набор из тегов и содержания.
3. Теги чаще всего идут парами: открывающий (<tag>) и закрывающий (</tag>). Между ними находится то, что попадает под действие этого тега.
4. Открывающий тег может содержать дополнительную информацию — атрибуты и значения атрибутов. Атрибуты позволяют «настроить» тег.

В примере из предыдущего урока есть элемент a (anchor — якорь), состоящий из открывающего и закрывающего тегов <a></a>.

<a href="https://ru.hexlet.io">Хекслет</a>

Это ссылка, и у неё есть атрибут href со значением https://ru.hexlet.io. Между открывающим и закрывающим тегами находится содержание — слово «Хекслет». Именно оно становится ссылкой.

А ниже есть картинка. Это пример одиночного тега, элемента, в котором не нужен закрывающий тег. Их ещё называют self-closing element — «самозакрывающиеся элементы».

<img src="https://i.imgur.com/789p0uP.png">

Как видите, мы указали атрибут src (от английского "source" — источник) со значением https://i.imgur.com/789p0uP.png. Это адрес файла изображения.

А некоторые элементы состоят из нескольких вложенных элементов. Например, списки:

<ol>
  <li>Код. Тайный язык информатики (Чарльз Петцольд)</li>
  <li>Не заставляйте меня думать (Steve Krug)</li>
  <li>Дизайн привычных вещей (Donald Norman)</li>
</ol>

Это — пронумерованный список (ordered list), поэтому тег называется <ol>. А каждая строчка списка — это элемент списка (list item) — <li>.

На странице это будет выглядеть примерно так:

1. Код. Тайный язык информатики (Чарльз Петцольд)
2. Не заставляйте меня думать (Steve Krug)
3. Дизайн привычных вещей (Donald Norman)

А непронумерованный список (unordered list) создаётся с помощью <ul>. Заметьте, что достаточно лишь изменить открывающий и закрывающий тег всего списка, а сами элементы списка изменять не нужно.

<ul>
  <li>Код. Тайный язык информатики (Чарльз Петцольд)</li>
  <li>Не заставляйте меня думать (Steve Krug)</li>
  <li>Дизайн привычных вещей (Donald Norman)</li>
</ul>

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

See the Pen HTML lists with links by Hexlet (@hexlet) on CodePen.

---

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты