HTML Block and Inline Elements

In HTML every element has a unique view.So it is categorised into two type:block and inline.

Block-level Elements

A block-level element always starts with 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.

Example

<div>Hello World</div>

Block level elements in HTML:

<address><article><aside><blockquote><canvas><dd><div><dl> <dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header> <hr><li><main><nav><noscript><ol><p><pre><section><table> <tfoot><ul><video>

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 <span> element inside a paragraph.

Example

<span>Hello World<span>	

Inline elements in HTML:

<a><abbr><acronym><b><bdo><big><br><button><cite><code> <dfn><em><i><img><input><kbd><label><map><object><output> <q><samp><script><select><small><span><strong><sub><sup><textarea> <time><tt><var>

The <div> Element

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

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

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