Перейти к содержанию

Блочные элементы

Блочные элементы занимают всю доступную ширину страницы. Каждый такой элемент начинается с новой строки.

Примеры блочных элементов: - <div> - <p> - <h1> - <h2> - <h3> - <table> - <ul> - <ol>

Пример:

<p>Первый абзац</p>
<p>Второй абзац</p>

Каждый абзац будет начинаться с новой строки.

Строчные элементы

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

Примеры строчных элементов: - <span> - <a> - <strong> - <em> - <img>

Пример:

<p>Это <strong>важный</strong> текст</p>

Тег <strong> не переносит текст на новую строку.

Контейнеры в HTML

Иногда нужно объединить несколько элементов. Для этого используются контейнеры.

Основные контейнеры:

div
span

Тег <div>

Тег <div> является блочным контейнером. Он используется для группировки элементов страницы.

Пример:

<div>
<h1>Заголовок</h1>
<p>Текст страницы</p>
</div>

Этот контейнер объединяет элементы.

Использование div с CSS

Чаще всего <div> используется вместе с CSS.

HTML:

<div class="box">
<p>Текст блока</p>
</div>

CSS:

.box {
border: 1px solid black;
padding: 20px;
}

Тег <span>

Тег <span> является строчным контейнером. Он используется для выделения части текста.

Пример:

<p>Это <span>важный</span> текст</p>

Использование span с CSS

HTML:

<p>Это <span class="highlight">важный</span> текст</p>

CSS:

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

Пример страницы

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Пример</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div class="container">

<h1>Мой сайт</h1>

<p>Это <span class="important">важный</span> текст.</p>

</div>

</body>
</html>

CSS:

.container {
padding: 20px;
border: 1px solid gray;
}

.important {
color: red;
}

Когда использовать div и span

Использовать div, когда:

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

Использовать span, когда:

  • нужно выделить часть текста;
  • требуется применить стиль к одному слову или фразе.