HTML Section Tags

The SECTION tag is used to represent the generic section of an HTML document.

HTML Section Tag Example

Following HTML code fragment shows an example of the SECTION tag :

<SECTION>
<H1>HTML5</H1>
<P>Example of SECTION tag.</P>
</SECTION>

In SECTION tag, you will learn about tags given below:

NAV
ARTICLE
ASIDE
HEADER
FOOTER
ADDRESS

Now let's discuss all the above tags one by one.

HTML NAV Tag

The NAV tag is used to navigate from one HTML page to the another. This tag displays a group of links on a HTML document.

Example

Following HTML code fragment shows an example of the NAV tag :

<NAV>
<H1>Navigation</H1>
<UL>
   <LI><A href="news.html">News</A></LI>
   <LI><A href="article.html">Article</A></LI>
</UL>
</NAV>

Here is an example of section tags in HTML:

<!DOCTYPE HTML>
<HTML>
<HEAD>
   <title>HTML Tag Example</title>
</head>
<body>

<section>
   <h1>HTML Tag</h1>
   <p>This is HTML Tag tutorial.</p>
</section>
<nav>
   <h1>Navigation</h1>
   <ul>
      <li><a href="/html/html-root-elements.htm">HTML Root Tags</a></li>
      <li><a href="/html/html-metadata-elements.htm">HTML Metadata Tags</a></li>
      <li><a href="/html/html-section-elements.htm">HTML Section Tags</a></li>
   </ul>
</nav>

</BODY>
</HTML>

Above HTML Example will produce the following result:

If you click on the HTML Root Tags hyperlink, this redirects you to the HTML Root Tags page.

HTML ARTICLE Tag

The ARTICLE tag is used to represent a section that contains the information about an HTML page, such as its title and the date of its creation. You can display the information in this tag in various formats, such as a new article, or a blog post, or user's comments section.

Example

The following HTML code fragment shows an example of using the ARTICLE tag :

<ARTICLE>
<HEADER>
   Some heading content
</HEADER>
<P>Some article content</P>
</ARTICLE>

HTML ASIDE Tag

The ASIDE tag allows us to create a section that is used to display information about the content of the other tags, such as time and date, current news, and weather report. This tag can also be used to insert typographical effects in a document, such as sidebars for the advertisements, notes, links, and tips.

Example

The following HTML code fragment shows an example of the ASIDE tag:

<body>
<header>
   <h1>Article Heading</h1>
   <p>Article content</p>
</header>
<aside>
   Enter some content related to the aside article
</aside>
</body>

HTML HEADER Tag

The HEADER tag is used to provide the introductory content on an HTML page. The HEADER tag can contain headings, paragraphs, links, and other content.

Example

The following HTML code fragment shows en example of the HEADER tag:

<header>
<h1>Level 1 Heading</h1>
<a href="http://codescracker.com/html/html-section-elements.htm#sections">HTML Section Tags</a></dd>
<nav>
   <ul>
      <li><a href="/news">News</a>
      <li><a href="/article">Article</a>
   </ul>
</nav>
</header>

HTML FOOTER Tag

The FOOTER tag is used to represent the footer, which contains various types of information, such as links and copyright data related to a document or a section of the document.

Example

The following HTML code fragment shows an example of the FOOTER tag :

<footer>
<ul>
   <li>Home</li>
   <li>News</li>
   <li>Links</li>
   <li>Article</li>
   <li>About</li>
</ul>
</footer>

HTML ADDRESS Tag

The ADDRESS tag is normally defined at the header or the footer of the HTML page and is used to display the contact information for a document, such as name of the document's owner, maintainers, e-mail address for feedback, postal address, and phone number. The content of the ADDRESS tag appears in italics on the Web browser.

Example

The following HTML code fragment shows an example of the ADDRESS tag :

<address>
   <a href="codes.html">codes</a>
   <a href="cracker.html">cracker</a>
   Contact persons for the <a href="activity.html">codescracker Web Design Activity</a>
</address>

Here is an example of HTML ADDRESS tag:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Section Tag Example</title>
</head>
<body>

<p>The HTML address tag defines contact information (author/owner) of a document or article.</p>
<address>
   Written by codescracker.com<br> 
   Visit us at:<br>
   http://codescracker.com
</address>

</body>
</html>

Here is the sample output produced by the above HTML ADDRESS tag example code:

HTML Section Tags Example

Here is an example of HTML Section Tags:

<!DOCTYPE HTML>
<HTML>
<HEAD>
   <title>HTML Section Tag Example</title>
</head>
<body>
   
<aside style="float:right;width:200px;">
   <p>You can also learn about head and heading tags by navigating to this
   <a href="http://codescracker.com/html/html-heading-elements.htm">HTML Head and Heading Tags</a>
</aside>
<article>
   <header>
   <h1>Title of the Article</h1>
   <a href="http://codescracker.com/html/html-styles.htm">HTML Styles</a>
   </header>
   <p>This is the use of section elements</p>
</article>

</BODY>
</HTML>

Following is the sample output produced by the above HTML Section Tag example code:

Now, let's consider the following example to understand the use of the ADDRESS tag:

<!DOCTYPE HTML>
<HTML>
<HEAD>
   <title>HTML Section Tags Example</title>
</head>
<body>

<aside style="float:right;width:200px;">
<p>You can also learn about HTML Head and Heading tags by navigating to this
<a href="http://codescracker.com/html/html-heading-elements.htm">HTML Head and Heading Tags</a>
</aside>
<article>
   <header>
   <h1>Title of the Article</h1>
   <a href="http://codescracker.com/html/html-section-elements.htm">
   HTML Section Tags</a>
   </header>
   <p>This content is defined in the ARTICLE element.</p>
</article>
<address>
   <p>This article is written by:</p>
   <a href="http://codescracker.com">codescracker</a>
</address>
   
</BODY>
</HTML>

Here is the sample output of the above HTML Section tag example:

Now, let's take an example of Section tags (header and footer tags) in HTML:

<!DOCTYPE HTML>
<HTML>
<HEAD>
   <TITLE>HTML SECTION Tags Example</TITLE>
</HEAD>
<BODY>

<header>
   <h1>Heading</h1>
   <a href="http://codescracker.com/html/html-section-elements.htm">HTML Section Tags</a></dd>
   <nav>
      <ul>
         <li><a href="articles.html">Articles</a></li>
         <li><a href="news.html">News</a></li>
         <li><a href="discussion.html">Discussion</a></li>
         <li><a href="download.html">Download</a></li>
      </ul>
   </nav>
</header>
The body content of the HTML document
<footer>
   <nav>
      <p><a href="credits.html">Credits</a> - 
      <a href="terms.html">Terms of Service</a> - 
      <a href="contact.html">Contact Us</a></p>
   </nav>
   <p>Copyright @ 2011</p>
</footer>
   
</BODY>
</HTML>

Below is the output of the above HTML Section tag example code:

HTML nav article header footer address aside tags

HTML Online Test

« Previous Tutorial Next Tutorial »