HTML5 logo

Introduction to HTML5 – A Basic Example

You are awesome when it comes to writing webpages using HTML. But, are you aware that there is new version of HTML which is storming the world of web designing and development? This Introduction to HTML5 would provide you the necessary basic information you were looking for.

Introduction to  HTML5HTML5 logo

From being a newly introduced mark-up language, HTML 5 has now became a new syntax the modern web applications are talking with. HTML 5 has many syntactical features which distinguishes itself from its predecessor. New mark-up elements lay emphasis of meaningful structuring of web page. The two major organizations have been involved in developing of HTML5 since its initial time. One is W3C (World Wide Web Consortium) and the other one is WHATWG (Web Hypertext Application Technology Working Group).

 

What’s new?

You must be wondering how this new HTML version would help you as the user or a developer? Let me help you understand. For Developers, the introduction of Multimedia tags such as <video>, <audio> and <canvas> would relieve them from the complexity of embedding Flash objects which was cumbersome earlier. The same reason goes for the general users who were required to have the compatible plugins installed to view multimedia on a web page. Remember the Yellow coloured popup bar within your browser appearing out of no-where when you try opening up Youtube (early days) asking for Adobe Flash player to be installed. HTML 5 brings a solution in the form of native support for Media tags. Also, there are many new HTML Tags have been introduced  improvements for defining page elements such as <main>, <section>, <article>.

Writing Your First Page

Let me demonstrate a quick example which would help you understand how a basic HTML page can be developed. Also, we would understand the Tags and elements which would be beneficial for you.

To begin with, open Notepad or any other text editor (Apart from Notepad, my favourite being NotePad++, which you can grab from here). Once you have text editor open, write following lines of code and save the file anywhere on your disk with the name “MyFirstPage.html” (without quotes). It really does not matter what name you choose for this file, but it is important that you put suffix the name with “.html”.

<!DOCTYPE html> 
<html> 
<head> 
<title>My first HTML5 Web Page</title> 
</head> 
<body> 
<p>Okay, now we’re going somewhere!</p> 
</body> 
</html>

 

Let us understand what we did above.

Any HTML5 page should ideally begin with Doctype declaration. I would recommend you write this statement, although, this statement is optional.

Why to mention DOCTYPE

The reason for mentioning DOCTYPE tells the browser to understand the page as it is written. By mentioning this directive, the browsers are able to understand and interpret the HTML5 tags and elements quickly.

Next up is beginning of HTML tag and Head and Body elements enclosed within it. I would not be touching it as I am assuming you would already be familiar with HTML 4. I would be putting more HTML 5 tutorials which could be helpful for you. Meanwhile, please feel free to write comment with your suggestions/feedback about this article. Further, you may also mention the articles you would like to see up here on this blog.

Happy Learning!

Leave a Reply

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