Насколько верна следующая структура HTML?

Question

[ldmitriy]

<div id="wrapper">
	<header>
		<img src="logo.png" alt="logo">
		<form action="search.php">
			<input type="search" name="search">
			<button>Поиск</button>
		</form>
	</header>
	<main>
		<section>
			<h1>Мои увлечения</h1>
			<section>
				<h1>Лыжи</h1>
				<p>...</p>
			</section>
				<section>
				<h1>Плаванье</h1>
				<p>...</p>
			</section>
		</section>
	</main>
	<footer>Copyright</footer>
</div>

1) Могу ли я информацию Мои увлечения использовать в разделе section а сами увлечения использовать в подразделе т.е еще в одном section?
2) Можно ли к примеру в статье, тег article вклюить в него тег aside, в котором будет небольшая врезка, или aside нужно выносить за пределы основного контента?

Comments

[Алексей Уколов]

Несколько h1 на странице нельзя использовать. Это предлагали внедрить, но в итоге отказались. Такая разметка не поддерживается экранными читалками.

[sergey]

Зачем вкладывать section в section, это неправильно, несемантично и вообще черт знает что

Answer 1

[Islam Ibakaev]

как насчёт этого?

<section class="hobbies">
	<header class="hobbies__header">Мои увлечения</header>
	<ul class="hobbies__list">
		<li>
			<h3 class="hobbies__item">Лыжи</h3>
			<p class="hobbies__item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus quia ab eveniet harum cumque placeat, beatae voluptas nobis ipsam debitis.</p>
		</li>
		<li>
			<h3 class="hobbies__item">Плаванье</h3>
			<p class="hobbies__item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis totam eaque recusandae corporis ratione nostrum cumque facere quaerat fugit fugiat.</p>
		</li>
	</ul>
</section>

Comments

[HelpSophie]

Жесть какая

[Islam Ibakaev]

HelpSophie: почему?

Answer 2

[Дмитрий Лузанов]

Не профи, но сделал бы так

Answer 3

[Ankhena]

1. "оберточный" section лишний

<main>
    <section> <!--Зачем этот section? Если он на весь main?-->
      <h1>Мои увлечения</h1>
      <section>
        <h1>Лыжи</h1>
        <p>...</p>
      </section>
        <section>
        <h1>Плаванье</h1>
        <p>...</p>
      </section>
    </section>
  </main>

2. h1 на странице 1 раз. Для подзаголовков есть теги h2-h6.

3.

<section>
        <h1>Лыжи</h1>
        <p>...</p>
      </section>

Больше похоже на article, чем на section

Answer 4

[Игорь]

Я не профи, но секцию в секцию никогда не влаживал. Секция - отдельный и независимый кусок кода. Например на сайте есть раздел "О нас" или "Портфолио" это отдельные секции.

Answer 5

[stioann]

Вот очень досконально и, как по мне, более правильно к семантике применения -- front-end.su/2015/11/01/div-or-section-or-article