Getting Started With HTML5

25 aug. 2022

Beginner

5K Views

13 min read

HTML5 is a buzzword when it comes to Web Development, almost every web development blog/tutorial/video stresses 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 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 descriptions 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 an 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's 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 it 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.

We can learn any programming or the scripting language but the view layer of the software development will always be an HTML document that is the collection of visual elements used to show the processed data, hence, learning and having knowledge will definitely put an added advantage to the individual's career growth.

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 a 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 an 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 was rooted for an 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 an 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 a 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 render glitches as a result. There are workarounds 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 an HTML5 web page and try to compare it with the structure of an XHTML webpage.

Structure of an 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 that are not empty must end with a closing tag.
Elements that 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

HTML5 is the technology that is the future of the web. and due to its revolution to a great extent, It is being adopted by most of the technology giants, as it is easy to write and powerful beyond measure, and when it comes to the learning curve, it is so easy to get started with compared to other programming and scripting languages. People are doing amazing things with HTML all the time now.

To summarize this article, it can be said that we have learned about the history of HTML, have seen how HTML5 came into the picture after a lot of struggles and talks. We have also seen that major browsers support HTML5 readily and in spite of 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.