Ссылка в заголовке h1 - нормально ли это? - Страница 2 - Форум об интернет-маркетинге

webinfo · 19.02.2021, 15:36

Цитата:

Сообщение от Pradox

правильно ли я понимаю, что <header> и <footer>, не относящиеся к основной части документа, стоит оборачивать в <aside>?

Нет, неправильно. Тег <aside> предназначен для сайдбара, а не для хэдера и футера. И то, и другое (и третье) не относится к основному контенту страницы, но хэдер с футером обычно содержат "сквозную" информацию, относящуюся ко всему сайту, а сайдбар зачастую содержит вспомогательную информацию, относящуюся к странице или разделу.

Denaronni · 20.02.2021, 12:00

Цитата:

Сообщение от webinfo

Нет, неправильно. Тег <aside> предназначен для сайдбара, а не для хэдера и футера. И то, и другое (и третье) не относится к основному контенту страницы, но хэдер с футером обычно содержат "сквозную" информацию, относящуюся ко всему сайту, а сайдбар зачастую содержит вспомогательную информацию, относящуюся к странице или разделу.

https://html.spec.whatwg.org/multipa...-aside-element
https://www.w3.org/TR/html52/section...-aside-element

Если кратко, то элемент <aside> предназначен для частей/разделов html документа, которые можно считать отдельным от основного содержимого.

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

Сыграет ли это в плюс на продвижение - хз, но поможет ПСам точнее определять основной контент - это факт.

webinfo · 20.02.2021, 12:33

Цитата:

Сообщение от Denaronni

То есть все что можно физически убрать о страницы без ущерба для качества и полноты основного контента, можно заключать в <aside>. И сайтбар, и хэдер, и футер, и комментарии, и меню, подходят под это определение

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

Код:

<body>
 <header>
  <h1>My wonderful blog</h1>
  <p>My tagline</p>
 </header>
 <aside>
  <!-- this aside contains two sections that are tangentially related
  to the page, namely, links to other blogs, and links to blog posts
  from this blog -->
  <nav>
   <h1>My blogroll</h1>
   <ul>
    <li><a href="https://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
 </aside>
 <aside>
  <!-- this aside is tangentially related to the page also, it
  contains twitter messages from the blog author -->
  <h1>Twitter Feed</h1>
  <blockquote cite="https://twitter.example.net/t31351234">
   I'm on vacation, writing my blog.
  </blockquote>
  <blockquote cite="https://twitter.example.net/t31219752">
   I'm going to go on vacation soon.
  </blockquote>
 </aside>
 <article>
  <!-- this is a blog post -->
  <h1>My last post</h1>
  <p>This is my last post.</p>
  </article>
  <footer>
  <p><a href="/archives">Archives</a> -
   <a href="/about">About me</a> -
   <a href="/copyright">Copyright</a></p>
 </footer>
</body>

Denaronni · 20.02.2021, 12:56

webinfo, ну хз, останусь при своем мнении, ибо

Цитата:

<body>
<header>
<h1>My wonderful blog</h1>
<p>My tagline</p>
</header>

относится к

Цитата:

как блоха, сидящая в шерсти кота, относится к этому самому коту.

webinfo · 20.02.2021, 13:06

Цитата:

Сообщение от Denaronni

как блоха, сидящая в шерсти кота, относится к этому самому коту.

Опять не так. Скорее, как кличка кота ко всему коту. Кот - Марсик. И лапы - Марсика, и хвост - Марсика, и туловище - Марсика.

Denaronni · 20.02.2021, 15:19

Цитата:

Сообщение от webinfo

Кот - Марсик. И лапы - Марсика, и хвост - Марсика, и туловище - Марсика.

Цитата:

<body>
<aside>
<header><h1>Коты Санкт-Петербурга</h1></header>
</aside>

<article>
<header><h1>Кот Марсик</h1></header>
<section>
<header><h1>Лапы кота Марсика</h1></header>
<p>Замечательные лапы Марска с острыми когтями.</p>
</section>

<section>
<header><h1>Хвост кота Марсика.</h1></header>
<p>Превосходный пушистый хвост кота Марсика</p>
</section>

<section>
<header><h1>Туловище кота Марсика.</h1></header>
<p>А вот туловище подвело, Марсик слегка жирноват.</p>
</section>

<footer><p>Опубликовано котом Василичем.</p></footer>

</article>

<aside>
<footer>
<nav>
<h1>Ссылки</h1>
<a href="url">Кот Марсик в Твиттере</a>
<a href="url">Кот Марсик в Инстаграмм</a>
<a href="url">Кот Марсик в Тик-ток</a>
</nav>
</footer>
</aside>
</body>

Элементы aside, article, section, nav задают разделы в структуре страницы, определяющие область действия заголовков h1-h2, хедеров и футеров, и здесь article показывает, где основной контент страницы (кот Марсик), а aside - все остальное (блоха).

ziliboba0213 · 20.02.2021, 22:21

Цитата:

