techTutorz: Understanding HTML5 tags & attributes

Hello everyone ! in this post we are going to help you understand how to use HTML5's tags & attributes so that you can easily kick start your HTML5 tutorials and easily follow our future articles & tutorials or any other tuorial you will find on the net. OK, this post is going to be the easiest one as almost all the rules & syntax are the same except some minor changes and believe us these minor changes will make your HTML writing even easier and less time consuming. So let's start with the changes made to some tags in this latest version of HTML :

Document type definition : Do you guys remember the document type definition in the previous version of html i.e, HTML 4.01 ? I know you don't, you only remember that it was long, ugly & very much time consuming. Well put all that memories into a trash because HTML5 has completely replaced & redesigned the old doctype definition into a new doctype definition tag given below :
```
   <!DOCTYPE html>
```
yes that's all guys what we have to do to define our document type. Isn't it easy, short, beautiful & very much time saving.
<script> tag : The declaration syntax of script tag to attach external scripts to html has been choped a little and made little more time saving. The previous syntax wanted you to include the following attributes : "type" & "src" for perfect declaration but HTML5 has removed the "type" attribute from declaration as it is automatically detected and you can now write your script tag declaration as below :
```
   <script src="D:\abc.js"></script>
```
<link> tag : Same syntax changes have been made to the link tag as well. The previous syntax wanted you to include the following attributes : "rel" , "type" & "href" for perfect declaration but HTML5 has removed the "type" attribute from declaration as it is automatically detected and you can now write your link tag declaration as below :
```
   <link rel="stylesheet" href="D:\abc.css"></script>
```

Ok that's all with changes to tags now let us look at the changes to syntax rules :

Case-Insensitive : HTML5 is case-insensitive i.e, you can use any type of case for tag names & attributes, you can use upper, lower & even mix them as per your convenience like below :
```
   <HTML>

      <head></head>

      <Body BGCOLOR="green"></Body>

      <a Href="www.google.com">google</a>

   </HTML>
```

Quotes are optional : The basic syntax rule that has been around for years that every attribute value must be quoted has been replaced with no quotes by HTML5 i.e, there is no more need to provide quotes for attribute values with 1 exception that every attribute value containing { > , < , , = , ' , " } must be quoted. The correct & incorrect attribute syntax are given below :

   Correct Syntax                     Incorrect Syntax
 
   <div id=hello world></div>        <div id=blah blah></div>
   <div id="hello'eorld"></div>       <div id=blah'blah></div>
   <div id=hello&gt;world></div>      <div id=hello>world></div>
   <div id="hello=world"></div>       <div id=hello=world></div>
   <div id='hello'world'></div>       <div id=hello'world></div>
   <div id='hello"world'></div>       <div id=hello"world></div>

Attributes values are optional : There are some attributes in HTML5 that does not require a value they are called empty attributes in HTML5. For example look at theexample given below :
```
  <video src="videofile.mp4" controls>
  </video>
```
Notice the control attribute above which indicates whether or not the video controls should be visible. It by default means "true". i.e, the controls should be visible. There are many more attributes like this which you will come to know in our future articles.
Closing Empty tags are optional : HTML5 makes it optional to close the tags without contents i.e, you no more have to waste your time by closing all the tags with no body contents. For example look below :
```
  <hr>
  <br>
```

Ok guys that's it and now you are ready to advance in HTML5 as your are clear with all the basic things. To learn more about HTML5 continue to follow our posts. You can also validate your HTML5 pages by going to this link http://validator.w3.org/ an uploading your code and then clicking on validate.

We hope you liked our post, please visit again and share our post with your social network.

Happy Designing !

techTutorz

Pages

Monday, April 21, 2014

Understanding HTML5 tags & attributes

1 comment :