HTML

HTML

πŸ“Œ HTML Block and Inline Elements

Overview

In HTML, every tag has a default behavior that determines how it appears in the browser. This behavior defines how the element occupies space on the page.

  1. The two most common types are :

  2. Block (block-level elements)
  3. Inline (inline elements)

1. Block-level Elements

  1. Features :

  2. Always start on a new line
  3. Take up the full width of the available space
  4. Usually create space above and below
  5. Can contain both block and inline elements

  1. Example Tags :

  2. <p> β†’ paragraph
  3. <div> β†’ general-purpose container
  4. <h1> - <h6> β†’ headings

Example Tags :

HTML

<p style="border:1px solid black;">Hello World (p tag)</p>
<div style="border:1px solid black;">Hello World (div tag)</div>

πŸ‘‰ These two elements appear one below the other because they are block-level and take up the full width.

2 Inline Elements

  1. Features :

  2. Do not start on a new line, continue on the same line
  3. Only take up as much width as their content
  4. Typically used to style small parts within text
  5. Should not contain block-level elements

  1. Example Tags :

  2. <span> β†’ used to style/select part of text
  3. <a> β†’ link
  4. <strong> - <h6> β†’ bold text
  5. <em> β†’ italic text
  6. <img> β†’ image

Example Tags :

HTML
<p>This is a<span style="color:blue; font-weight:bold;">blue and bold</span> word.</p>

πŸ‘‰ Here, <span> only affects the word and does not break the line.

3 Difference Between <div> and <span>

  • <div> β†’ a block-level container
  • <span> β†’ an inline container

Both do not carry meaning on their own and are usually used for styling with CSS.

  1. In short :

  2. Organizing large sections β†’ <div>
  3. Styling small parts of tex β†’ <span>

4 Changing Behavior with CSS (display)

You can change the default behavior of an element using CSS.

Example :

HTML

a{
    display: block;
}

πŸ‘‰ Normally, the <a> tag is inline, but with this code, it behaves like a block element.


Html List
Html Div