Blocks in HTML

In this page we will describe all the blocks tags used in HTML and HTML5. When we need long documentations handling than long documents are easier to use when they are divided into smaller parts. Some examples are given as: books are divided into chapters, and newspapers have sections for local news, sports, comics, and so on.when developers need to divide the long documents in some specific thematic sections then the used these block elements. Sections typically have a heading and any other content that has a meaningful reason to be grouped together.

Following HTML blocks elements are given


Sections tag

Section syntax

<section style="background-color: lightgrey;">
<h3>About KFUEIT</h3>
<p>Khawaja Fareed University of Engineering is Pakistan's best university.KFUEIT is providinig best education systems.There are probably 15000 students in this university.It has best transport system .</p>
</section>

Output of above code

About KFUEIT

Khawaja Fareed University of Engineering is Pakistan's best university.KFUEIT is providinig best education systems.There are probably 15000 students in this university.It has best transport system .

Explaination section element

Section element is used to define some section in a document. It has a specific heading as in our above example.This is a semantic tag which clearly defines it's functionality.

Article tag

Article syntax

<article style="background-color: lightgrey;">
<h3>Rahim Yar Khan</h3>
<p>Rahim Yar Khan is a city of province punjab pakistan.This is a district.It is very clean.It has hospitals,schools,colleges and universities.</p>
</article>

Output of above code

Rahim Yar Khan

Rahim Yar Khan is a city of province punjab pakistan. This is a district.It is very clean.It has hospitals,schools, colleges and universities.

Explaination article element

The article element represents a self-contained used in a docuemnt, or any page or site, which is intended to be independently distributable Examples it explained with: forum post, magazine or newspaper article, or a blog entry.

Aside tag

Aside syntax

<aside style="background-color: lightgrey;">
<h3>webtags.com.pk</h3>
<p>The text which will be shown aside.</p>
</aside>

Output of above code

webtags.com.pk

The text which will be shown aside.

Explaination aside element

Aside text is shown as a sidebar. But some it deos not show any unique result in output.If you want to make it more attractive than use CSS.

Aside tag

nav syntax

<nav style="background-color: lightgrey;">
<ul>
  <li> Serif </li>
  <li> Sans-serif </li>
  <li> Script </li>
  <li> Display </li>
  <li> Dingbats </li>
</ul>
</nav>

Output of above code

  • Serif
  • Sans-serif
  • Script
  • Display
  • Dingbats

Explaination nav element

The nav element is used for navigation links.
The nav element is intended only for major block of navigation links.
It is also used for side bar links lists.







The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.


add