HTML5 Introduction

HTML5 is markup language  used for structuring and presenting content for the World Wide Web.  HTML5 itself began back in January of 2008. It has been driven primarily by two organizations, namely the W3C (World Wide Web Consortium) and WHATWG (Web Hypertext Application Technology Working Group).

HTML stands for Hyper Text Markup Language.  A Markup Language contains specialized code for formatting and defining the style and layout within a text file.  These specialized code, or HTML elements, that is used for formatting are called tags. Web browsers read these HTML files and compose them in a way that makes pages visibly  and audibly pleasing.

As of this writing, HTML5 is only a working draft as changes to the specification are yet to be finalized. The W3C did announce in February 2011 that July 2014 would be the date when HTML5 would become the official web standard. If you want to learn more about the full history of HTML  I would recommend visiting Wikipedia.

In this tutorial, I am going to concentration on HTML5 syntax and structure.

HTML5 Features

HTML5_Logo_128Since HTML5 has succeeded both HTML 4.01 and XHTML 1.1 it has attempted to define a single markup that can be written as both HTML and XHTML syntax but at the same time it has really simplified life for the web developer and all the major web browsers have rallied behind the effort.   This includes companies like Mozilla, Apple, Microsoft, Google and Opera.

Here are some of the nice new features for ease of use and readability that HTML5 is bringing to the table.

Easier To Write

HTML5 is much easy to write than XHTML because of the following reasons:

  • HTML5 is case-insensitive
  • HTML5 allows for single-quotes, double-quotes or no quotes
  • HTML5 does not enforce closing all tags
  • HTML5 attributes are optional
  • HTML5 elements are much easier to understand and code (see below)

Note

In HTML5 you could write your tags in UPPER case, CaMeL case, Mixed case, or lower case and browsers will be able to still read it just fine. It is generally good practice for it to be written in all lower case, we feel it makes the code more readable to other developers in your team and will aid in maintainability of the code.

The DOCTYPE

HTML5

The DOCTYPE now use a very simple syntax as opposed to the older HTML4.x and XHTML which required the DTD.

<!DOCTYPE html>

 HTML 4.x and XHTML

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

The SCRIPT Tag

HTML5

In HTML5, the type attribute has been done away with so syntax is simplified.

<script src=“sample.js”></script>

HTML4 & XHTML

<script type=“text/javascript” src=“sample.js”></script>

HTML5

In HTML5, the type attribute has been done away with so syntax is simplified.

<link rel=“stylesheet” href=“styles.css”>

HTML 4.x and XHTML

<link rel=“stylesheet” type=“text/css” href=“styles.css”>

The HTML Tag

HTML5

<html lang=“en”>

HTML 4.x and XHTML

<html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”>

HTML5 Document Format

HTML5_document1

The general HTML5 syntax has also been enhanced in many ways.  They have added several structural or semantic elements.  These semantic elements have actual meaning.  But meaning to whom? These semantic elements describe their meaning and purpose to both the browser and developers. You may already be familiar with some of these semantic elements as these have not changed from earlier versions of HTML. These include:  <head>, <table>, <form>, and <img>.   HTML5 also introduces several others including:  <header>, <nav>, <article>, <aside>, <section>, <figure> and <footer>.   There are many more elements available but right now not all browsers support all the new features.  Limited commitment from the major browsers is the prime stumbling block but as of right now most have promised to get on board with future releases.

 

Sample HTML5 page

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="Description goes here...">
    <meta name="keywords" content="keyword1, keyword2, keyword3, etc">
    <meta name="author" content="Amaury Valdes">
    <title>Hello World</title>
  </head>
  <body>
    <header>
      <h1>Hello World Sample</h1>
      <h2>This is my first header</h2>
      <h2>This is my second header</h2>
      <h2>This is my third header</h2>
    </header>
    <article>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
      nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
      sunt in culpa qui officia deserunt mollit anim id est laborum</p>
      <section>
        <h1>Chapter 1</h1>
        <h1>Chapter 2</h1>
        <h1>Chapter 3</h1>
      </section>
    </article>
  </body>
</html>

tryitout

Semantic Elements

Helpful Tip for New Semantic Elements in HTML5

HTMLDescription
<article>According to the W3C, “The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.”
<section>The HTML section element represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.    This would include things like chapters, headers, footers, or other sections of a document that make sense.
<header>This element represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section’s heading, a search form, and so on.
<footer>A footer typically contains information about who wrote the section, copyright data or links to related documents.   Footers need not appear at the end of the document, although they typically do.
<nav>The HTML nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
<aside>The HTML aside element represents a section of the page with content that is somehow related to that of the main page.  These sections are often represented as sidebars or inserts in magazines.

Other Related Posts

  • HTML5 Introduction
    Learn the basics with this easy to follow introduction to HTML5, its features and new elements
  • HTML5 Elements
    This post describes all the new elements that have been introduced to HTML5 with an emphasis on the Semantic Web.
  • HTML5 Web Forms 2.0
    Learn the basics of building HTML5 forms for building web page controls, such as labels, text fields, password fields, hidden fields, radio buttons, checkboxes, fieldsets, legends, reset buttons, and submit buttons.

Please Share Us on Social Media

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Leave a Reply

Your email address will not be published. Required fields are marked *