Начало работы с HTML 5 - Теги⁠⁠

Взглянем ближе на HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, tempora!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, tempora!</p>

Что означает конструкция <p> ?

В языке HTML Такая конструкция называется тег. Ранее мы уже видели несколько тегов <section>, <h1>. Теги оборачивают наш контент и в итоге обрабатываются браузерами.

<div>
<h1>Some title</h1>
</div>

Все рассмотренные нами теги являются парными, так как имеют открывающую и закрывающую часть. В примере выше мы можем видим <h1>Some title</h1>.

<h1> — является открывающей частью тега.

</h1> — является закрывающей частью тега.

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

<hr>  <!-- Вариант 1 -->
<hr />  <!-- Вариант 2 -->
<br>  <!-- Вариант 1 -->
<br />  <!-- Вариант 2 -->

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

<section>
<h2>Some another title</h2>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab
excepturi incidunt maxime odio sint? Commodi cupiditate modi nesciunt
pariatur tempore?
</p>
</section>

Ключевой особенностью тегов является то что мы можем вкладывать их друг в друга, это хорошо видно из примера выше. Таким образом мы можем выстраивать более сложные композиции тегов и создавать более сложные системы.

<ul>
<li>Lorem ipsum.</li>
<li>At, maxime!</li>
<li>Dolores, recusandae.</li>
</ul>

В некоторых случаях вложенность является обязательной частью разметки текста. В примере выше, браузер не сможет интерпретировать теги <li> и их внутренний контент правильным образом, если теги <li> не будут вложены внутрь тега <ul>.