Уже вчера вы уверено добавляли новые HTML-теги и наполняли их контентом.
Сегодня познакомимся со списками и формами - это тоже теги, со своим поведением и встроенными стилями. И они не менее востребованы чем заголовки или параграфы!
Но сначала чуть подробнее разберем вложенность тегов друг в друга
Один тег – это один элемент страницы. Иногда нам нужно размещать их рядом, например, друг за другом, а иногда нужно размещать один тег внутри другого
Это базовый прием построения html страницы который вы уже попробовали на практике. Вчера вы писали текст “внутри” тега body. Так же в него можно и нужно вкладывать не только текст, но и другие теги, а в них ещё теги и еще теги - таким образом сформируется разметка страницы. Вся html страница состоит из тегов, или размещенных рядом друг с другом, или вложенных друг в друга.
Существует подход к созданию веб страницы, основанный на использовании смыслового предназначения html тегов. Такой подход называется “семантической вёрсткой”, она также предполагает собой логичную и последовательную иерархию страницы. Вот несколько примеров размещения элементов со вложенностью и без нее. Пока просто посмотрите и постарайтесь понять эту разметку
Размещение блоков друг под другом
<body>
<div>
Я верхний блок
</div>
<div>
Я нижний блок
</div>
</body>
Размещение блоков друг в друге
<body>
<div>
Я верхний блок
<div>
Я блок внутри другого
</div>
</div>
<div>
Я нижний блок
</div>
</body>
Строка внутри блока
<body>
<div>
Я верхний блок
<div>
Я блок внутри другого блока
<span class="string">
А я строка внутри блока
</span>
</div>
</div>
<div>
Я нижний блок
</div>
</body>
