Guide to HTML, CSS and JavsScript (University at Buffalo Version)


Chapter 12: 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 should be used to define a section of your web page with introductiory 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 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.

<main>
  <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>

Figure 12-1: Code For A Structured Web Page

Welcome!

Welcome to the header section of my web page.

Chapter 1

This is a section

Figure text goes here

This is a figure caption
This is my footer
Copyright @copy; 2017 Jim Gerland
JimGerland.Com (and my address)

Figure 12-2: A Structured Web Page Output

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:

<p style="font-size: 18pt; text-align: center; font-family: 'Brush Script Std', 'Brush Script MT'', cursive ;">This paragraph will be centered with a larger, Brush Script font.</p>

Figure 12-3: Using CSS Styles

This paragraph will be centered with a larger, Brush Script font.


Figure 12-4: Using CSS Styles Output

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/). p>

Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Copyright © 2017 Jim Gerland