HTML Block and Inline Elements

Every HTML element has a default display value, based on what kind of element it is. The two most common display values are block and inline.

Block-level Elements

A block-level element always starts on a new line, and the browser adds some space (a margin) before and after it. It also takes up the full width available, stretching as far left and right as it can. Two common block elements are <p> (a paragraph) and <div> (a section).

The block-level elements include: <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>, and <video>.

Example

A paragraph and a div, both block-level.

A page showing two block-level elements, each taking the full width and starting on its own line: a paragraph reading "Hello World" and a div reading "Hello World".

> Output: complete HTML page

Prompt

A page showing two block-level elements, each taking the full width and starting on its own line: a paragraph reading "Hello World" and a div reading "Hello World".

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Block Elements</title>
</head>
<body>

<p>Hello World</p>
<div>Hello World</div>

</body>
</html>

Inline Elements

An inline element does not start on a new line and takes up only as much width as it needs. A common one is <span>.

The inline elements include: <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>, and <var>.

Note: An inline element cannot contain a block-level element.

Example

A span, which is an inline element.

A page with a span element reading "Hello World", an inline element that takes only as much width as needed.

> Output: complete HTML page

Prompt

A page with a span element reading "Hello World", an inline element that takes only as much width as needed.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Span</title>
</head>
<body>

<span>Hello World</span>

</body>
</html>

The <div> Element

The <div> element is often used as a container for other elements. It has no required attributes, but style, class, and id are common. With CSS, it can style whole blocks of content.

Example

A styled <div> container.

A page with a div used as a styled container (black background, white text, 20px padding) holding an h2 "London" and a paragraph about London.

> Output: complete HTML page

Prompt

A page with a div used as a styled container (black background, white text, 20px padding) holding an h2 "London" and a paragraph about London.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Styled</title>
</head>
<body>

<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>

</body>
</html>

The <span> Element

The <span> element is an inline container used to mark up part of a text or document. It has no required attributes, but style, class, and id are common. With CSS, it can style parts of the text.

Example

<span> used to color words inside a sentence.

A page with a paragraph that uses span elements to color and bold two words: "blue" in blue and "dark green" in dark olive green, in a sentence about eye colors.

> Output: complete HTML page

Prompt

A page with a paragraph that uses span elements to color and bold two words: "blue" in blue and "dark green" in dark olive green, in a sentence about eye colors.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Span Styled</title>
</head>
<body>

<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>

</body>
</html>

Chapter Summary

To recap: a block-level element starts on a new line and takes the full width, while an inline element does not start on a new line and takes only as much width as needed. The <div> element is block-level and often used as a container, and the <span> element is an inline container for marking up part of a text.