html
Основы

Теги разделения контента

HTML
Основы

Обновлено

12.09.2023

Просмотров

513

Время прочтения

25 мин.

Сложность

Большая часть сайтов структурно делится на составляющие — возможно вы уже об этом знаете-, такие как хэдэр, или «шапка» сайта, основная часть, «сайдбар» или боковая панель, а также футер, или «подвал» сайта. Некоторых элементов может быть несколько, например на сайте может быть два сайдбара, два футера или два хэдэра. И даже больше, чем два.

В хэдэре, как правило, располагается логотип компании, навигационное меню, номер телефона, адрес, какое-нибудь привлекательное маркетинговое предложение и т.п. На скриншотах мы рассматриваем уже упомянутый хостингер beget, сиреневым прямоугольником выделен header.

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

Сайдбар может нести дополнительную информацию к странице, либо служить для удобной навигации по разделам. Например, если вы посетили большой информационный портал со множеством статей. Хотя на главной странице beget нет сайдбара, он есть в панели управления пользователя и содержит подробную информацию, связанную с аккаунтом:

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

Конечно, структура сайта может быть любой, какой пожелает владелец, но вышеописанная встречается чаще всего, так что мы можем назвать её «классической». Если схематично изобразить сайт с такой структурой, он может выглядеть следующим образом:

И иметь разметку:

                
<header></header> <main></main> <aside></aside> <footer></footer>

Конечно, это базовый пример, и наверняка там будет что-то ещё, но думаю смысл подобного разделения вам понятен. Обратите внимание, что, хотя в разметке сайдбар в виде тега <aside> находится вслед за основным контентом <main>, визуально он может располагаться справа или слева от него. Это достигается при помощи CSS.

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

В прежние суровые времена разработчики сайтов использовали табличные теги для создания необходимой структуры сайта. Это была так называемая «табличная вёрстка», и это было довольно скверно, потому что все сайты состояли из огромного количества таблиц, строк и ячеек, вложенных друг в друга. Они не адаптировались под размеры экранов и выглядели, мягко говоря, примитивно. Те времена, к счастью, прошли, и теперь мы используем «блочную вёрстку», принципы которой заключаются в создании блоков-контейнеров и расположении их в нужных нам местах, задании им ширины и высоты, отступов и т.д. Эта модель вёрстки сайтов уже довольно прогрессивна и пока что способна удовлетворять любые нужды разработчиков. Однако те инструменты и теги, что мы имеем сейчас, мы получили не тут же в одно мгновение с появлением «блочной вёрстки». Поначалу разработчики получили в HTML тег <div> в качестве основного строительного контейнера. При помощи него создавались и хэдэр, и футер, и все прочие необходимые блоки и контейнеры. Создатели HTML осознали вскоре, что это не идеально, и в пятой версии языка добавили множество тегов для определения структуры: <article>,<aside>,<footer>,<header>,<main>,<nav>,<section>. Эти теги, а также <div> и <address>, появившиеся ранее, служат для структурного разделения контента на странице, и больше ни для чего. Они не обрабатываются каким-либо особенным образом браузером и не индексируются поисковыми роботами. Они нужны для чистоты кода, чтобы в хэдэр лежал в <header>, футер в <footer> и т.д.
Всё это называется семантикой — использование элемента для тех целей, для которых он был создан.

Эти теги могут иметь только глобальные атрибуты.

<div>
— (с англ. division — раздел, разделение) «див» это основной строительный контейнер. Он таковым был изначально и таким же остался после добавления структурных тегов. Все контейнеры, которые не могут быть определены одним из вышеперечисленных тегов, определяются дивом.

На скриншоте ниже сайт банка ВТБ и карточка продукта-вклада:

