Guide to HTML, CSS, and JavaScript (Buffalo State University Version)
Chapter 13: HTML vs. HTML5
HTML has been used to markup web pages since 1995 (version HTML 2.0). See the Wikipedia HTML web page (http://en.wikipedia.org/wiki/HTML) for more information about the history of HTML. In April 1998 the World Wide Web Consortium (W3C) released version 4.0 and in December of that year version 4.0.1 of the HTML specification was released. In October 2015 HTML5 became the official release.
HTML5 introduced many new features (tags) and removed (deprecated) other tags(see below). See the W3C Working Draft for HTML vs. HTML5 differences (http://www.w3.org/TR/html5-diff/HTML5) for a details list of these new features and deprecated tags.
Many of the new HTML5 tags are designed to better define the structure of the document. For example, the <header>, <main>, <section>, <article>, <aside>, <address>, <figure>, <picture> and <footer> tags. This allows the browser to better understand the structure of the web page and also enhances the "worthiness" of a web page for search engines. Other new tags include <audio> and <video>, and enhanced form features (covered in previous chapters). Another new tag, <canvas>, allows you to create a virtual canvas where you can create drawings and animations using CSS3 and JavaScript (covered in a previous chapter).
The <header> Tag
The <header> tag should be used to define a section of your web page with introductory information.
The <main> Tag
The <main> tag should be used to define the main section of your web page.
The <section> Tag
The <section> tag should be used to define sections in a web page, such as chapters, headers, footers, etc.
The <aside> Tag
The <aside> tag should be used to define content that is "aside" of the content it is placed in.
The <figure> Tag
The <figure> tag should be used to define a section for an image or text. The <figcaption> tag can be used to provide a caption for the figure.
The <footer> Tag
The <footer> tag should be used to define a section in a web page for final information (copyright, acknowledgements, etc.).
The <address> Tag
The <address> tag should be used to define the contact information for the author/owner of a web page. Normally, the <address> tag is part of the footer.
Putting It All Together
Here is the code and output for a well-structured web page.
<header>
<h1>Welcome!</h1>
<p>Welcome to my header section of my web page.</p>
</header>
<section>
<h2>Chapter 1</h2>
<p>This is a section.</p>
<aside>
<p>This ia a chapter 1 aside comment.</p>
</aside>
<figure>
Figure text goes here.
<figcaption>This is a figure caption</figcaption>
</figure>
</section>
</main>
<footer>
This is my footer.
Copyright © <?php echo($year); ?> <a href="http://jimgerland.com" target="_blank">Jim Gerland</a<
<address>
JimGerland.Com (and my address)
</address>
</footer>
Welcome!
Welcome to the header section of my web page.
Chapter 1
This is a section
Using CSS Styles
HTML5 works together with CSS to better define the look of the rendered web page. For that reason, certain tags, such as <big>, <center>, and <font>, are deprecated and should no longer be used. In their place you should use CSS styles for these:
This paragraph will be centered with a larger, Brush Script font.
A Word about Browsers
The latest version of most major web browsers, Chrome, Firefox, IE 9+, Opera, and Safari, do a good job of understanding most HTML5 tags. However, each web browser seems to handle the actual display differently and not all HTML5 proposed tags are implemented by all browsers. For this reason, it is always best to test your web pages in multiple browsers on multiple operating systems and different devices: monitors, tablets, mobile, etc.
HTML5 Test (http://html5test.com/) is a good web site to test what features are supported in each web browser. Another site that lists the HTML5 browser compatibilities is HTML5 Accessibility (http://html5accessibility.com/).
