HTML Sections

HTML elements can be grouped together for various content. Some of the common used tags are <div> and <span>. We can use <div> to display the header section or footer section. But, in HTML5, new tags such as <nav>, <header>, <footer> reduce the tag consumption used in <div> element.

HTML <div> Tag

The <div> tag is used as a block level element that can be used as a container for grouping other HTML elements. The <div> tag has no special meaning, except that it displays a line break before and after the tag. When used with CSS, it can be styled to our desire. It is also used to describe web page layouts.

For example:

<div>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</div>

HTML <span> Tag

The <span> tag is an inline element that can be used as a container for text. When used with CSS, it can be used to style the text.

For example:

My friend has <span style="color: brown">brown</span&gt: eyes.

HTML5 <header> Tag

The <header> tag is used to specify the header of the document or section. It should be used as the container for introductory contents.

For example:

<header>
<h1>HTML</h1>
<p>HTML means Hyper Text Markup Language</p>
</header>

HTML5 <section> Tag

The <section> tag id used to define a section in a document. A section is a used for grouping of content, typically with a heading.

For example:

<section>
<h1>HTML</h1>
<p>HTML means Hyper Text Markup Language</p>
</section>

HTML5 <article> Tag

The <article> tag is used to specify independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently.

For example:

<article>
<h1>HTML</h1>
<p>HTML means Hyper Text Markup Language</p>
</article>

HTML5 <aside> Tag

The <aside> tag is used to specify some content aside from the content it is placed in.

For example:

<aside>
<h1>HTML</h1>
<p>HTML means Hyper Text Markup Language</p>
</aside>

HTML5 <footer> Tag

The <footer> tag specifies the footer of the document or section. A footer usually contains the name of author, copyright information, links to term of use, contact information etc.

For example:

<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>

HTML5 <details> tag

The <details> tag specifies additional details that the user can view or hide on demand. It can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the <details> tag.

For example:

<details>
<summary>Copyright.</summary>
<p>by Edwin Ronald Lambert.</p>
<p>HTML is fun.</p>
</details>

HTML5 <dialog> Tag

The <dialog> tag is used to define dialog box or a window. The <dialog> element makes it easy to create popup dialog and modal in a web page.

For example:

<dialog open>This is a dialog!</dialog>

HTML5 <summary> Tag

The <summary> tag is used to define a visible heading for the <details> element. The heading can be clicked to view/hide the details.

For example:

<details>
<summary>Copyright 2014 </summary>
<p>Posted by: Edwin Ronald Lambert</p>
<p>All Rights Reserved</p>
<details>

HTML <iframe> Tag

The <iframe> tag is used to display an inline frame. That is to display a web page within a web page. It is used to embed another document inside the current document.

For example:

<iframe src="http://weblearntech.blogspot.in/"></iframe>