Getting Started With HTML5

Anurag Sinha  Print 
08 Sep 2018
 
Beginner
415

HTML5 is a buzzword when it comes to Web Development, almost every web development blog/tutorial/video stresses on the importance and vitality of HTML5. But prior to even getting started with HTML5, it would make great sense to know and learn about its predecessor i.e. HTML. How did HTML come into existence? What factors did it have to encounter and else? In my humble opinion, reading about the history/advent of a topic actually makes learning interesting and sets the pace.

History

In around 1980, Tim Berners Lee, father of the Web as he is fondly called, worked on a system to use and share documents. It was named as ENQUIRE. ENQUIRE laid the foundation of our very own HTML. There was a great demand for automatic information sharing between scientists in universities and institutes all around the world in the late 1980s, and thus World Wide Web (www) was invented along with HTML as its publishing language. This all happened in the year 1989.

The first set of HTML’s description written by Lee had 18 elements which were very simple to start with. These elements were pretty much inspired by SGML (Standard Generalized Markup Language) based documentation format. SGML was internationally agreed upon method for dividing texts into structural units such as paragraphs, headings, list items etc.

Lee even invented HTTP, a simple protocol to retrieve other documents’ texts via hypertext links. Today HTTP is Web and Web is HTTP. We are totally indebted to Tim Berners Lee and others for their contributions.Further learnings about the history of HTML can be referenced at https://www.w3.org/People/Raggett/book4/ch02.html

Why should one learn HTML

Much has been talked about the history and stories about HTML in the above section, but shouldn’t one ponder, why should one learn or study about HTML. It is a very valid question. Let me try to answer it in layman terms one wants to start doing/learning web development, HTML is the starting point, and one of the most important pillars. Web browsers, on which the web applications/websites are viewed only understand HTML, they can only interpret HTML.

Whatever language/platform you want to code your application in, be it ASP/ASPX, be it JSP, or be it PHP or even Python, the code ultimately gets rendered as HTML so that the browsers can interpret it and can display to the end user. This is the most important reason to learn HTML for web development. In fact HTML along with CSS and JavaScript are the three musketeers of web development.

Version History of HTML

Let’s see as to how many revisions/versions has HTML gone through before starting to learn about HTML5.

1990-1995
HTML encountered handful of versions.
1995
HTML 3.0 came into existence.
1997
HTML 3.2 came into existence.
1998
HTML 4.0 was released
1999
HTML 4.01 came into existence.
2000
W3C group (World Wide Web Consortium) began working on a XML based equivalent of HTML called as XHTML. HTML was almost discontinued by W3C.
2004
Apple, Mozilla, Opera announced that they wanted to support HTML as against XHTML and created a group called as WHATWG (Web Hypertext Application Technology Working Group) and began working on a proposal.
2006
W3C announced their support to WHATWG.
2008
1qHTML5 working draft was released.
2012
W3C and WHATWG went their separate ways. W3C rooted for a HTML5 recommendation, while their counterpart the WHATWG gave their votes to a Living Standard for HTML so that the specification can be easily maintained and feature addition would be plausible.
2014
HTML5 was released by W3C

Introduction to HTML5

As stated in the above table, HTML5 came into existence in the year 2014, since then it has caught the world’s attention. It is the core markup language for the web. A sample HTML5 document would be something as below

 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="UTF-8"/> 
 <title>Sample HTML5 Document</title> 
 </head> 
 <body> 
 Lorem ipsum dolor sit amet, 
 consectetur adipiscing elit, 
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 </body> 
 </html>

We can see in the above code snippet that a HTML5 document starts with a DOCTYPE declaration. Here the first question which arises is as to what is this DOCTYPE? Well, appending a DOCTYPE to the HTML5 document primarily performs couple of tasks

  • It identifies which dialect/version of HTML is being used.

  • It affects the browser’s ability to render the HTML document in Standards mode.

  • Let’s have a look at the example.

  • <!DOCTYPE html> says that HTML5 is being used, whereas

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> says that HTML4 is being used.

  • If a DOCTYPE isn’t mentioned in the HTML document, browsers will work in Quirks mode (Quirks mode is also known as the Compatibility mode) and few HTML features won’t be available.

Example

IE9 (Internet Explorer 9) will not identify the canvas element in Quirks mode. Further reading on DOCTYPE can be done at https://html-differences.whatwg.org/#doctype We can also see in the above snapshot that there’s a meta tag with charset as UTF-8. Let’s see what’s this meta tag. As per W3C recommendations, we should always specify the encoding for our HTML document, else we risk that the characters of our document may be incorrectly interpreted.

The universal character set used is UTF-8 (Universal Character Set – Transformation Format – 8 bits). a meta tag is used to define the encoding to be used. Further readings on meta tag and UTF-8 can be referenced at https://www.w3.org/International/questions/qa-html-encoding-declarations

HTML5 Browser Support

HTML5 is supported by all the major browsers.

