Тег <div> определяет раздел или раздел в HTML-документе. Поля используются для создания пространства вокруг элементов за пределами любых определенных границ. Отступы используются для создания пространства вокруг содержимого элемента внутри любых определенных границ. Наконец, семантические элементы HTML делают веб-страницу более понятной, организованной, удобочитаемой и доступной во время кодирования.

Див

В HTML тег div используется для создания макета страницы. Оно происходит от слова «Division» и используется для создания различных областей путем разделения страницы.
Тег div используется с открывающим и закрывающим тегами как «‹div›» и «‹/div›». Вы можете добавить в него любой контент, такой как текст, изображения, другие теги HTML или текст.

Тег div также используется для форматирования содержимого, отображаемого на странице, с помощью CSS.

Например, следующий блок кода создает две разные области на странице с помощью тега div:

<!DOCTYPE html>
<html>
<head>
 <title>Div Example</title>
 <style>
    .left {
       float: left;
       width: 48%;
       background-color: red;
       padding: 10px;
          }

    .right {
       float: right;
       width: 48%;
       background-color: gray;
       padding: 10px;
           }
 </style>
</head>

<body>

 <div class="left">
    <h2>Left side div element</h2>
    <p>You can put content here</p>
 </div>

 <div class="right">
    <h2>Right side div element</h2>
    <p>You can put content here</p>
 </div>

</body>

</html>

В этом примере страница разделена на две части, одну слева и одну справа. Правая сторона имеет серый фон, а правая сторона имеет красный фон. Обе области div могут содержать заголовки и абзацы текста. CSS определяет размер и цвет фона разделов, придавая им более приятный вид.

После написания этого кода сайт выглядит так:

Допуск

Margin — это свойство CSS, выражающее размер пространства вокруг элемента HTML. Margin используется для управления расстоянием между содержимым элемента и другими элементами.

Свойство поля может быть определено главным образом для четырех различных аспектов элемента: сверху, снизу, справа и слева. Для этих направлений могут быть назначены разные значения маржи. Значения поля могут быть указаны в пикселях, процентах или единицах em.

Например, следующий блок кода создает элемент div и устанавливает отступ в 20 пикселей для всех аспектов этого элемента div:

<!DOCTYPE html>
<html>
<head>
 <title>Margin Example</title>
 <style>
  div {
   margin: 20px;
   background-color: gray;
   padding: 10px;
  }
 </style>
</head>
<body>
 <div>
  <h2>This is a div example</h2>
  <p>This is a paragraph inside the div tag</p>
  <img src="https://picsum.photos/200/200" alt="Picture Example">
 </div>
</body>
</html>

В этом примере все содержимое внутри элемента div будет иметь отступ в 20 пикселей. Это оставляет зазор в 20 пикселей между содержимым элемента div и другими элементами. Свойство padding управляет размером блока, содержащего содержимое внутри элемента div, а свойство margin управляет пространством вокруг блока.

После написания этого кода сайт выглядит так:

Прокладка

Padding — это свойство CSS, выражающее расстояние между содержимым HTML-элемента и его окружением. Заполнение используется для управления интервалом вокруг содержимого элемента.

Свойство padding, как и свойство margin, может быть определено для четырех различных аспектов элемента: сверху, справа, снизу и слева. Для этих направлений могут быть назначены различные значения заполнения. Значения заполнения могут быть указаны в пикселях, процентах или единицах em.

Например, следующий блок кода создает элемент div и устанавливает отступ в 30 пикселей для всех аспектов этого элемента div:

<!DOCTYPE html>

<html>
<head>
 <title>Padding Example</title>
 <style>
  div {
   padding: 20px;
   background-color: #f2f2f2;
   margin: 20px;
  }
 </style>
</head>
<body>
 <div>
  <h2>This is a div example</h2>
  <p>Some Content</p>
                <img src="https://picsum.photos/200/200" alt="Picture Example">
 </div>
</body>

</html>

В этом примере весь контент внутри элемента div будет иметь значение отступа 30 пикселей. Это оставляет зазор в 30 пикселей между элементом div и содержимым. В отличие от свойства margin, свойство padding управляет расстоянием между содержимым и его окружением, а свойство margin управляет расстоянием между самим элементом и другими элементами.

После написания этого кода сайт выглядит так:

Семантические элементы HTML

Семантические элементы HTML — это стандартные элементы HTML, используемые для создания контента на веб-странице. Семантические элементы HTML делают веб-страницу более понятной, организованной, удобочитаемой и доступной во время кодирования.

Основные семантические элементы HTML:

  • <header>: указывает заголовок или заголовок страницы.
  • <nav>: определяет меню навигации страницы.
  • <main>: определяет основное содержимое страницы.
  • <section>: определяет части страницы.
  • <article>: определяет отдельную единицу контента, например, запись в блоге или новостную статью.
  • <aside>: Определяет содержимое сбоку страницы, например, что-то вроде объявления, окна поиска.
  • <footer>: определяет нижний колонтитул страницы.