Урок №19. HTML. Блочні та вбудовані (рядкові) елементи

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



HTML/CSS. Як додати блочні та вбудовані (рядкові) елементи в HTML-код на веб-сайті?

Кожен елемент HTML має значення за замовчуванням, яке залежить від типу елемента. Значення за замовчуванням для більшості елементів є блоковим або вбудованим.


Блочні HTML елементи

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

Елемент <div> є блочним елементом.

Приклад:

<div>Hello</div>
<div>World</div>
Спробуйте самі! »

Блочні HTML елементи:


Вбудовані (рядкові) HTML елементи

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

Це є вбудований <span> елемент в параграф.

Приклад:

<span>Hello</span>
<span>World</span>
Спробуйте самі! »

Вбудовані HTML елементи


Елемент <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 тегів.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.