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.

<div>Thanks For</div>

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.

<span>Thanks For Your Love For</span>
<html>
<body><h1>Welcome To T4-Tutorials</h1>

<h2>Inline-Element:</h2>

<span>Thanks For Your Love For</span>

<span>T4-Tutorials….</span>

</body>
</html>

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 the div element is used with CSS, the <div> element can be used to style blocks of content.

<div style="background-color:lightgrey;color:red;margin:30px;padding:40px;">
  <h2>Welcome To T4-Tutorials</h2>
  <p>Thanks For Your Love For T4-Tutorials..........</p>
</div> 

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.

<h1><span style="color:hotpink">Welcome To</span> T4-Tutorials</h1>
<h2><span style="color:purple">Thanks For Your Love For </span> T4-Tutorials</h2>

HTML Grouping Tags

span: 

Defines a section in a document (inline).

Div :

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

Prof.Fazal Rehman Shamil (Available for Professional Discussions)
1. Message on Facebook page for discussions,
2. Video lectures on Youtube
3. Email is only for Advertisement/business enquiries.