A SEMANTIC element clearly describes its content logically to both the browser and the web page developer.
Examples of older semantic elements were: <table>, <form>, and <img>.
Examples of non-semantic elements were simply: <div> and <span>, which by themselves provide no infomation about their content.
HTML5 offers new semantic elements (basically a tag) to clearly and logically define the content of different parts of a web page:
The <header> element defines a header for a page or section
<h1> tags and introductory material may go here
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.
<!DOCTYPE html>
<html>
<body>
<header>
The <header> element defines a header for a page or section, often includes an <h1> or <h2> tag, along with introductory material
</header>
<nav>
The <nav> defines a set of navigation links such as Home | Portfolio | Resume | Contact.
It replaces <div id="top_nav"> or <div id="side_nav">
</nav>
<section>
The <section> element defines a larger thematic grouping of content in the body a document. It typically includes a heading. For example, an About Us section
</section>
<aside>
The <aside> element is basically designed for sidebar info. It replaces <div id="left_col"> or <div id="right_col">
</aside>
<footer>
The <footer> element is designed for footer info, often at the bottom of each page. It replaces <div id="footer">
</footer>
</body>
</html>