Элементы и теги в HTML

На странице 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 .

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *