HTML5: Latest Features
There are some very user-friendly and efficient features that have been added to HTML5 and which have made HTML5 far more powerful and efficient as compared to the previous versions. Some of the differences are presented:
Consider a code in HTML4:
|
1 2 |
<img src="path/to/image" alt="About image" /> <p>Image of Mars. </p> |
In the above code, there unfortunately isn’t any easy or semantic way to associate the caption, wrapped in a paragraph tag, with the image element itself. HTML5 rectifies this, with the introduction of the <figure> element. When combined with the <figcaption> element, we can now semantically associate captions with their image counterparts. A better alternative is presented in HTML5:
|
1 2 3 4 5 6 |
<figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure> |
While using HTML4, it was required to specifically add type attribute to your link and script tags. For example:
|
1 2 |
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src="path/to/script.js"></script> |
With HTML5, This is no longer necessary. It’s implied that both of these tags refer to style sheets and scripts, respectively. As such, we can remove the type attribute all together.
|
1 2 |
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script> |
HTML5 when used with new browsers has a nifty new attribute that can be applied to elements, called content editable. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body> <h2> To-Do List </h2> <ul contenteditable="true"> <li> Break mechanical cab driver. </li> <li> Drive to abandoned factory <li> Watch video of self </li> </ul> </body> </html> |
Some other latest features of HTML5 would be discussed in future articles.
BlueHost | HostGator | Media Temple
