HTML. Блочные и строчные (встроенные) элементы

Курс по основам HTML. W3Schools на русском. Уроки для начинающих

HTML. Как создать блочные и встроенные (строчные) элементы на веб-странице?

Каждый HTML элемент имеет значение по умолчанию, которое зависит от типа элемента. Значение по умолчанию для большинства элементов является блочным или встроенным (строчным).

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

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

Элемент <div> является блочным элементом.

Пример:

<div>Hello</div>
<div>World</div>
Попробуйте сами »

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

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>

Встроенные (строчные) HTML элементы

Встроенный (или строчный) элемент не запускается на новой строке и занимает лишь столько ширины, сколько необходимо.

Таковым является встроенный в параграф <span> элемент.

Пример:

<span>Hello</span>
<span>World</span>
Попробуйте сами »

Встроенные (строчные) HTML элементы

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>

Элемент <div>

Элемент <div> часто используется как контейнер для других элементов HTML. Элемент <div> не имеет обязательных атрибутов, но style, class и id являются общими. При использовании вместе с CSS, элемент <div> может использоваться для стилизации содержимого блоков:

Пример:

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
Попробуйте сами »

Элемент <span>

Элемент <span> часто используется как контейнер для некоторого текста внутри строки. Элемент <span> не имеет обязательных атрибутов, но style, class и id являются общими. При использовании вместе с CSS, элемент <span> может использоваться для стилизации частей текста:

Пример:

<h1>My <span style="color:red">Important</span> Heading</h1>
Попробуйте сами »

HTML теги группирования

Тег Описание
<div> Определяет блочный элемент в документе
<span> Определяет встроенный (строчный) элемент в документе

Примечание: Для получения полного списка всех доступных HTML тегов, посетите Справочник HTML тегов.