Войти
Регистрация

Правила блочной верстки в HTML

Правила блочной верстки в HTML

Здравствуйте, дорогие друзья!

В этой статье я хочу рассказать про правила верстки сайта.

Если на протяжении многих лет сайты верстались по стандарту HTML, то сейчас уже во всю используют стандарт HTML5, который внес некоторые дополнения.

HTML5 предлагает нам несколько секционных элементов при верстке сайта, чтобы можно было весь код сайта разделить по смыслу.

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

Если помните, в прошлой статье блочные элементы HTML и их выравнивание я рассказал про блочный элемент <div>, который раньше использовался для верстки всех секций сайта. Сейчас эти секции принято разграничивать следующими тегами:

Тег <main>
Внутри этого парного тега необходимо размещать главную мысль сайта, главную информацию, которая не должна повторяться на других страницах сайта. Если Вы загляните на главную страницу моего сайта, то увидитите приветственный текст на оранжевом фоне. Он как-раз таки уникален и расположен в теге <main>
Тег <header>
Элемент header используется для выделения шапки сайта с ее главной информацией: логотип, меню, форма поиска по сайту, контакты в шапке. На моем сайте в этом теге расположен логотип и меню сайта. Например:
<header>
  <img src="logo.jpg" alt="Логотип сайта"/>
  <ul>
    <li><a href="index">Пункт меню 1</a></li>
    <li><a href="contacts">Пункт меню 2</a></li>
    <li><a href="services">Пункт меню 3</a></li>
  </ul>
  <h1>Заголовок сайта</h1>
</header>
Тег <nav>
Этот парный тег используется для выделения навигации по сайту, меню сайта. Если у Вас есть группа ссылок в виде меню, то помещайте их внутрь этого тега. На моем сайте верхнее и левое меню внутри этого тега. Тот же пример:
<header>
  <img src="logo.jpg" alt="Логотип сайта"/>
  <nav>
    <ul>
      <li><a href="index">Пункт меню 1</a></li>
      <li><a href="contacts">Пункт меню 2</a></li>
      <li><a href="services">Пункт меню 3</a></li>
    </ul>
  </nav>
  <h1>Заголовок сайта</h1>
</header>
Тег <article>
Элемент article выделяет содержимое сайта, которое не зависит от остального содержимого сайта. Содержимое этого тега можно разместить отдельно от общего текста на сайте и он смысл свой не потеряет, т.е. не зависит от общего контекста. Например, на моем сайте блок со статьями находится в этом теге.
Тег <section>
Этот тег объядиняет группу элементов на сайте, связанных общей темой. Например, статьи сайта. Допустим, можно этим тегом объединить группу статей в тег <article>, указать заголовок группы и каждую статью уже разместить внутри тега <section>. Если у Вас на сайте есть блок с темой, которая разделена на несколько частей, то каждую часть помещайте в этот тег.
<article>
  <h1>Новости сайта</h1>
    <section>
      <p>Первая новость</p>
    </section>
    <section>
      <p>Вторая новость</p>
    </section>
    <section>
      <p>Третья новость</p>
    </section>
</article>
Тег <aside>
Данный элемент предназначен для размещения косвенного содержимого сайта, которое не совсем относитсся к общей теме, но имеет место быть: боковые панели с новостями, файлами, баннерами, виджеты соц.групп и другие элементы, которые отделены от основного содержимого.
Тег <footer>
Элемент fotter предназначен для размещения в подвале сайта, в нижней части сайта и содержит в себе информацию об авторских правах, контакты автора, возможно ссылки навигации по сайту. На моем сайте подвал помещен внутри этого тега.
<footer>
<p>Сайт о том, как создать свой первый сайт с нуля с помощью HTML и CSS.</p>
<p>Автор Самвел Погосов. © Все права защищены.</p>
</footer>
Тег <address>
Данный тег предназначен для размещения в нем контактной информации автора сайта, либо автора статьи с его контактами: email, адрес сайта, телефон. Поисковые системы используют информацию в этом теге для сбора контактов автора сайта или автора статьи при индексации.

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

На этом мы закончим изучение темы "Основы HTML". Самые основные моменты мы с Вами изучили. Далее приступим к изучению интересной темы CSS, которая не менее важна и без которой создание сайта на HTML не имеет никакого смысла.

Также, я рекомендую Вам пройти небольшой тест для закрепления полученных знаний: Пройти тест

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?