|
HTML5 has been quite popular and rightly so. It improves over the
older XHTML commands and fixes the issues that users had faced with it.
In addition, it also makes coding somewhat easier. Here are 10 features
of HTML5 that will help you in your coding endeavours. |
|
1. New Doctype: HTML5 now has the new Doctype command, which is easier to use and remember.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br /><br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. The Figure Element: In HTML5, you can easily associate the caption with an image.
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
3. <small> Redefined: The <small> element can be used in order to make subheadings that are similar to the logo. In HTML5, it has been redefined to mean small print, which can be used to write things like copyright statements etc. on your website.
4. Types for Links and Scripts are not required: HTML5 does not require you to add the type attribute to your script and link tags.
5. Quotation marks: While you are still allowed to close your elements with quotation marks, it is not necessary in HTML5.
6. Making editable content: In newer browsers, you can use the attribute content editable to make the content within an element editable. This allows the user to edit text held within that element and also within its children. It can be a very useful feature in some cases.
7. Email Inputs: Have you seen how some websites only take valid email addresses? Well, this is done by applying a type of ‘email’ to the form inputs on your website. This tells the internet browser to only allow strings that are matching the valid email address structure. This is not supported by all internet browsers though.
8. Local Storage: In newer and advanced internet browsers, you can make the browser remember what the user has typed. This remains in the memory even after the browser is closed or refreshed. This is because of local storage.
9. Header and Footer: HTML5 brings you the
and elements. This gives it more semantic structure.
<header>
...
</header>
<footer>
...
</footer>
10. Internet Explorer: Unfortunately, Internet Explorer still has problems with HTML5. If you need HTML5 to work correctly, then you have to style your elements properly. Otherwise all elements have a display of inline by default on IE.
header, footer, article, section, nav, menu, hgroup {
display: block;
}
IE would fail to read these stylings properly because the browser doesn’t recognise what a header is. To fix this you have to do the following.
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
No comments:
Post a Comment