< Html Tutorial

Html block and inline elements

← Previous Next →


Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.


Block-level Elements

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

The  <div>  element is a block-level element.

Examples of block-level elements:

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary. This is an inline element inside a paragraph.

Examples of inline elements:

  • <span>
  • <a>
  • <img>

The <div> Element

The <div> element is a block-level element that is often used as a container for other HTML elements.

The <div> element has no required attributes, but style and class are common.

When used together with CSS, the <div> element can be used to style blocks of content:

Example

<div style="background-color:black; color:white; padding:20px;"> 
       <h2>London</h2>  
      <p>
            London is the capital city of England. 
            It is the most populous city in the United Kingdom, 
           with a metropolitan area of over 13 million inhabitants.
      </p> 
</div>

The <span> Element

The element is an inline element that is often used as a container for some text. The element has no required attributes, but style and class are common. When used together with CSS, the element can be used to style parts of the text:

Example
<h1>My <span style="color:red">Important</span> Heading</h1>

HTML Grouping Tags

Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)
← Previous Next →