HTML5 structural tags and specification definitions

HTML5 Tags can be categorized as follows.

In this article we will review Structural Tags.

In HTML4, other than h1 to h6 tags none of the elements define document structure.
Although it is common practice to add divs with meaningful name of id or class attributes, in reality this gives not meaning additional meaning to page structure.

To help authors to provide more control over HTML documents, HTML5 introduces several new structural tags. This tags can let you to replace div tags with meaningful semantic markup.

<section></section>

“Section element represent a generic section of document or application. A section is a thematic grouping of content, typically with heading….”

<section> not used as replacement of div tags.Section should be distinct region with distinct title within your document.

<article></article>

“The article element represent a self contained composition in a document, page, application or site that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.”

<aside></aside>

“The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.”

<header></header>

“The header element represents a group of introductory or navigational aids. A header element is intended to usually contain the section’s heading, (an h1-h6 element or an hgroup element) but that is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.”

<hgroup></hgroup>

“The hgroup element represents the heading of a section. The element is used to group a set of h1-h6 elements when the heading tag has multiple levels, such as subheadings, alternate titles, or taglines.”

<footer></footer>

“The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”

<nav></nav>

“The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.”

This entry was posted in Web Application Development. Bookmark the permalink.

Comments are closed.