Элемент div: конструктор каркаса
В HTML часто используем универсальные контейнеры без предустановленной семантики, такие как <div>, для группировки большого количества элементов вместе. По сути, <div> действует как коробка для пакета элементов — своего рода строительный блок для создания структуры страницы. В отличие от текста, который мы можем оборачивать в теги <span>, чтобы стилизовать или выделить его, <div> предназначен для элементов более общего характера. Однако, присваивая <div> классы с осмысленными названиями, мы не только упрощаем самоконтроль, но и поддерживаем чистоту и понятность кода.
Тег div — это универсальный элемент, который не имеет определенного смысла, согласно стандарту. Его главной задачей является группирование элементов.
Это своего рода элемент span , только не для текста, а для элементов.
Синтаксис:
<div> ... </div>
<div> ... </div>
<div> ... </div>
Пример:
Имена классов должны четко передавать содержание и назначение блока, придерживаясь установленных стандартов: английский язык, строчные буквы и использование тире для разделения слов.
Правила синтаксиса при названии классов:
— название класса должно передавать смысл элемента;
— название класса обязательно должно быть на английском языке;
— в названии исключительно используются только строчные буквы;
— для названий, состоящих из более одного слова используются «-» (тире).
Имена для блоков:
<div class="links">
<!-- блок ссылки -->
</div>
<div class="about-me">
<!-- блок обо мне -->
</div>
<div class="price-list">
<!-- Прайс лист на услуги -->
</div>
Семантическая структура: main, aside, section и article
Элемент main
Элемент <main> предназначен для основного содержимого страницы. Это центральная часть сайта, уникальная для каждой страницы и отличная от повторяющихся компонентов вроде боковых панелей и навигации.
Элемент main служит для разметки части страницы, в которой находится её основной контент. Этот контент является уникальным для страницы, и нигде больше не может повторяться.
Элемент aside
Дополняющий основной контент, <aside> часто используется для вторичных элементов, таких как боковые панели, которые можно удалить без ущерба для основного содержимого страницы.
Элемент aside определяет область страницы, которая дополняет ее основной контент.
Элемент section
Конструкция <section> выделяет содержательную область, объединенную общей темой или смыслом. Каждое использование <section> сопровождается заголовком, который определяет его содержание.
Элемент article
Тег <article> полезен для контентов, которые остаются осмысленными и за пределами текущего окружения, как, например, посты в блоге или новости. Как и у <section>, у <article> должен быть заголовок, придающий контекст.
Элемент article разделяет страницу на независимые области, которые можно вынести из своего логического окружения, и они не потеряют свой смысл.
Чтобы определиться, какой из элементов использовать div , article или section можно использовать общепризнанный алгоритм:
— Будет ли содержимое иметь осмысленное значение само по себе, например, при публикации в ленте новостей? Если да, то выбираем article.
— Если части содержимого объединены общим смыслом, то выбираем section.
— Если нет никакого семантического значения, то выбираем div.
Определяем правила игры: CSS-свойства box-sizing и display
Свойство box-sizing
Этот параметр влияет на то, как мы измеряем размеры элементов:
content-box использует стандартные измерения, где ширина и высота задаются только для содержимого.
Свойство имеет несколько значений:
— content-box — при этом значении браузер рассчитывает размеры элемента по стандартному алгоритму;
— border-box — width и height будут задавать ширину и высоту элемента, а не контентной области.
border-box включает ширину и высоту границы и паддинга в заданные размеры.
Свойство display
Управление тем, как элементы располагаются на странице, достигается с помощью display.
С помощью свойства display браузер понимает, как ему отобразить элемент и какими свойствами элемент обладает
Основные его значения включают block и inline.
- Блочные элементы (block): начинают разворачиваться с новой строки. Они заполняют всю доступную ширину их родительского контейнера по умолчанию.
- Строчные элементы (inline): располагаются в одной строке. Они автоматически выравниваются друг за другом по горизонтали и не позволяют явно задавать ширину и высоту.
Блочные элементы
Когда браузер видит, что свойство display имеет значение block , то для него этот элемент является блочным и имеет следующие особенности отображения.
— Блочные элементы располагаются с новой строки
<p>абзац №1</p>
<p>абзац №2</p>
<p>абзац №3</p>
— Свойство width блочного элемента равняется свойству width родительского блочного элемента, а свойство height — в зависимости от контента.
— Для блочных элементов можно установить значение для свойств width и height.
Строчные элементы
Имеют следующие свойства:
— Строчные элементы располагаются друг за другом:
<a href="#">Ссылка первая</a>
<a href="#">Ссылка вторая</a>
<a href="#">Ссылка третья</a>
— По умолчанию строчные элементы располагаются друг за другом в одну строку до тех пор, пока они помещаются в своего родителя.
— Свойства width и height рассчитываются по контенту.
— Свойства margin-top и margin-bottom не работают для строчных элементов.
Примеры блока и строки:
<p>Это блочный элемент.</p>
<a href="#">Это строчная ссылка</a>
Центрирование и выравнивание
Свойство text-align
Используется для выравнивания текста и строчных элементов. Значение start выравнивает текст в соответствии с направлением написания (слева направо или справа налево). Свойство text-align определяет как будет выровнен текст или строчные элементы внутри элемента.
Свойство margin
Значение auto позволяет браузеру автоматически определять отступы для блочных элементов, что особенно полезно для центрирования.
Если разработчик задает значение auto для свойства margin , то браузер, основываясь на блочной модели, самостоятельно рассчитывает значения для внешних отступов. Однако, значение auto работает только для горизонтальных значений отступов.
Заключение
HTML и CSS предлагают широкий выбор инструментов для создания структурированной и семантически корректной разметки. Ключевые теги, такие как <div>, <main>, <aside>, <section>, <article>, предоставляют разработчикам гибкость в группировке и представлении информации. Понимание их правильного применения помогает не только улучшить код, но и повысить доступность и SEO-функциональность создаваемых сайтов.
Подытожим всё вышесказанное:
- Тег div — это универсальный элемент для группировки элементов.
- Элемент main необходим для разметки части страницы, в которой находится её основной контент.
- Элемент aside определяет область страницы, которая дополняет её основной контент.
- Элемент section служит для создания раздела страницы, смысл которого определяется заголовком.
- Элемент article разделяет страницу на независимые области, которые можно вынести из своего логического окружения, и они не потеряют свой смысл при удалении.
Полезные ресурсы:
Премиум контент:
https://dzen.ru/grafantonkozlov?tab=premium
Сообщество дизайнеров в VK
https://vk.com/grafantonkozlov
Телеграмм канал сообщества
https://t.me/grafantonkozlov
Архив эксклюзивного контента
https://boosty.to/antonkzv
Канал на Дзен
https://dzen.ru/grafantonkozlov
---------------------------------------
Бесплатный Хостинг и доменное имя
https://tilda.cc/?r=4159746
Мощная и надежная нейронная сеть Gerwin AI
https://t.me/GerwinPromoBot?start=referrer_3CKSERJX
GPTs — плагины и ассистенты для ChatGPT на русском языке
https://gptunnel.ru/?ref=Anton
---------------------------------------
Донат для автора блога