Эта карточка — тег <div>. Внутри него находятся картинка <img>, заголовок <h3> и кнопка <button>. Но об этих тегах мы говорить сейчас не будем. Ваша задача — понять, что почти все контейнеры, оболочки, обёртки верстаются дивами, и это совершенно нормально. Ниже один из вариантов кода подобной карточки:

                
<div class="product-card"> <img src="./ruble.jpg" alt="" class="product-card__thumbnail"> <p class="product-card__heading">Вклад в рублях <span class="theme-blue-color">до 18,27%</span></p> <button class="product-card__details-btn">Подробнее</button> </div>

<address>
— (с англ. address — адрес) является контейнером, содержащим контактную информацию организации, человека и пр. К контактной информации может относиться адрес электронной почты, телефон, физический и юридический адреса, ссылки на социальные сети и мессенджеры, географические координаты. Довольно часто этот тег находится внутри футера.

                
<address> Персональный сайт автора <a href="https://website.com"> здесь</a>.<br> Если вы хотите оставить отзыв о работе, напишите мне <a href="mailto:webmaster@website.com"> сюда</a>.<br> В крайних случаях звоните <a href="tel:+79999019019">по этому номеру</a>.<br> Ждём вас всегда по адресу:<br> Москва, Пресненская Набережная,<br> д8. с.1 Ап. 254 </address>

<article>
— (с англ. article — статья) тег предназначен для размещения внутри него тематического текстового содержимого в виде новости, статьи, заметки, обзора и пр. Подразумевается, что эта статья (или несколько статей) размещается внутри документа, веб страницы, приложения и является его составной частью, но не всем документом. В примере ниже в теге <main> есть карточка текущего пользователя, а ниже находится <article> с просматриваемой статьёй:

                
<main class="main"> <div class="account-card"> <img src="./users/avatar.jpg" class="account-card__avatar" alt=""> <p class="account-card__descr"> Какая-то информация о пользователе</p> </div> <article class="article"> <h1 class="article__header">Страшно важная новость.</h1> <p class="article__paragraph"> Абзац, описывающий произошедшие события. </p> <time class="article__published-at" datetime="2022-02-17 19:00">17 февраля</time> <address> Автор статьи: Иван Иванович<br> Адрес автора: г. Санкт-Петербург, Лиговский проспект, д. 10 </address> </article> </main>

<time> и <address>, находящиеся в теле тега, связываются соответственно с текстовым содержимым и индексируются совместно с ним. <time> например как дата публикации или обновления, а <address> как контакты автора статьи. Однако стоит учесть, что это всего лишь пример, но вовсе не рекомендация и тем более не правило.

Несколько тегов <article> могут быть вложены друг в друга. В таком случае внутренний должен быть логически связан с внешним элементом. Например, комментарии к статье также могут быть элементами <article>. Пример кода с MDN:

                
<article class="forecast"> <h1>Weather forecast for Seattle</h1> <article class="day-forecast"> <h2>03 March 2018</h2> <p>Rain.</p> </article> <article class="day-forecast"> <h2>04 March 2018</h2> <p>Periods of rain.</p> </article> <article class="day-forecast"> <h2>05 March 2018</h2> <p>Heavy rain.</p> </article> </article>

<aside>
— (с англ. aside — в стороне, отдельно) тег, предназначенный для определения сайдбара. О нём добавлять к вышесказанному более нечего. Пример простой разметки вы уже видели выше. Стоит лишь напомнить, что положение сайдбара «сбоку» задаётся при помощи CSS, а в разметке HTML он может находиться в различных местах.

<footer>
— (с англ. footer — нижний колонтитул) как уже было сказано, этот тег является контейнером для всего содержимого, которое вы хотите разместить в подвале сайта. Этого содержимого может быть очень много — различная информация, меню, кнопки, ссылки на соцсети, на правила сайта, политику конфиденциальности и т.д, а может быть очень мало — небольшой текст копирайта © и год создания сайта. Каждый заказчик решает сам, а дизайнер претворяет его желания в жизнь.

