Html. Контекст форматирования и семантика

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

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

Каждый элемент из коробки принадлежит к определенному контексту форматирования. Их делят на две группы блочные и строчные.

Существуют несколько типов контекстов форматирования элементов

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

Блочный контекст

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

В нормальном потоке элементы идут друг под другом занимая всю ширину блока, например в разметке три элемента div

<div>Элемент 1</div>
<div>Элемент 2</div>
<div>Элемент 3</div>

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

В блочном контексте происходит схлопывание внешних отступов, если верхнему блоку задан нижний отступ, а нижнему блоку верхний отступ, то результирующий margin будет больший из них, например

<div style="margin-bottom: 50px">Элемент 1</div>
<div style="margin-top: 49px">Элемент 2</div>

Итоговое расстояние между ними будет 50px

Строчный контекст

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

Несколько элементов будут стремиться заполнить всю ширину родителя располагаясь в строчку. Например

<span>Строчный элемент 1</span>
<span>Строчный элемент 2</span>
<span>Строчный элемент 3</span>
<span>Строчный элемент 4</span>
<span>Строчный элемент 5</span>
<span>Строчный элемент 6</span>
<span>Строчный элемент 7</span>
<span>Строчный элемент 8</span>

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

Строчный элемент 1 Строчный элемент 2 Строчный элемент 3 Строчный элемент 4 Строчный элемент 5 Строчный элемент 6 Строчный элемент 7 Строчный элемент 8

flexbox контекст

Это контекст, который создается элементом с display: flex или display: inline-flex.

Он позволяет создавать сложные макеты с гибким расположением элементов.

grid контекст

Это контекст, который создается элементом с display: grid или display: inline-grid.

Он позволяет создавать макеты на основе сетки с точным контролем над расположением элементов.

Семантика

Казалось бы где тут контекст форматирования и семантика. На мой взгляд одно не может быть без другого.

Если контекст форматирования - это, то как элементы располагаются, то семантика - это то, что они означают.

То есть, элементы имеют определенный контекстом использования, о них говорят, что они семантические.

Примеры семантических тегов это секционные теги, которые делят страницу на большие логические блоки - это article aside nav section

Помимо элементов в которые заложен смысл. Существуют еще и атрибуты, которые изучали в статье Html. Глобальные атрибуты тегов

Например, атрибут lang сообщает о языке, на котором написан контент в элементе.

Есть теги, которые намекают как их использовать.

Что это нам дает

• В семантически правильно сверстанном коде легче ориентироваться и проще вносить изменения.
• Логичная разметка улучшает пользовательский опыт взаимодействия с сайтом для незрячих пользователей.
• Так же это улучшает навигацию для скринридеров.
• Улучшает режим чтения в браузерах, так как удаляется все лишнее, а остается только самое важное.
• Различные умные устройства будут лучше работать с семантически верной разметкой.
• Семантика упрощает работу поисковым роботам, а именно, улучшает точность индексации страниц

Разметка страницы

Разметить страницу можно разными способами, деля весь процесс на отдельные этапы.

• Подбираем крупные логические блоки.
• Расставляем заголовки, следим за их правльной вложенностью.
• Далее списки, таблицы и прочее.
• Самые мелкие элементы интерфейса, кнопки, ссылки, изображения.