Demon Tech Roadmap

HTML

HTML Block and Inline Elements

HTML elements display as block or inline by default.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

HTML controls how elements sit on the page. Block-level elements take the full width and start on a new line. Inline elements only take as much width as their content needs.

Syntax

1<!-- NOTE: reference file does not cover block-inline syntax template fully — placeholder used -->
2<div>Block</div>
3<span>Inline</span>

Example

1<!-- this shows element types -->
2<!DOCTYPE html>
3<html lang="en">
4  <head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Element Types</title>
8  </head>
9  <body>
10    <p>This is a block.</p>
11    <span>This is inline.</span>
12  </body>
13</html>

Try it Yourself

Hands-on Practice

Modify the code below to see how it affects the output. This is the best way to learn!

Interactive Editor

1234567891011121314151617181920

Live Preview

Key Points

Block elements take full page width.
Block elements stack vertically.
Inline elements flow alongside text.
Inline elements wrap their contents tightly.

Up Next

Continue your journey with the next topic.

Go to HTML Div ❯