HTML Elements Showcase Inline vs Block

introduction to HTML elements

Inline Elements Block Elements Comparison

Block Elements

This is a div element

This is a paragraph element

This is a heading 1 element

This is a heading 2 element

This is a heading 3 element

This is a heading 4 element

This is a heading 5 element
This is a heading 6 element
  1. This is an ordered list item
  2. This is another ordered list item
This is a blockquote element
This is a horizontal rule element
Header 1 Header 2
Data 1 Data 2

Inline Elements

This is a span element

This is an anchor element

This is a strong element

This is an emphasis element

This is a code element

Placeholder Image

This is a bold element

This is a itallic element

This is a underline element

This is a mark element

This is a abbravation element

This is a code element

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

Comparison between Inline and Block Elements:

Block Elements Inline Elements
Take up the full width available Take up only as much width as necessary
Start on a new line Do not start on a new line
Can contain other block and inline elements Can only contain other inline elements
Examples: <div>, <p>, <h1> to <h6>, <ul>, <ol>, <table> Examples: <span>, <a>, <strong>, <em>, <code>, <img>
Note: Some elements can behave differently based on CSS styling.
top