(Last updated: February 13, 2017)
HTML 5 will incorporate a whole new set of tags and features that will simplify the way webpages are built. All the webkit browsers support most of the new functionality and Safari is the leader of the pack. I am going to discuss some of the new tags that I have had a chance to play with.
The backbone of any webpage is its structure and layout. Creating logical blocks and arranging content in meaningful ways builds the foundation of a webpage. HTML 5 comes with a great set of structural tags. Lets walk through structure of a standard webpage from top to bottom and left to right.
- Header section: First thing you need at the top of the page is a header . This can be the company logo, tagline or a brief introduction to what the website is all about.
- Navigation: This is where all the links to the inner pages of the website are listed.
- Content Area: This can be divided into various sections depending on the type and volume of content to be shown. Each section can have one or more articles.
- Sidebars: These can contain information that is related to the content of the page being viewed. It can also have call to action buttons like Subscribe to our Newsletter, Donate Now, Join Now, etc.
HTML 5 gives us tags for achieving this structure: <header>, <nav>, <section>, <article>, <aside>, <footer>. It should be clear from the table above, which tag refers to what part of the webpage structure.
To see an exhaustive listing of all the new tags in HTML5, see the W3School’s HTML5 Tag Reference.
Media tags in HTML 5 are most exciting. However, Adobe may not think so. Because the new <audio> and <video> tags threaten the existence of Flash. If you have embedded videos in a webpage , you will know that <object> tag is a nightmare. The new <video> tag is very concise and easy to use.
This is all you need for a video. Its remarkably simple. Its similar to the <img> tag in many ways.
Ofcourse, you can add width and height attributes.
<video src="myVideo.mp4" width="300" height="400"></video>
By default, the video does not have controls like play,pause etc. But it is simple to add them too.
<video src="myVideo.mp4" width="300" height="400" controls="controls"></video>
Three more attributes for video tag are:
‘autoplay’ means that the video will start playing automatically as soon as it is loaded in the page.
‘autobuffer’ means that the video will start downloading but wont play until you tell it to.
‘loop’ means that video will start over again when finished.
Playing sound files in the browser wihout requiring plugins like Adobe Flash or other plugins, is made possible by the <audio> tag. Again, it is a fairly straightforward tag.
Other attributes for the audio tag are: autoplay, autobuffer and controls, which are similar in functionality to those of <video>.
As I said at the beginning of the post, not all browsers support the goodness of HTML 5 yet. Webkit browsers should be your preferred playground for testing, as of now. This table gives an insight into the support for HTML5 across different browsers. Surprisingly NOT, Internet Explorer is the most hostile.
Another technology which is undergoing a major overhaul is CSS. It is an equally important player in the future of the web. HTML and CSS go hand in hand. They are inseparable. I may write a post about the things I love in CSS 3, soon.