HTML - Inline vs Block

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               Comparison

Block Elements

Example:

This is a paragraph

Explanation: The <p> tag defines a block of text that always starts on a new line.

Example:

This is a heading

Explanation: Headings are block-level elements that take the full width.

Example:

"Coding is the new literacy."
Explanation: Blockquote is a block container for quotations.

Example

This is use of division (div) tag.
Explanation: division tag creates a division in a webpage to design it separately.

Example:

<hr> tag creates a horizontal line.

    Example:
  1. Palace
  2. Mansion

    3. Explanation:
  3. <ol> creates a ordered list.
  4. it has many bullets like number, romans, alphabets.
Example:
HTML
Hypertext Markup Language

Explanation:
<dl>, <dd>, <dt> tags
these tags are definition list, definition term, and defined data used to define terms in html.


Inline elements

Example:

Jama masjid Explanation: this is <img> tag, used to insert image

Example: Explanation: this is <audio> tag, used to insert audio.

Example:
Explanation: this is <video> tag, used to insert videos.

Example: Google
Explanation: this is <a> tag, used to generate hyperlinks.

Example: using <cite> tag
Explanation: This tag is used to note down citetions.

Example: using <b> tag
Explanation: we can bold any text.

Example: using <i> tag
Explanation: we can italic any text.

Example:
Explanation: this is iframe tag, used to embed any required webpage into parent webpage.

Example: <abbr> Explanation: This is used to create abbreviations.

Example:
Explanation: This tag is used to label input fields.



Difference between Inline and Block Elements
S. No. Block Elements Inline Elements
1 It always starts from a new line. It never starts from new line.
2 Stretches to the whole width. Stretches only to width of its content.
3 Divides and Structure the major section of a page. Used for styling specific text and inline elements.
3 Can contain both block and inline elements. Can only contain inline elements.
5 <p>, <h1>, <div>, <ul>, <ol>, <hr>,<br><dl> <img>, <audio>, <video>, <iframe>, <a>, <cite>, <b>, <i>

Back to Top