<header>
— (с англ. header — заголовок, верхний колонтитул) также по ходу урока мы рассказали и про хэдэр — роль его огромна и чрезвычайно важна, почти всегда это первое, на что обращает внимание пользователь. Удобство и внешний вид хэдэра зачастую определяют, будет ли пользователь продолжать пользоваться сайтом, или покинет его через несколько секунд. Также в хэдэре в подавляющем большинстве случаев помещается навигация\меню сайта, от которых зависит, найдёт ли пользователь то, что ищет, совершит ли покупку или оформит ли подписку на наш сайт. Хотя продумывание и придумывание дизайна сайта это не обязанность разработчика, мы всегда должны обращать внимание на внешний вид и удобство хэдэра, да и вообще всех интерфейсов на сайте.

<main>
— (с англ. main — главный, основной) контейнер для основного содержимого документа. Довольно часто им оборачивается вообще всё на веб странице, или почти всё. Как и для многих других тегов, нет строго определённых правил для его использования. Однако с учётом того, что скринридеры и браузеры в режиме для чтения определяют главную роль контенту внутри <main>, имеет смысл помещать туда основную информацию, предназначенную для пользователя. На данном этапе обучения мы бы не советовали глубоко погружаться в вопросы правильного применения <main>, потому что единственно правильного применения здесь нет. Запомните базовую рабочую схему, которая уж точно не подведёт: в хэдэр помещаем всё, что уже перечисляли ранее, в <main> основное содержимое страницы, какое мы точно хотим донести до всех пользователей, в сайдбар помещаем вспомогательную навигацию и информацию, в футер — то, что уже описывали — контакты, доп. меню и т.п.

Также стоит сказать, что обычной практикой является определение для <main> классов-флагов, о которых мы мельком уже упоминали. Мы говорили, что такие классы могут быть у <html> и <body>. Так вот, определение таких классов для <main> это тоже нормально.

<nav>
— (с англ. navigation — навигация) блок-контейнер для размещения навигационного меню. Наиболее популярная разметка для создания меню выглядит следующим образом, запомните её:

                
<nav class="menu"> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О компании</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Контакты</a></li> </ul> </nav>

Вместо <nav> также может использоваться <div>, вместо неупорядоченного списка <ul> может использоваться упорядоченный список <ol>. Тег <li> — пункт списка, в данном случае это обычный контейнер для ссылки <a>. Не особенно важно, какие будут теги — меню будет выглядеть почти всегда очень похоже на это, а внешний вид тегов всё равно переопределяется при помощи CSS. На странице сайта может быть не одно и даже не два меню, а вполне спокойно три-четыре. Например, основное и вспомогательное в хэдэре, а также их дубликаты в футере.

<section>
— (с англ. section — секция, раздел) общий элемент для создания конкретных, тематически отличных друг от друга разделов сайта. Например, если на вашем сайте есть приветственная секция, представляющая вашу компанию пользователю, её можно выделить в отдельную <section>. Следующий блок на сайте может рассказывать о преимуществах работы именно с вами, так что всё это содержимое можно также выделить в <section>, и т.д.

Если рассматривать в качестве примера beget, то главную страницу мы могли бы поделить на секции:

Первая секция была бы вступительной, она представляет самые выгодные маркетинговые предложения по основным услугам, а также функционал моментального выбора домена. Вторая секция, как бывает довольно часто, рассказывает о преимуществах хостинга beget перед другими.

Напомним, что нет строгих правил в использовании тега <section>. Почти всё, что сказано на его счёт — это рекомендации.

В заключении данного урока хочется сказать, что все упомянутые теги вы должны использовать, если у вас есть подходящее для них место. Не следует использовать только «дивы», или злоупотреблять <section>,<article> и пр. Пробуйте, читайте документацию, смотрите примеры кода. Ваша задача на ближайшие несколько лет — постоянно практиковаться и учиться. Только так вы сможете выработать навык и развить его до профессионализма.

Необходимо очков: