a blog for those who code

Saturday 25 July 2015

HTML5 Syntax's Simplicity

In this post we are going to discuss about the simplicity of HTML5 syntax's. The changes done to the elements in HTML5 goes towards a greater simplicity. In this post we are going to look at some examples highlighting the improvements done to these elements like doctype definition, optional type attribute in <link> and <script>, uppercase tag names, attributes values are optional etc.



Simpler DOCTYPE declaration

Now in HTML5 you do not have to write a complicated DOCTYPE declarations. DOCTYPEs in older version was complicated and longer because HTML language was SGML based and that's why it required a reference of DTD like <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">. This definitions are sometimes even more complicated because as one had to choose between three different DOCTYPEs possibilities (transitional, strict or frameset). 

In HTML5, there is only one way to specify the DOCTYPE <!DOCTYPE html> which means that this page is written in HTML5 as opposed to say HTML 4.01.

Optional "type" attribute

Its no longer necessary to indicate the type="text/css" and type="text/javascript" in the link or script element respectively. Like prior to HTML5 you would have written something like <link href="main.css" rel="stylesheet" type="text/css" />, but now in HTML5 you will only write <link href="main.css" rel="stylesheet" />. 

Simpler <meta> tag

Prior to HTML5 we used to write <meta> tag as <meta http-equiv="content-type" content="text/html" charset="utf-8">. In HTML5 you can use simple syntax to specify Character Encoding as <meta charset="utf-8">.

Simplified Syntax

HTML5 tag names are case sensitive, you can use uppercase, lowercase or a mix of two. Now in HTML5 lot of elements do not need a closing tag anymore, elements like <li>, <head>, <body>, <html> etc. In HTML5 attribute values only need to be quoted if they contain a space or non-alphanumeric characters. For example <script type="text/javascript" src="scriptfile.js" /> can be written as <script scr=scriptfile.js />.

So the Simplified HTML5 document will look like

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <link href="main.css" rel="stylesheet" />
  </head>
  <body>
  //body content
  </body>
</html>

Please Like and Share the Blog, if you find it interesting and helpful.

1 comment:

  1. The author shares important functions of HTML5 in this post. These are very important functions to learn if someone is a developer of HTML5.

    ReplyDelete