Introduction:

In HTML, elements are broadly divided into two categories: block-level and inline. Block elements take up the full width, while inline elements only take as much space as needed.

block elements inline elements

inline vs block

Block Elements

Block elements

A generic container for content. Commonly used for layout and styling.
This is a block-level div.
P tag Represents a paragraph.

This is a paragraph.

>h1 to h6 Headings from largest h1 to smallest h6

Main Heading

Subheading

ul Unordered list (bullet points). ol Ordered list (numbered).
  1. First
  2. Second
li List item. Block-level inside ul or ol.
A block container for form elements. form input type="text" placeholder="Name"> form Represents tabular data. Block-level by default.

Inline Elements

span span a hyperlink bold underline sup (super script) sub (sub script) Key Characteristics

Flow: They fit seamlessly within a paragraph or a line of text, without causing a line break before or after them. Sizing: You cannot directly set a specific width or height for them. Their dimensions are defined by the content they contain (e.g., the text or image inside). Spacing: While you can add space to the left and right of an inline element (horizontal margin and padding), adding space to the top or bottom (vertical margin and padding) will not push surrounding lines of text away.

Comparision Table

Block Elements Inline Elements
div tag span
p a
h1 b
ul i
blackquote abbr
table code
back to top