Семантична верстка на практиці

<header>
	<!-- контент -->
</header>
<main>
	<!-- контент -->
</main>
<footer>
	<!-- контент -->
</footer>

<header>
	<!-- контент -->
</header>
<main>
	<!-- контент -->
</main>
<aside>
	<!-- контент -->
</aside>
<footer>
	<!-- контент -->
</footer>

<!-- або -->

<header>
	<!-- контент -->
</header>
<main>
	<!-- контент -->
	<aside>
		<!-- контент -->
	</aside>
</main>
<footer>
	<!-- контент -->
</footer>

<header>
	<a href=""></а>
	<nav>
		<ul>
			<li>
				<a href=""></а>
			</li>
		</ul>
	</nav>
	<button></button>
	<div></div>
	<!-- та інші -->
</header>
<main>
	<article></article>
	<section></section>
	<aside></aside>
	<div></div>
	<!-- теги виводу контенту, форм -->
	<!-- та інші -->
</main>
<footer>
	<a href=""></а>
	<div></div>
	<ul>
		<li>
			<a href=""></а>
		</li>
	</ul>
	<!-- та інші -->
</footer>

<!-- інший контент -->
<nav>
	<ul>
		<li>
			<a href=""></а>
		</li>											
		<li>
			<a href=""></а>
		</li>											
		<li>
			<a href=""></а>
		</li>											
	</ul>
</nav>
<!-- інший контент -->

<!-- інший контент -->
<div>
	<nav>
		<ul>
			<li>
				<a href=""></а>
			</li>											
			<li>
				<a href=""></а>
			</li>											
			<li>
				<a href=""></а>
			</li>											
		</ul>
	</nav>
	<!-- для відкриття меню (бургер) -->
	<button></button>
</div>
<!-- інший контент -->

<!-- інший контент -->
<section>
	<h1></h1>
	<!-- перелік прев'ю дописів -->
	<!-- пости, коментарі, тощо -->
	<div>
		<article>
			<h4></h4>
			<img src="" alt="">
			<a href=""></а>
			<!-- інший контент -->
		</article>
		<article>
			<h4></h4>
			<img src="" alt="">
			<a href=""></а>
			<!-- інший контент -->
		</article>
	</div>
</section>
<!-- інший контент -->

<!-- інший контент -->
<article>
	<h1></h1>
	<section>
		<h2></h2>
		<p></p>
		<p></p>
		<p></p>
		<!-- інший контент -->
	</section>
	<section>
		<h2></h2>
		<p></p>
		<p></p>
		<p></p>
		<!-- інший контент -->
	</section>
</article>
<!-- інший контент -->

<!-- шапка (заголовок) сайту -->
<header>
	<!-- обмежуючий контейнер -->
	<div>
		<!-- логотип -->
		<img src="" alt="">
		<!-- або текст -->
		<div>
			<!-- основне меню -->
			<nav>
				<ul>
					<li>
						<a href=""></а>
					</li>
					<!-- ... -->
				</ul>
			</nav>
			<div>
				<!-- пошук -->
				<a href=""></а>
				<!-- або -->
				<button></button>
			</div>
			<!-- відкриття меню -->
			<button></button>
		</div>
	</div>
</header>
<!-- основний контент -->
<main>
	<!-- секція -->
	<section>
		<!-- обмежуючий контейнер -->
		<div>
			<!-- заголовок секції -->
			<h1></h1>
			<!-- текст -->
			<p></p>
			<!-- або -->
			<div></div>
		</div>
	</section>
	<section>
		<!-- обмежуючий контейнер -->
		<div>
			<!-- заголовок секції -->
			<h2></h2>
			<!-- групування контенту -->
			<div>
				<!-- групування самостійного контенту -->
				<article>
					<!-- категорія -->
					<a href=""></а>
					<!-- зображення -->
					<a href="">
						<img src="" alt="">
					</а>
					<!-- дата -->
					<time></time>
					<!-- заголовок самостійного контенту -->
					<h4>
						<a href=""></а>
					</h4>
					<!-- текст -->
					<p></p>
					<!-- або -->
					<div></div>
					<!-- інше -->
					<a href=""></а>
					<!-- або -->
					<div></div>
				</article>
				<!-- ... -->
			</div>
			<!-- кнопка -->
			<button></button>
		</div>
	</section>
</main>
<!-- підва (нижня частина сайту) -->
<footer>
	<!-- обмежуючий контейнер -->
	<div>
		<!-- групування контенту -->
		<div>
			<!-- інший контент -->
			<div></div>
			<!-- додаткова навігація -->
			<ul>
				<li>
					<a href=""></а>
				</li>
				<!-- ... -->
			</ul>
		</div>
		<!-- групування контенту -->
		<div>
			<!-- контактна інформація -->
			<address></address>
			<!-- інший контент -->
			<div></div>
		</div>
	</div>
</footer>
<!-- інший контент -->

<!-- шапка (заголовок) сайту -->
<!-- основний контент -->
<main>
	<!-- секція -->
	<section>
		<!-- обмежуючий контейнер -->
		<div>
			<!-- заголовок секції -->
			<h1></h1>
		</div>
	</section>
	<!-- секція -->
	<section>
		<!-- обмежуючий контейнер -->
		<div>
			<!-- бічна панель -->
			<aside>
				<!-- заголовок секції -->
				<h2></h2>
				<!-- навігація -->
				<ul>
					<li>
						<a href=""></а>
					</li>
					<!-- ... -->
				</ul>
			</aside>
			<!-- групування контенту -->
			<div>
				<!-- групування самостійного контенту -->
				<article>
					<!-- зображення -->
					<a href="">
						<img src="" alt="">
					</а>
					<!-- групування контенту -->
					<div>
						<!-- дата -->
						<time></time>
						<!-- заголовок самостійного контенту -->
						<h4>
							<a href=""></а>
						</h4>
						<!-- текст -->
						<p></p>
						<!-- або -->
						<div></div>
						<!-- інше -->
						<a href=""></а>
						<!-- або -->
						<div></div>
					</div>
				</article>
				<!-- ... -->
			</div>
		</div>
	</section>
</main>
<!-- підвал (нижня частина сайту) -->

<!-- шапка (заголовок) сайту -->
<!-- основний контент -->
<main>
	<article>
		<!-- групування контенту -->
		<div>
			<!-- заголовок статті -->
			<h1></h1>
		</div>
		<!-- обмежуючий контейнер -->
		<div>
			<!-- секція -->
			<section>
				<!-- групування контенту -->
				<div>
					<!-- заголовок секції -->
					<h2></h2>
					<!-- контент -->
					<p></p>
					<!-- ... -->
				</div>
				<!-- контент -->
				<img src="" alt="">
			</section>
			<!-- секція -->
			<section>
				<!-- групування контенту -->
				<div>
					<!-- заголовок секції -->
					<h2></h2>
					<!-- контент -->
					<p></p>
					<!-- ... -->
				</div>
				<!-- групування контенту -->
				<div>
					<!-- контент -->
					<img src="" alt="">
					<img src="" alt="">
				</div>
				<!-- групування контенту -->
				<div>
					<!-- контент -->
					<p></p>
					<!-- ... -->
				</div>
			</section>
		</div>
	</article>
</main>
<!-- підвал (нижня частина сайту) -->