На странице HTML все элементы обозначены тегами. Это маркеры, которые подчеркивают не столько внешний вид, сколько смысл, роль или организацию, которую мы хотим присвоить содержимому. Например, если мы указываем заголовок <h1>для нас, слова в этом заголовке представляют основную тему страницы, помимо того, как они будут отображаться.
- Такое «семантическое» представление об элементах является основополагающим, оно помогает нам не упускать из виду тот факт, что страница должна быть упорядоченным местом для информации, особенно в Интернете. Если мы подумаем, например, о классическом контексте онлайн-исследования, то естественно понять, чем больше страница может быть связана с ключевым словом или темой, тем легче будет ее найти. По этой причине будет важно позаботиться о таких вещах, как организация текста, определение заголовка, жирные ссылки.
- Однако в HTML мы также можем определить каркас пользовательского интерфейса приложения, и на этом этапе теги становятся полезными в качестве поддержки организации макета или определения конкретных областей для пользовательского опыта.
В обоих случаях мы продолжаем говорить не о «графике», а о структуре.
Как сделать тег
Тег — это ключевое слово языка, заключенное в угловые скобки ( <>). Примеры тегов <html>, <body> и <h1> которые мы уже встречали в предыдущих уроках.
HTML-теги не чувствительны к регистру, что означает, что запись <head> или <HEAD>одинаковы. В любом случае, обычай состоит в том, чтобы писать теги в нижнем регистре (это была рекомендация в HTML4 и запрос в XHTML).
Контейнеры и автономные элементы
Многие элементы в HTML служат для описания частей страницы, областей или содержимого. Например, <body>описывает содержание всей страницы, <h1>содержит заголовок и <p>обозначает абзац в тексте.
Поэтому элемент HTML почти всегда является контейнером, а его содержимое ограничено:
- открывающий тег (напр.
<p>); - закрывающий тег (напр.
</p>).
<p>Пример открывающего и закрывающего элемента</p>
Поэтому HTML-страницы формируются путем компоновки контейнеров (вложенных) друг в друга. Чтобы лучше понять, давайте возьмем наш простой пример:
<!doctype html> <html lang="ru"> <head><title>Привет мир!</title></head> <body> <h1>Привет мир!</h1> <p>эта наша первая страница на HTML!</p> <img src="image.jpg"> </body> </html>
Возникает структура дерева , в которой все ветви представляют собой теги-контейнеры, а концы состоят из текстов, изображений или других элементов, таких как поля ввода. Все эти конечные элементы не являются контейнерами и не нуждаются в закрывающем теге.
html | +---head | | | +---title | | | +---"Привет мир!" | +---body | +---h1 | +---"Привет мир!" | p | +---"эта наша первая страница на HTML!" | img
Прослеженное нами дерево запоминает способ представления документа в памяти браузера или DOM (объектную модель документа), модель документа HTML, элементом которого <html>является корневой узел.
Сделайте отступ кода
Часто, чтобы подчеркнуть вложение одного элемента в другой, используется «отступ кода», то есть для выделения содержимого из начала строки, оставляя пробелы (или символы табуляции). На практике открытие и закрытие тега находятся на одном уровне, а содержимое перемещается справа от вкладки.
Встроенные и блочные элементы, типы тегов для макета
HTML-теги могут представлять объекты (например, изображения) или служить для разделения страницы на области (например, «div» или «section»). Существуют различные типы тегов, и знание их становится критически важным для использования правильного тега в нужном месте и последующего применения правил CSS.
Основными типами визуализации, на которые делятся элементы, являются:
| тип | описание |
|---|---|
| Block (блочные элементы) | Элементы, которые составляют блок вокруг себя. Они не являются частью текста и, следовательно, отправляются в голову, как абзацы div или раздел. Обычно это элементы контейнера в дереве, которое мы проследили вверху. |
| Inline (элементы «in line») | Элементы, которые не переносятся и могут быть интегрированы в текст, такие как ссылки, изображения или span. |
| Liste | Нумерованные или ненумерованные списки. Они похожи на блочные элементы с определенной структурой, идеально подходят для определения списков или меню |
Существуют и другие очень интересные способы отображения элементов благодаря правилу отображения CSS, например режим flexbox .