Сегодня рассмотрим такую важную тему, как блочная верстка. Ее суть заключается в разбиении веб-страницы на блоки с информацией. Это делается для удобства разработки и ознакомления с контентом.
В самом начале сайта рекомендуется разместить тэг <header>. В нем будет вся шапка вашего сайта с дескрипшоном и прочими фичами. Далее следуют секции (тэги <section>). Если ваш сайт одностраничный, рекомендуется делать навигацию по секциям в шапке. Об этом в следующей статье. Тэги <section> в свою очередь разделяются на блоки <div>, а те - на блоки <span>. Также отличной альтернативой разбиения контента будут <p> и <article>. Они могу служить в качестве абзацев и отдельных статей.
Для сторонней информации и сносок подойдет тэг <aside>. Он размещается по правую сторону от контента.
Для навигационного меню подойдет тэг <nav>. Туда лучше размещать меню многостраничного сайта. Кстати, непонятно, будет ли дальше поддерживаться в стандарте <menu> и <menuitem>. Так тоже неплохая вариация в <nav>.
Для оформления всяких контактов и обратных связей можно использовать <footer>. Не забывайте закрывать все тэги и используйте разные стили.
Такая логическая разметка поможет и пользователю сайта, и вам облегчит редактирование. Основы грамотности кода, так сказать.