Posted on November 16th, 2018

Blocks in HTML

Blocks in HTML

In this tutorial, we will learn about the blocks.

Each element of HTML has a default display value and this value depends on what type of element it is. The default display value for most of the elements is inline or block.

Block-level Elements

A block-level element always starts with a new line and occupy the full width available on the screen (stretches out to the left and rightmost position).

For example, the <div> element is a block-level element.

Try it

List of  Block level elements in HTML:

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

Inline Elements

These kind of HTML elements does not start on a new line and only occupies as much width as required.

Try it

List of Inline elements in HTML:

<acronym><b><small><span><strong><sub><sup>

<textarea><time><code><dfn><em><i><img><bdo><big><br>

<button><cite><kbd><input><tt><var><label><map><object>

<q><samp><script><select><a><abbr>

The <div> Element

The <div> element is used to divide the body of web page into divisions and used as a container to occupt the other HTML elements.

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

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

Try it

The <span> Element

The <span> element is can be used as a container for text.

The <span> element has no required attributes, but some attributes are common, just like id, class and style attribute.

When used with CSS, the <span> element can be used to style different parts of the text.

Try it

HTML Grouping Tags

span: 

Defines a section in a document (inline).

Div :

Defines a section in a document (block-level).

0Shares