Divs Icon: organizing sections and page layoutThe <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>

The <footer> element is designed for footer info, often at the bottom of each page.

© Floyd Jay Winters
Created 09/06/2015

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>


<footer>
  <p>
The footer element is designed for footer info, often at the bottom of each page.</p>
  &copy;
Floyd Jay Winters<br>
   Created 09/06/2014<br>
</footer>

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.

<style type="text/css">
header, nav, section, article, aside, footer {display: block}

body {width:100%; margin:auto; padding:12px}
p {padding:12px; margin:0}
header{width:100%; text-align:center; border-bottom:4px #AAA solid; font-size:1.3em; background-color:#336699; color:#FFF}
nav {width:100%; text-align:center; border-bottom:4px #AAA solid; color: blue}
nav li {list-style:none; display:inline}
nav a {display:block; display:inline}
main {background-color: #ddd; float:right; border-bottom:4px #AAA solid}

section {border-right:4px #AAA solid; border-bottom:2px #AAA solid; background-color:#FFC; color:blue}
article {border-right:4px #AAA solid; border-top:2px #AAA solid; background-color:#FCF; color:blue}
aside {width:35%; float:right; background-color: #ddd}
footer {width:100%; text-align:center; clear:both; background-color:#336699; color:#FFF}
#left_col {width:65%; float:left;}

@media only screen and (min-width:1000px)

{
body {width:1000px}
}
</style>

For more HTML code samples see: www.w3schools.com
For other resources and tutorials see: quackit.com and htmlquick.com
ValidateValidate

Validation checks the syntax of your file, looking for both errors and possible issues when viewing your page in a browser. Some of the problems reported are missing end tags, missing characters, invalid attributes, incorrect nesting of elements...
 your file, see: http://validator.w3.org

Review Assignment Learning Project: 10 Practice Review Steps

Return to Menu   Top