Элементы (теги) HTML страницы делятся на блочные и строчные.
Блочные элементы предназначены для разметки крупных блоков текста (заголовки, абзацы, списки) и создания разметки страницы (сетки).
Блочные элементы можно представить, как прямоугольные области на странице. Они имеют следующие особенности:
1. До и после блочного элемента существует перенос строки (то есть он всегда один находится на новой строке).
2. Блочным элементам можно задавать ширину, высоту, внутренние и внешние отступы.
3. Занимают всё доступное пространство по горизонтали.
К блочным элементам относятся такие теги как: <p>, <h1> и другие.
Еще один важный и распространённый блочный тег — это тег <div>, который обозначает просто «блок» или «прямоугольный контейнер». Этот тег обычно используется для создания разметки страницы (сетки). С ним мы познакомимся позже.
Строчные элементы необходимы для оформления текста на уровне небольших фраз и отдельных слов.
Строчные элементы располагаются друг за другом в одной строке, при необходимости (если не хватает места) строка переносится. Особенности строчных элементов:
1. До и после строчного элемента отсутствуют переносы строки.
2. Ширина и высота строчного элемента зависит только от его содержания, задать размеры с помощью CSS стилей нельзя.
3. Можно задавать только горизонтальные отступы.
К строчным элементам относятся такие теги как: <a>, <strong>, <em> и другие.
Дочерние, родительские элементы и потомки
А сейчас давайте подумаем, а можно ли писать один тег внутри другого, и не будет ли это ошибкой?
Элементы можно вкладывать друг в друга. Такие элементы называются «вложенные» (дочерние) по отношению к родителю.
Дочерним называется элемент (тег), который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберём небольшой код:
| <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div> <p><em>Далеко-далеко</em> за словесными горами в стране.</p> <p>Безопасную <strong><em>осталось текста</em> они вопрос</strong> строчка маленький ipsum!</p> </div> </body> </html> |
В данном примере применяется несколько контейнеров, которые в коде располагаются один в другом.
Нагляднее это видно на дереве элементов, так называется структура отношений тегов документа между собой.
На этом рисунке в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к тегу <div> выступает тег <p>. Вместе с тем тег <strong> не является дочерним для тега <div>, поскольку он расположен в контейнере <p>, в данном случае тег <strong> является потомком по отношению к тегу <div>.
Теги контейнеры и семантические элементы
Давайте знакомится с элементами HTML которые позволяют рисовать сетку любого формата и придавать различным областям семантический смысл (логическую структуру сайта для браузера и поисковиков).
Семантические элементы HTML5 доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов <div>. С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.
Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было <div id="header">, стало <header>).
Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению. Для всех элементов доступны глобальные атрибуты.
<div> </div>
div — является базовым контейнером для элементов.
Тег <div> не имеет свойств по умолчанию для внешнего отображения, он представляет собой так называемый контейнер, поэтому к нему можно применять всевозможные CSS-стили, чтобы элементы внутри этих тегов приняли желаемый вид.
Этот тег изначально был предназначен для деления веб-страницы на логические фрагменты, такие как нижний колонтитул (подвал), боковое меню и т.п. Но с появлением новой семантической разметки веб-страниц с помощью HTML5, необходимость в таком повсеместном использовании тега отпала.
В настоящее время тег <div> используется для группирования блочных элементов. Тег также позволяет объединять любой набор таких элементов, как заголовок, насколько абзацев, список в единственном блоке, который потом можно позиционировать на веб-странице, создавая сложную схему разметки.
Тег <div> следует применять только в случае, если для выделения области не подходит никакой другой элемент страницы.
| <div> <h2>Далеко-далеко.</h2> <img src="img/picture.png" alt="Изображение"> <p>Далеко-далеко за словесными горами в стране гласных и согласных.</p> </div> |
<header> </header>
Группирует вводные и навигационные элементы, не является обязательным.
Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип.
В HTML-документе может содержаться одновременно несколько элементов <header> и они могут располагаться в любой части страницы.
Элемент <header> нельзя помещать внутрь элементов <footer>, <address> или другого элемента <header>.
| <header> <h1>Site description</h1> <nav> <ul> <li><a href="">About</a> <li><a href="">Forum</a> <li><a href="">Download</a> </ul> </nav> </header> |
<nav> </nav>
Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри тега <header>.
На странице может быть несколько элементов <nav>.
Не заменяет теги <ul> или <оl>, он просто их обрамляет.
Не все группы ссылок на странице должны быть обёрнуты <nav>, этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.
| <nav> <ul> <li><a>...</a></li> <li><a>...</a></li> <li><a>...</a></li> </ul> </nav> |
<article> </article>
Используется для группировки записей — публикаций, статей, записей блога, комментариев.
Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>.
Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.
| <article> <header> <h2>...</h2> </header> <p>...</p> <footer> <a href="">…</a> </footer> </article> |
<section> </section>
Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок.
Не является блоком-оберткой, для этих целей уместнее использовать элемент <div>.
В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты.
Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.
| <article> <h2>...</h2> <section> <h3>...</h3> <p>...</p> </section> <section> <h3>...</h3> <p>...</p> </section> <p>...</p> </article> |
<aside> </aside>
Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого).
Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: <nav>, цифровые данные, цитаты, рекламные блоки, архивные записи.
Не подходит для блоков, просто позиционированных в стороне.
| <aside> <h2>...</h2> <p>...</p> </aside> <aside> <h2>...</h2> <p>...</p> <blockquote> <p>...<cite>...</cite>...</p> <p>...</p> </blockquote> </aside> |
<footer> </footer>
Представляет собой нижний колонтитул содержащей его секции или корневого элемента.
Обычно содержит информацию об авторе статьи, данные о копирайте и т.д.
Если используется как колонтитул всей страницы, содержимое дополняется сведениями об авторских правах, ссылками на условия использования, контактную информацию, ссылками на связанное содержимое и т.п.
В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>, более того, <footer> можно поместить в элемент <blockquote>, чтобы указать источник цитирования.
| <footer> <address>...</address> <small>@2019...</small> </footer> |
<main> </main>
Элемент <main> представляет основное содержимое документа (содержимое элемента <body>).
Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).
Элемент <main> не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>
| <body> <header> … </header> <main> <h1>Следы невиданных зверей</h1> <p>История о том, как возле столовой появились загадочные розовые слоны… </p> </main> <footer> … </footer> </body> |
<figure> </figure>
Элемент <figure> представляет автономный контент, являющийся самостоятельным элементом основного потока. Элемент может быть перемещен из основного содержимого документа в боковую колонку или приложение, не затрагивая поток документа.
С помощью элемента <figure> можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д.
<figcaption> </figcaption>
Элемент <figcaption> — потомок элемента <figure>, не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента <figure>.
| <figure> <img src="picture.jpg" alt="Осень"> <figcaption>Осенний лес</figcaption> </figure> |