Теги разделения контента
Обновлено
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> и пр. Пробуйте, читайте документацию, смотрите примеры кода. Ваша задача на ближайшие несколько лет — постоянно практиковаться и учиться. Только так вы сможете выработать навык и развить его до профессионализма.
Тест к уроку
Теги разделения контента
20
Основные теги, предназначенные для разделения сайта на компоненты - шапка,подвал сайта и пр.