Элементы HTML
Вы уже знаете базовый каркас документа. Этот урок приближает строительные блоки внутри страницы: элементы HTML. Каждый заголовок, абзац и большинство других частей страницы — это элементы.
Что такое элемент HTML?
Элемент HTML — полная единица разметки. У большинства элементов, которые охватывают содержимое, три части:
- Открывающий тег — например
<p> - Содержимое — текст или вложенные элементы внутри
- Закрывающий тег — например
</p>
Вместе<p>Привет</p>— один элемент абзаца.
Прямой ответ
Элемент HTML обычно означает открывающий тег, необязательное содержимое и подходящий закрывающий тег. Браузер по этой паре понимает, где элемент начинается и заканчивается. Некоторые пустые элементы не охватывают содержимое и поэтому не имеют отдельного закрывающего тега.
Элемент с открывающим тегом, содержимым и закрывающим
html<p>Это элемент абзаца.</p>
<h1>Это элемент заголовка.</h1>Читаем пример
<p>открывает элемент абзаца- Текст между тегами — содержимое
</p>закрывает абзац- Заголовок работает так же с
<h1>и</h1>
Вложенные элементы
Элементы могут находиться внутри других. Это называется вложением. Внутренний элемент нужно полностью открыть и закрыть до закрытия внешнего.
Вложенные элементы
html<p>В этом абзаце есть <strong>важное</strong> слово.</p>Здесь элемент strong вложен в элемент p. Вложение отмечает смысл внутри более крупных кусков содержимого. Держите дерево чистым: не перекрывайте теги, открывая p, открывая strong, затем закрывая p раньше strong.
Пустые (void) элементы
Некоторые элементы не охватывают содержимое. Их часто называют пустыми или void. Частый пример для новичков — перевод строки:
Пустой элемент br
html<p>Строка один.<br>Строка два.</p>Тег <br> создаёт перевод строки. У него нет отдельного закрывающего тега и внутреннего текста. Позже вы встретите другие пустые элементы, например изображения. Пока запомните: не каждый элемент выглядит как бутерброд «начало–содержимое–конец».
Теги и элементы
Иногда «тег» и «элемент» говорят как синонимы. Тег — разметка в угловых скобках. Элемент — полная единица, которую понимает браузер — часто открывающий тег + содержимое + закрывающий тег. Фраза «элемент p» обычно означает всю единицу абзаца.
Попробуйте сами
- Откройте свой базовый HTML-файл
- Добавьте абзац со вложенным текстом
strong - Добавьте второй абзац с
<br>между двумя короткими строками - Сохраните и обновите браузер
- Убедитесь, что жирный текст и перевод строки отображаются как ожидалось
Частые ошибки
- Забыть закрывающий тег у элементов, которым он нужен
- Перекрывать теги вместо чистого вложения
- Считать, что у каждого тега должны быть содержимое и закрывающий тег (пустые отличаются)
- Неверное имя закрытия, например спаривать
</p>с<h1> - Класть видимое содержимое страницы вне
body
Кратко
- Большинство элементов HTML используют открывающий тег, содержимое и закрывающий тег
- Вложенные элементы нужно закрывать в правильном порядке
- Пустые элементы вроде
brне охватывают содержимое - Тег — маркеры в скобках; элемент — полная единица
- Практикуйте вложение и простой перевод строки на странице
- Атрибуты, которые добавляют тегам доп. сведения, будут в следующем уроке
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху