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

<div>
  <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>Welcome To</span> T4-Tutorials</h1>
<h2><span>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).

Fazal Rehman Shamil Click Here to Know More
Instructor, Researcher, Blogger, SEO Expert, Poet and Publisher of International Journal Of Software, Technology & Science ISSN : 2616 - 5325
Dear Professors and Resarchers!You are welome to Cite these tutorials in your research or slides etc. Please don't forget to mention the reference of website. Copy Paste of text is strcitly forbidden. Images can be reuse because images are protected with watermark.