Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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

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

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

Вкратце:

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

Структура HTML

В примере из предыдущего урока есть элемент 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.


Аватары экспертов Хекслета

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

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

Об обучении на Хекслете

Открыть доступ

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

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»