Теги блочних елементів

3.1 Елемент <p>

Блочні елементи в HTML використовуються для створення структури та організації вмісту веб-сторінки. Вони допомагають розбивати контент на логічні блоки та сегменти. Ці елементи починають новий рядок і займають всю доступну ширину. Розглянемо докладніше три часто використовуваних теги: <p>, <div> і <span>.

Тег <p>

Тег <p> використовується для створення абзаців тексту. Він є блочним елементом: це означає, що кожен абзац починається з нової лінії і має відступи зверху і знизу.

Приклад використання:

    
      <p>
        Це перший абзац тексту. Абзаци використовуються для розділення тексту на логічні блоки,
        покращуючи його читабельність.
      </p>
      <p>Це другий абзац тексту. Кожен абзац починається з нової лінії.</p>
    
  

Властивості:

• Блочний елемент: Розташовується на новому рядку і займає всю доступну ширину.
• Автоматичні відступи: Зазвичай браузери додають відступи перед і після абзацу.
• Вкладеність: Тег <p> не може містити інші блочні елементи.

Стилизування за допомогою CSS:

    
      p {
        color: #333;
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 15px;
      }
    
  

3.2 Елемент <div>

Тег <div> є універсальним блочним контейнером, який використовується для групування інших елементів та застосування стилів до них. Він не має вбудованих стилів і використовується виключно для структуризації контенту.

Приклад використання:

    
      <div class="container">
        <h2>Заголовок блоку</h2>
        <p>Деякий текст всередині блоку div.</p>
      </div>
    
  

Властивості:

• Блочний елемент: розташовується на новій лінії і займає всю доступну ширину
• Універсальність: може містити будь-які інші елементи, включаючи блочні та строчні
• Стилизування та скрипти: часто використовується для застосування CSS-стилів та JavaScript-скриптів

Стилизування за допомогою CSS:

    
      .container {
        border: 1px solid #ccc;
        padding: 20px;
        background-color: #f9f9f9;
      }
    
  

3.3 Елемент <span>

Тег <span> є строчним елементом і використовується для виділення частини тексту або іншого контенту всередині блочних елементів. Він не має вбудованих стилів і слугує для застосування CSS-стилів і JavaScript-скриптів до певних частин тексту.

Приклад використання:

    
      <p>Цей текст містить виділене <span class="highlight"> слово</span>, яке відрізняється від решти тексту.</p>
    
  

Основні характеристики:

• Строчний елемент: не створює нової лінії та займає лише необхідну ширину
• Гнучкість: використовується для застосування стилів до окремих частин тексту або інших елементів
• Часто використовується в комбінації з CSS і JavaScript: допомагає точно стилізувати або маніпулювати частинами тексту

Стилизування за допомогою CSS:

    
      .highlight {
        color: red;
        font-weight: bold;
      }
    
  

3.4 Порівняння <div> і <span>

<div>:

• Блочний елемент
• Починається з нової лінії
• Може містити інші блочні та строчні елементи
• Використовується для групування та структурування контенту

<span>:

• Строчний елемент
• Не порушує потік тексту
• Використовується для стилізації окремих частин тексту
• Часто застосовується для виділення та взаємодії з JavaScript

Приклад комбінованого використання <div> і <span>:

    
      .article {
        border: 1px solid #ddd;
        padding: 10px;
      }

      .keyword {
        color: blue;
        font-style: italic;
      }
    
  

    
      <div class="article">
        <h2>Заголовок статті</h2>
        <p>
          Це абзац тексту статті з ключовим <span class="keyword">словом</span>, яке виділено для привернення уваги.
        </p>
      </div>
    
  

Теги <p>, <div> і <span> є основними будівельними блоками HTML, які дозволяють створювати структуровані, стильні та інтерактивні веб-сторінки. Розуміння їх особливостей і правильне використання допомагають створювати зручні та функціональні інтерфейси.