(2 голос, рейтинг: 4,00 из 5)
Основные термины и понятия в HTML разметке:
- <Article>, <nav>, <header>, <footer> — HTML теги, которые используются для разделения информации на блоки.
- Футер — нижняя часть веб-страницы. Содержит в себе контактную информацию.
- Шапка — верхняя часть страницы. Содержит в себе логотип, а также навигационную панель.
В этой статье мы поговорим с вами о том, как создать каркас страницы, а также о том, в каких блоках располагать те или иные элементы.
Блочная верстка стала довольно популярной и используется практически везде. Раньше, в HTML 4, блочные конструкции создавались с помощью блоков div. Если открыть любой сайт 2012-2014 года, а затем открыть его исходный код, то вы увидите длинный и сложный код нагроможденный блоками <div>.
Такая конструкция не была плохой для пользователя, так как на отображение это никак не влияло. Проблемы были у разработчиков и у технической поддержки сайта.
Основная проблема — большое количество блоков <div>, их могло быть и до 50,100 и даже 200. Такое нагромождение могло вызвать путаницу в коде — многие разработчики очень часто путались в своем коде. Это делало разработку медленной.
HTML 5 изменил эту проблему, добавив несколько семантических блоков. Каждый блок был настроен под определенную информацию, как "nav" для навигационной панели, или "footer" для подвала.
Кроме этого, новая версия HTML уделила большое внимание семантическому ядру сайта. Поисковики имели лучшее понимание информации, которая расположена в определенном блоке.
Семантические элементы. HTML 5
Перед тем как говорить о разметке веб-страницы, давайте рассмотрим основные теги-контейнеры:
- <Header> — необязательный тег, который может использоваться для навигации, главного заголовка, либо же для размещения отдельного блока с информацией.
- <Nav> — контейнер для навигации страницы или сайта. Может находиться в теге header, но это необязательно. На странице может присутствовать несколько блоков <nav>.
- <Article> — блок статьи. Используется для размещения статей для сайта или блога, каких-либо публикаций или комментариев. Хорошо подходит для дублирования веб-страницы, так как содержимое очень легко изменяется.
- <Section> — разделяющий блок. Его основной функцией не является оборачивание информации в определенный блок. Чаще всего используется для разделения сайта на разделы и группирует их.
- <Aside> — блок для дополнительной информации. Чаще всего содержит в себе блок nav, при создании боковой панели. Располагается сбоку, может содержать блоки с рекламой, различными датами и ссылками.
- <Footer> — подвал сайта — блок-колонтитул. Обычно содержит в себе информацию об авторе статьи, сведения об авторском праве и контактную информацию. Располагается внизу, под всеми остальными блоками.
Существует ещё 7 HTML5 тегов, которые можно использовать для создания различных блоков. Они используются реже, поэтому мы не будем их рассматривать.
Разметка страницы
Когда мы познакомились с основными тегами-контейнерами, давайте приступим к созданию простого HTML каркаса. Откройте ваш HTML документ и запишите туда все стандартные теги, по типу <html>, <head>, <body> и <meta>.
Создание нашего макета будет проходить в 3 этапа:
Для начала необходимо создать шапку для нашей страницы.
Создаем тег <header>, а в нем располагаем заголовок(будет использоваться вместо логотипа) и список с пунктами меню.
Создадим главный блок страницы. Это будет тег-контейнер <section>, в котором будет располагаться список преимуществ товара и кнопка перелистывания.
Далее приступаем к созданию основных блоков. Для них будем использовать теги <section>. Первый блок обернем в тег <article>, так как в нем будет располагаться публикация с информацией о продукте.
Второй блок будет содержать в себе прайс-лист и кнопку. Внутри создаем 3 блока <div>, в которых создаем списки с информацией. Ниже располагаем кнопку.
Далее идет создание футера страницы
Теперь расположим подвал страницы, в котором будет находиться контактная информация и кнопки социальных сетей.
Создаем тег <footer> и записываем основную контактную информацию. Кроме контактов, нам необходимо разместить информацию о копирайте.
Заключение
У нас получилась простая HTML страница из нескольких блоков, которая не имеет особой привлекательности, пока что. В следующих статьях мы сделаем стилизацию всех этих блоков.
Если хотите, можете самостоятельно исследовать HTML-документ. Можете добавить туда какие-либо блоки или заменить информацию, по вашему усмотрению. Главное, не меняйте общую структуру документа, он нам ещё понадобится.
А если у вас возникли трудности с размещением элементов или записью HTML кода, то можете скачать наши исходники. Удачи в изучении!