Skip to main content

Block Elements and Inline Elements

In HTML, elements come in two main types: block and inline.

Block-Level Elements:​

Think of block-level elements as content blocks. They always start on a new line and take up the full width available.

Examples include paragraphs <p>, headings <h1> to <h6>, lists <ul>, <ol>, and dividers <div>.

Key Points about Block-Level Elements:​

  1. Start on New Lines:

Each block-level element starts on a new line, creating clear separations between different sections of content.

  1. Full Width:

They stretch out to fill the entire width of their container.

  1. Stackable:

Block-level elements stack on top of each other vertically, creating a clear separation between different sections of content.

Inline-Level Elements:​

Inline-level elements are more like small parts of the content. They flow within the text or other inline elements without starting a new line.

Examples include links <a>, emphasis <em>, strong <strong>, and spans <span>.

Key Points about Inline-Level Elements:​

  1. Stay in Line:

Inline elements stay within the flow of the text; they don't force new lines.

  1. Width as Needed:

They only take up as much width as necessary.

  1. Can't Stack Vertically:

Inline elements cannot stack on top of each other vertically like block-level elements.