The HTML5 specification includes a series of new semantic elements that is used to
give some meaning to the various sections or parts of a Web page, such as a
header, footer, navigation, and so on. In previous versions of HTML (HTML4.01), you would
typically use <div> elements to create these parts, using ID or class attributes to
differentiate them from each other. The problem with this is that this has no semantic
meaning, as there are no strict rules defined that specify what class names or IDs
are to be used, making it extremely difficult for software to determine what the
particular area is doing. HTML5 should help alleviate these issues, making it easier
for Web browsers to parse the semantic structure of a document.
It is worth pointing out that continuing to use <div> elements in HTML5 is perfectly
valid, but in order to future-proof your work, it is recommended that you use
semantic elements where relevant.
Try avoid using these new elements for purposes other than their intended. For
example, the <nav> element should not be used for just any group of links; it is
intended to surround the main navigation block on the page.
The main semantic elements that HTML5 introduces are:
This element is used to define a header for some part of a Web page, be it the
entire page, an <article> element, or a <section> element.
Like the <header> element, this new element defines a footer for some part of
a page. A footer does not have to be included at the end of a page, article, or
section, but it typically does.
This is a container for the primary navigation links on a Web page. This
element is not intended for use with all groups of links and should be used for
major navigation blocks only. If you have a <footer> element that contains
navigation links, you do not need to wrap these links in a <nav> element, since
the <footer> element will suffice on its own.
The <article> element is used to define an independent item on the page that
can be distributed on its own, such as a news item, blog post, or comment.
Such items are typically syndicated using RSS feeds.
This element represents a section of a document or application, such as a
chapter or a section of an article or tutorial. For example, the section you are
reading now could be surrounded by a <section> element in HTML5. <section>
elements typically have a header, although it is not strictly required. The header
for the section you are reading now would contain the text "Semantic
elements," for example.
This new element can be used to mark up a sidebar or some other content that
is considered somewhat separate to the content around it. An example of this
might be advertising blocks.
In some cases, a page, article, or section may require more than one heading,
such as where you have a title and a subtitle. This tutorial, for example, has the
title "Create modern Web sites using HTML5 and CSS3" and the subtitle
"Implementing the canvas and video elements in HTML5." You could wrap
these in an <hgroup> element, using an <h1> element for the main title
Create modern Web sites using HTML5 <h2> element for the subtitle.
The sample Web site at the end of this tutorial includes several of these new
semantic elements, and I will explain their syntax and use in more detail at that
The SPAN and DIV HTML Elements
How to Use SPAN and DIV with CSS on Web Pages
The SPAN and DIV elements are very useful when dealing with CSS(Cascading Style Sheets).
These two elements in a similar fashion, but they serve different purposes.
The DIV Element :The DIV elements define logical divisions in your web page. It acts a lot like a <P> element, by placing newlines before and after the division. A division can have multiple paragraphs in it.
Using the DIV Tag
To use the DIV element, simply surround the area of your page that you want as a separate division with the <div> and </div> tags:
<p>contents of div</p>
The DIV element gives you the chance to define the style of whole sections of the HTML. You can define a division of your page as a call out and give that area a different style from the surrounding text. That area could have images, paragraphs and headlines, anything you wanted. The DIV element also gives you the ability to ID areas of your documents so that you can change them with Ajax and dynamic HTML.
The DIV element is different in new HTML5 SECTION element because it does not give the enclosed content any semantic meaning. If you aren’t sure whether the block of content should be a DIV or a SECTION, think about what that content’s purpose is and why you need the DIV or SECTTION element.
1. If you need the element simply to add styles to that area of the page, you should use the DIV element.
2. If that area of the page has a specific meaning, for example it holds all your social media elements or it contains your blogroll, then you should use the SECTION element.
One thing to keep in mind when using the DIV element is that it breaks paragraphs. It acts as a paragraph end/beginning, and while you can have paragraphs within a DIV you can’t have a DIV inside a paragraph.
The primary attributes of the DIV element are:
Even if you don’t use style sheets or DHTML, you should get into the habit of using the DIV element. This will give you more flexibility and future proof your HTML. Also, you can use the id to identify your divisions so that your web pages are well formed.
Because the CENTER element has been deprecated in HTML 4.0 and is obsolete in HTML5, it is a good idea to start using <div style=”text-align: center;”> to center the content inside your DIV.
Learn More About the DIV Element
The SPAN Element
The SPAN element has very similar properties to the DIV element, in that it changes the style of the text it encloses. But without any style attributes, the SPAN element won’t change the enclosed items at all.
The primary difference between the SPAN and DIV elements is that SPAN doesn’t do any formatting of it’s own. The DIV element includes a paragraph break. The SPAN element simply tells the browser to apply the style rules to whatever is within the SPAN.
To use the SPAN element, simply surround the text that you want to add styles to with the<span> and </span> tags:
<p><span class=”highlight”>Highlighted text</span> and non-highlighted text.</p>
The SPAN element has no required attributes, but the three that are the most useful are the same as for the DIV element:
Use SPAN when you want to change the style of elements without placing them in a new block-level element in the document. For example, if you had a Level 3 Heading (H3) that you wanted the second word to be red, you could surround that word with <span style=”color : #f00;”>2ndWord</span> and it would still be a part of the H3 tag, just red. For example:
<h3>This is My <span style=”color: red;”>Awesome</span> Headline</h3>