Сразу скажу, что html не является языком программирования, он предназначен для разметки страниц сайта. С помощью html мы размечаем всё что будет находиться на странице — текст, таблицы, картинки и т.д. За разметку расположения на странице всех элементов отвечают специальные метки, которые называются тегами.
Страница состоит из двух основных раздела — это верх сайта, или по другому его называют шапкой сайта, и тела страницы, где располагается текст, картинки и другие элементы. Рассмотрим код:
| 1 2 3 4 5 6 7 8 9 | <html> <head> <title>Имя страницы</title> </head> <body>Текст </body> </html> |
Всё, что располагается в фигурных скобках <> называется тегами. Рассмотрим каждый из них.
Семантические элементы html 5
Перед тем как говорить о разметке веб-страницы, рассмотрим основные теги-контейнеры:
- <header> — необязательный тег, который может использоваться для навигации, главного заголовка, либо же для размещения отдельного блока с информацией.
- <nav> — контейнер для навигации страницы или сайта. Может находиться в теге header, но это необязательно. На странице может присутствовать несколько блоков <nav>.
- <article> — блок статьи. Используется для размещения статей для сайта или блога, каких-либо публикаций или комментариев. Хорошо подходит для дублирования веб-страницы, так как содержимое очень легко изменяется.
- <section> — разделяющий блок. Его основной функцией не является оборачивание информации в определенный блок. Чаще всего используется для разделения сайта на разделы и группирует их.
- <aside> — блок для дополнительной информации. Чаще всего содержит в себе блок nav, при создании боковой панели. Располагается сбоку, может содержать блоки с рекламой, различными датами и ссылками.
- <footer> — подвал сайта — блок-колонтитул. Обычно содержит в себе информацию об авторе статьи, сведения об авторском праве и контактную информацию. Располагается внизу, под всеми остальными блоками.
Существует ещё 7 HTML5 тегов, которые можно использовать для создания различных блоков. Они используются реже, поэтому мы не будем их рассматривать.
Теги <html></html> означают, что это документ html. Тег <html> открывает документ и после наполнения документа информацией он обязательно должен закрываться закрывающим тегом </html>
Внутри html-документа располагаются две части страницы:
- <head></head> — это верхняя часть документа, в которой в основном располагается служебная информация
- <body></body> — между этими тегами располагается непосредственное содержание документа — вставляете текст картинки и т.д.
В верхней части документа есть еще один обязательный тег — <title>. Этот тег выводит название страницы в браузере, смотрите на рисунке:
Это основные теги разметки страниц. Между ними может располагаться еще множество тегов, которые будут отвечать за расположение элементов страниц.
Все открывающие теги обязательно закрываются закрывающимися. Хотя есть теги, которые закрывать не надо, такие как <br> -перенос строки, <hr> — разделительная полоса, <input type=»…»> — поле ввода, <img src=»…»> — изображение и др.
Разметка страницы
Теперь рассмотрим простой HTML каркаса. Создание макета будет проходить в три этапа:
- Создание шапки.
- Создание основных блоков.
- Создание футера.
Для начала необходимо создать шапку для страницы. Создается тег <header> (хедер, шапка), в нем будет расположен заголовок и список с пунктами меню.
Следующим создается главный блок страницы. Это будет тег-контейнер <body>, а в нем, в контейнерах <section>, расположится основная информация.
Далее идет footer (футер, подвал) страницы, в котором может находиться контактная информация и кнопки социальных сетей.
Создаем тег <footer> и записываем основную контактную информацию. Кроме контактов, там можно разместить информацию о копирайте.
Как примерно это будет выглядеть:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <title>...</title> </head> <body> <header> <nav> </nav> </header> <main> <section> <h1></h1> Основная часть </section> </main> <footer> </footer> </body> </html> |
Если предполагается наличие сайдбара, то разметка html немного меняется:
- header — шапка (страницы или блока).
- main — основные блоки, главное содержимое страницы.
- aside — боковая колонка, дополнительный контент не входящий в main.
- footer — подвал (страницы или блока).
Меняется и код html страницы:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <title>...</title> </head> <body> <header> <nav> </nav> </header> <main> <section> <h1> </h1> Основная часть </section> </main> <aside> Боковая колонка (сайдбар) </aside> <footer> </footer> </body> </html> |
Как правильно выбрать тег
Это несложно, если знать простые правила:
Для раздела внутри main нужен тег section.
Для поста в блоге, статьи или комментария используется article.
Для обозначения заголовков применяются теги h1-h6 соответствующего уровня.
Если сайт создан на CMS, то с h1 могут быть нюансы в зависимости от движка. Например, в качестве h1 на всех страницах может прописываться название сайта, в этом случае для названия страниц будет применяться h2. Подход не совсем верный, так как h2 будет использоваться и в имени, и в иерархии.
Идеальный вариант - когда h1 с названием сайта выводится только на главной, а на остальных страницах в h1 прописываются названия страниц.
Для навигации или меню пишется тег nav. Внутри могут находиться просто ссылки либо ссылки внутри списка — зависит от макета.
Несколько однотипных элементов группируются с помощью ul или ol.
Для оформления кнопок используется тег button.
Для изображений нужен img, желательно указывать описательный текст в alt=»».
Для абзацев в тексте используется p.
Если ничего не подошло, смело используйте div или span. Первый, div — это блочный элемент, который может содержать в себе другие теги. Элемент span — строковый. Они разные, но выполняют похожие функции.
Статья была полезной?