The
<div> tag is used to define a division or a section
of a web page such as the
masthead or the topNav or
the
footer. This is usually done so the web page layout can be organized into logical sections, and so each section can be
consistently formatted with the same styles. Divs are used to establish the layout or skeleton of the body or the page.
However,
<div> tags, even those which are given logical IDs, are basically non-semantic to the browser; that is they do not provide information about the
specific type of content. Is it a Heading? A Navigational element? A Sidebar? A Footer?
A Semantic element clearly describes its content structure logically to both the browser and the web page developer.
By the way, the word semantic means "the study of meaning."
Examples of semantic elements which have always been part of HTML are:
<table>,
<form>, and <img>.
Examples of non-semantic HTML elements are: <div>
(especially when used without a logically named ID) and <span>.
By themselves, these elements provide no information about their content.
HTML5 offers new semantic elements (basically a tag) to clearly and logically define the content of different parts of a webpage. The primary
structural examples of these semantic elements are: <header>,
<nav>, <main>,
<section>,
<article>, <aside>, and <footer>.
The HTML structure and tags below shows a webpage that use these HTML5 semantic elements instead of primarily relying on <div>
tags to set up the webpage layout.
The <header> element defines a header for a page or section
<h1> tags and introductory material may go here
<main>
The <section> element defines a larger thematic grouping of content, typically with a heading, in the body a document.
For example, an About Us section or the introduction to a book, or today's major news item. It may also have its own header, perhaps an <h1> or <h2> tag.
The <article> element defines a self-contained independent section or subsection, like a category of services.
This <article> element defines another contained independent section, like a blog.
</main>
You can
right-click this page and choose View Source to see the actual code for the
section above. The actual HTML5 code used to generate this page is shown
also below. You can copy and paste it into the <body> of a practice
webpage.
<header> <p>The
header element defines a header for
a page or section</p> <p>h1 tags and introductory material
may go here</p> </header>
<nav> <p>The
nav element defines navigation links such as</p>
<ul> <li><a href="index.htm">Home</a> |</li> <li><a href="portfolio.htm">Portfolio</a> |</li> <li><a href="resume.htm">Resume</a> |</li> <li><a href="news.htm">Newsletter</a> |</li> <li><a href="contact.htm">Contact</a></li>
</ul>
</nav>
<main> <div id="left_col"> <section> <p>The
section element defines a larger thematic grouping of content,
typically with a heading, in the body a document.</p> <p>For example, an
About Us section or the introduction to a book, or today's major news item. It
may also have its own header, perhaps an h1 or
h2 tag.</p>
</section>
<article> <p>The
article element defines a
self-contained independent section or subsection, like a category of
services.</p> </article>
<article> <p>This
article element defines another contained independent section, like a blog.</p>
</article> </div><!-- close left_col -->
<aside> <p>The aside element is basically designed for
sidebar info.</p> <p>Perhaps it may include an RSS feed, announcements, the
company slogan, a link to Facebook, or links to other resources...</p>
</aside> </main>
You can
right-click this page and choose View Source to see the Internal Stylesheet in the <head>. The Internal Stylesheet for this page is
also shown below. (However, tt would be better to save it as an external
cascading stylesheet.) You can copy and paste
it into the <head> of a practice page.