Лекції
Почати
Почати навчання
JavaRush /Курси /Frontend SELF UA /Блокова модель HTML

Блокова модель HTML

Frontend SELF UA
Рівень 7 , Лекція 4
Відкрита

9.1 Блокові елементи

Блокова модель HTML — це концепція, яка описує структуру та відображення HTML-елементів у документі. Вона допомагає розробникам зрозуміти, як елементи взаємодіють один з одним і як вони розташовуються на сторінці. Розуміння блокової моделі важливе для створення структурованих та естетично привабливих веб-сторінок.

Блокова модель HTML складається з двох основних типів елементів: блокові та рядкові. Ці елементи відіграють ключову роль у верстанні веб-сторінок.

Блокові елементи

HTML Тег Опис
<div> Основний контейнер для групування інших елементів.
<p> Абзац тексту.
<h1> – <h6> Заголовки різних рівнів.
<ul>, <ol> Ненумеровані та нумеровані списки.
<li> Елемент списку.
<section> Семантичний контейнер для секції документа.
<article> Незалежний блок контенту.
<aside> Контент, пов’язаний з основним змістом (бокова панель).
<header> Вступна або навігаційна частина сторінки або секції.
<footer> Нижня частина сторінки або секції.
<nav> Навігаційні посилання.
<main> Основний зміст документа.
Вебінар JavaRush

Приклад блокового елемента:

HTML 
    
      <div>
        <h1>Заголовок</h1>
        <p>Це абзац тексту всередині блокового елемента div.</p>
      </div>

9.2 Рядкові елементи

Рядкові елементи (inline-level elements) займають тільки необхідну для їхнього змісту ширину і не починаються з нового рядка. Вони можуть містити тільки рядкові елементи або текст. Приклади рядкових елементів:

HTML Тег Опис
<span> Основний контейнер для групування рядкового контенту.
<a> Гіперпосилання.
<strong>, <b> Виділення тексту (жирний шрифт).
<em>, <i> Виділення тексту (курсив).
<img> Вставка зображень.
<code> Виділення коду.
<label> Зв’язок між міткою та елементом форми.
<input>, <select>, <textarea> Елементи форм.

Приклад рядкового елемента:

HTML 
    
      <span>Це абзац з <strong>жирним текстом</strong> і <em>курсивом</em>.</span>

9.3 Складові блокової моделі

Складові блокової моделі

Кожен елемент у блоковій моделі можна представити у вигляді прямокутного блока, який складається з наступних частин:

  • Контент (Content): внутрішній контент елемента, наприклад, текст або зображення
  • Внутрішній відступ (Padding): простір між контентом і границею елемента
  • Граница (Border): лінія, що оточує внутрішній відступ і контент
  • Зовнішній відступ (Margin): простір між границею елемента та сусідніми елементами

Візуалізація блокової моделі:

CSS 
    
      .element {
        width: 200px;           /* Ширина контенту */
        padding: 10px;          /* Внутрішній відступ */
        border: 2px solid red;  /* Граница */
        margin: 20px;           /* Зовнішній відступ */
      }

Приклад HTML з блоковою моделлю:

У цьому прикладі елемент <div> з класом "box" має ширину 200px, внутрішній відступ 10px, границю 2px і зовнішній відступ 20px. Ці властивості визначають, як елемент відображається на сторінці та взаємодіє з іншими елементами.

CSS 
    
      .box {
        width: 200px;
        padding: 10px;
        border: 2px solid red;
        margin: 20px;
      }
HTML 
    
      <div class="box">
        Це приклад блокової моделі.
      </div>
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