<aside>
<header><h1>Коты Санкт-Петербурга</h1></header>
</aside>

Да ну, по мне так бред... Асайд это асайд, а хедер, артикл и футер - это другое

Хаагенти · 21.02.2021, 07:54

Цитата:

Сообщение от ziliboba0213

Да ну, по мне так бред... Асайд это асайд, а хедер, артикл и футер - это другое

Согласен. aside - это раздел страницы, который не имеет прямого отношения к контенту (содержательному тексту) страницы.
Поэтому нельзя котиков в азайд.

XPraptor · 21.02.2021, 11:28

Так, народ совсем в дебри ушел.

По полкам:
Из правильного:

Цитата:

Сообщение от Denaronni

Элементы aside, article, section, nav задают разделы в структуре страницы

Тег header может быть структурным (стоит в позиции тега, создающего разделы страницы) и ведомым (обозначающим заголовок секции section, статьи article и прочих структурных элементов).
footer, main, aside - всегда структурные теги для парсинга.

В aside обозначены повторяющиеся элементы сайта (всё что угодно).
В aside могут быть секции section (отдельные структурные блоки для парсинга) а могут и не быть. Если секций нет - header не используется.
В section ОБЯЗАТЕЛЕН header этой секции.

В article НЕ ОБЯЗАТЕЛЕН header, но ОЧЕНЬ ЖЕЛАТЕЛЕН.
В footer не используется header.

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

В результате максимально возможная струтура страницы может выглядеть так:

Код:

<!DOCTYPE html>
<html lang="ru">
<head>
<title>title</title>
<meta name="description" content="description">
</head>
<body>
<header>
	<h1>Заголовок струтурный - ШАПКА САЙТА, САМАЯ ВАЖНАЯ ЧАСТЬ СТРАНИЦЫ</h1>
	<nav><a href="/">Навигация самая весомая на сайте</a></nav>
</header>

<main>
	<!--БЛОК ОСНОВНОГО КОНЕТНА СТРАНИЦЫ, ВСЁ ЧТО ОТНОСИТСЯ К КОНТЕНТУ, А НЕ ВСПОМОГАТЕЛЬНЫМ ЭЛЕМЕНТАМ-->
	<article>
		<header><h2>Заголовок статьи, ведомый</h2></header>
		<figure><img src="" alt="img"><figcaption>Подпись под картинкой</figcaption></figure>
		<p>Тектс статьи</p>
		<p>Тектс статьи</p>
	</article>

	<article>
		<header><h3>Заголовок статьи, ведомый</h3></header>
		<figure><img src="" alt="img"><figcaption>Подпись под картинкой</figcaption></figure>
		<p>Тектс статьи</p>
		<p>Тектс статьи</p>
	</article>

</main>

<footer>
	Текст футера
</footer>

<aside>
	
	<section>
		<header><h3>Заголвок секции 1, ведомый</h3></header>
		<nav>
		<ul>
			<li><a href="/">Навигация вспомогательная, не очень весомая</a></li>
		</ul>
		</nav>
	</section>
	
	<section>
		<header><h4>Заголвок секции 2, ведомый</h4></header>
		<p>Текст сайдбара </p>
		<p>Текст сайдбара </p>
	</section>

</aside>

</body>
</html>

webinfo · 22.02.2021, 11:36

Цитата:

Сообщение от Denaronni

<body>
<aside>
<header><h1>Коты Санкт-Петербурга</h1></header>
</aside>

Цитата:

Сообщение от Denaronni

Элементы aside, article, section, nav задают разделы в структуре страницы, определяющие область действия заголовков h1-h2, хедеров и футеров

Жуть. Разработчики стандарта даже примеры привели, чтобы подобной ереси не писали. Потому что подобное - это доведение использования стандарта до абсурда.
Язык разметки документа используется не только и не столько для поисковиков, но и для браузеров и для разработчиков. Чтобы последние писали поменьше комментариев в коде и использовали побольше средств, предоставляемых стандартом. А подобный кусок кода демонстрирует непонимание сути стандарта и выхолащивает эту суть.
Есть определённые области применения тегов. Хэдер и футер - вступительная и заключительная части документа или раздела, aside - вспомогательный контент, nav - навигационные элементы. И использовать эти теги нужно соразмерно семантике, в меру и по месту.
И более того, header не является разделообразующим элементом, он применяется лишь для выделения определённой части раздела. А aside - напротив, элемент разделообразующий. И обрамляя хэдер тегами <aside>, вы ломаете структуру документа, ломаете его разделы. Так, в вышеприведенном коде оказывается, что заголовок h1 имеет вспомогательное значение и не относится напрямую к содержанию страницы. Ересь же однозначно.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Качественная ссылка для Гугла	sanek1991	Гугл и другие поисковики	25	19.01.2021 10:27
Объясните, ziliboba0213 — опытный тролль или про него речь в заголовке?	<!--WEB-->	Курилка	81	29.06.2020 01:11