- HTML Basics
- HTML Home
- HTML Basics
- HTML Document Structure
- HTML Data Types
- HTML Attributes
- HTML Fonts
- HTML Headings
- HTML Character Entities
- HTML Horizontal Line
- HTML Line Break
- HTML Paragraph
- HTML Citation Definition
- HTML Quotations
- HTML Comments
- HTML Styles
- HTML Formatting
- HTML CSS
- HTML Tags
- HTML Basic Tags
- HTML All Tags
- HTML Root Tags
- HTML Metadata Tags
- HTML Section Tags
- HTML Head Heading Tags
- HTML Flow Tags
- HTML Phrasing Tags
- HTML Embedded Tags
- HTML Interactive Tags
- HTML Meta Tags
- HTML Texts
- HTML Text Formatting
- HTML Physical Style Text
- HTML Logical Style Text
- HTML Organizing Text
- HTML Arranging Text
- HTML Displaying Lists
- HTML List
- HTML Links Tables
- HTML Links URLs
- HTML Links
- HTML URL Encode
- HTML Tables
- HTML Images Colors
- HTML Images Colors
- HTML Images
- HTML Color Codes
- HTML Canvas
- HTML Backgrounds
- HTML Forms
- HTML Forms
- HTML Form Tag
- HTML Input Tag
- HTML Button Tag
- HTML Multiple-Choice
- HTML Select Tag
- HTML Option Tag
- HTML Optgroup Tag
- HTML Textarea Label
- HTML Fieldset Legend
- HTML Datalist Tag
- HTML Keygen Tag
- HTML Output Tag
- HTML Progress Tag
- HTML Meter Tag
- HTML Submit Form
- HTML enctype Attribute
- HTML action Attribute
- HTML Method Attribute
- HTML Get Method
- HTML Post Method
- HTML Interactive
- HTML Interactive Web
- HTML Details Summary
- HTML Menu Tag
- HTML Command Tag
- HTML KBD Tag
- HTML Time Tag
- HTML Multimedia
- HTML Multimedia
- HTML Multimedia Tags
- HTML Audio Video
- HTML Embedded Multimedia
- HTML EMBED Tag
- HTML OBJECT Tag
- HTML FIGURE FIGCAPTION
- HTML Advance
- HTML Blocks
- HTML Classes
- HTML Iframes
- HTML JavaScript
- HTML Layouts
- HTML Responsive
- HTML Test
- HTML Online Test
- Give Online Test
- All Test List
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:

« Previous Tutorial Next Tutorial »