HTML5 introduces a number of new tags and makes several others obsolete. That doesn't mean an earlier version, such as HTML4.01, won’t display properly in the latest web browsers, as they all have excellent backwards compatibility. However, you should swap obsolete tags for their HTML5 alternatives.
If you've already built a website, you should be familiar with using <div> to define a block on the page, which you can then style, up using CSS. This has been retained in HTML5, along with <span> (to pick out inline blocks for individual formatting) and joined by specific block types including <nav>, which is used to define a navigation element, such as a menu.
Many new tags help to define the content of a page rather than just position it within the flow. For example, <figure> ties an image to its caption, let ting you style the pair as a single block and to sub-style the contents- image and caption - individually inside it.
Even if you don't intend to revisit existing sites and recede them using HTML5, you should stop using tags such as <frameset>, <frame> and <noframes> as they have been deprecated, along with <strike>, <u> and <font>. Most of HTML4.01’s tag structure remains in place, however, with HTML5 building on it.
Beyond creating a clear distinction between content and presentation, HTML5 introduces elements that simplify the integration of non-textual material. The <canvas> tag, for example, provides a container for scripts that draw graphical elements such as shapes and graphs; while <audio> lets you embed audio directly on a page. The <video> tag does the same for visual content, with optional attributes for auto playing, embedded controls, looping and a poster frame that displays before the video kicks in.
New tags such as <video> let you use media content natively without any need for plug-ins
The code below will embed a file called barcelona.mp4 in your page, with accompanying controls. The video window is 640 by 480 pixels, and the movie file will load at the same time as the page. We've also specified a poster frame (barcelona.jpg) to display in the video box like a thumbnail on a DVD menu. No plug-ins are required. The text displayed between the opening and closing <video> tags handles errors, and is displayed if the visitor doesn't have a compatible browser:
Add HTML5's New Markup Tags
To demonstrate how easy HTML5 is to use; we'll build a simple page, using HTML5-native tags where possible. This should render properly in the latest versions of Internet Explorer, Firefox, Chrome and Safari. We'll then look at how CSS3 can style our on-page elements.One benefit of HTML5 is evident in the new first line of every page: <!DOCTYPE HTML>. This is much simpler than its HTML4.01 equivalent. Following the head section, we'll add the new <header> and <nav> tags:
The <header> tag lets you address this section in CSS while also defining the content. Aggregators and search engines will understand its contents, and can use it in place of the page title in a list of search results. Likewise, <nav> defines a container for navigational elements. It doesn't define the presentation of the navigation, so a properly linked menu should still be handled using CSS.
Because both these tags are semantic - defining content rather than formatting it - they can be used anywhere you like, several times on the page. You might want to use a <header> as a cross heading before each block of text, and another <nav> further down your page so visitors can jump to a subsection. You can therefore apply specific styles to each tag. We've done this with the <nav> tag, formatting it using a class within CSS called 'topmenu', to denote the menu that runs across the top of the page.
Add the Main Body
With the menu and header out of the way, we can start to write the main body of the page:The <section> tags group together various elements on the page and define the start and end points of a discrete section. In our example, one overall section holds the body of our page, with smaller subsections to tie together the heading of each part (<h2>) and its body content (<p>). These are merely a semantic hint, letting readers see where one part begins and ends.
Our first subsection contains an <aside>. This semantic tag ties together a less important header and body content, and it might be styled to sit to the side of the main page flow. In HTML4.01, we could have achieved the same effect by drawing out a <div> and floating it to the left or right. However, it wouldn't have been clear that this was related content when examining the underlying code. We can now close off our page with <footer> and <summary> tags:
In HTML4.01, footers were usually defined within a named <div>. As with <header>, having <footer> is a timesaver, helping to make the code readable and keeping elements addressable by CSS. The use of <section> ties together a summary and a paragraph. The summary defines the content that follows. You can have as many summaries as you want on the page and style them together or, by directly addressing 'footer section summary' in CSS, target one specific instance.