Chrome, Firefox, Opera, Safari, IE9+ support HTML5 readily. However, IE7/8 and other previous versions do not support the new HTML5 tags like footer, canvas etc. If we use them, we will get issues and rendering glitches as a result. There are work-arounds in the form of the html5shiv https://github.com/afarkas/html5shiv and Modernizr https://github.com/Modernizr/Modernizr polyfill scripts. It is recommended to add one of the above mentioned libraries to our code so that HTML5 tags can be supported in older IE versions.If we aren’t comfortable in using JavaScript code to support HTML5 in older IE versions, then we should cease to use the newer HTML5 tags, rather we should use <div> tags and add relevant classes for proper semantics.

Getting started tools/IDE

A text editor and a browser are required to play with HTML5, so even plain simple Notepad works. However, there are few editors which provide an awesome experience while working with them, they have HTML templates and even have intellisense.

  • Visual Studio Code https://code.visualstudio.com/download

  • Notepad++ https://notepad-plus-plus.org/download/v7.5.8.html

  • Sublime Text https://www.sublimetext.com/3

  • Bracketshttp://brackets.io/

  • Jetbrains Webstorm https://www.jetbrains.com/webstorm/download/#section=windows

  • Atom https://atom.io/

  • Visual Studio 2017 and earlier versions as well https://visualstudio.microsoft.com/downloads/

  • There are few online editors as well

  • https://htmlfiddle.net/

  • https://html5-editor.net/

  • https://jsfiddle.net/ and so on.

    Let’s have a look at the basic structure of a HTML5 web page and try to compare it with the structure of a XHTML webpage.

Structure of a HTML5 webpage

Though different webpages/websites look different, they all possess a basic common structure. To follow the common structure and semantics, HTML5 provides dedicated tags. For ex

  • header<header>

  • navigation bar <nav>

  • main content<main> with various subsections such as <article>, <section>and <div> elements

  • sidebar <aside>

  • footer <footer>

A sample HTML5 document structure can be as below

 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="utf-8"> 
 <title>My page title</title> 
 <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer--> 
 <!--[if lt IE 9]> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> 
 <![endif]--> 
 </head> 
 <body> 
 <!-- Here is our main header that is used across all the pages of our website --> 
 <header> 
 <h1>Header</h1> 
 </header> 
 <nav> 
 <ul> 
 <li><a href="#">Home</a></li> 
 <li><a href="#">Team</a></li> 
 <li><a href="#">Projects</a></li> 
 <li><a href="#">Contact</a></li> 
 </ul> 
 </nav> 
 <!-- Here is our page's main content --> 
 <main> 
 <!-- It contains an article --> 
 <article> 
 <h2>Article heading</h2> 
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 <h3>subsection 1</h3> 
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 <h3>subsection 2</h3> 
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 </article> 
 <!-- the aside content can also be nested within the main content --> 
 <aside> 
 <h2>Related</h2> 
 <ul> 
 <li><a href="#">Go to Page1</a></li> 
 <li><a href="#">Go to Page2</a></li> 
 <li><a href="#">Go to Page3</a></li> 
 <li><a href="#">Go to Page4</a></li> 
 <li><a href="#">Go to Page5</a></li> 
 </ul> 
 </aside> 
 </main> 
 <!-- And here is our main footer that is used across all the pages of our website --> 
 <footer> 
 <p>©Copyright by me. All rights reversed.</p> 
 </footer> 
 </body> 
 </html> 
 

Structure of a XHTML web page

The DOCTYPE declaration is different than HTML5.A sample XHTML document is given as below

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml"> 
 <head> 
 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
 <title>My Page Title</title> 
 <body> <div id="tableofcontents">Table 1<br /> 
 </div> 
 <div id="history"> 
 <h1>History</h1> 
 <p>We will now discuss the <span>history of cultivation</span>.</p> 
 </div> 
 <div class="subsection"> 
<h2>Before Machines</h2> 
<p>Everything was manual.</p> 
 </div> 
 <div class="subsection"> 
 <h2>After Machines</h2> 
 <p>Things have been automated.</p> 
 </div> 
 </body> 
 </html> 

XHTML’s maintenance is easier as compared to HTML because XHTML is based upon XML and XML syntax rules are strict as compared to HTML. Some of the rules are

  • Names of elements and attributes should be in lower case.

  • All attribute values must be within quotation marks.

  • Elements which are not empty must end with a closing tag.

  • Elements which are empty should end with a space and a slash.

  • Though HTML’s margin of errors is greater than XHTML, HTML5 is the way to go now because of the advantages listed below. Having seen the strict culture of XHTML, let’s talk about the advantages of HTML5

  • Cleaner/Easier markup

  • Consistency

  • Supports rich media elements

  • Offline Application Cache

  • Geolocation API

Summary

To summarize this article, it can be said that we have learnt about the history of HTML, have seen how HTML5 came into picture after a lot of struggles and talks. We have also seen that major browsers support HTML5 readily and in spite having less stricter rules than XHTML, HTML5 is the markup language for the web. Articles to follow will talk about HTML5 and how to write industry ready code with it.

Hands-on Learning
+