Friday, June 8, 2012

HTML5: A brief introduction

HTML5 is the latest version of the markup language used to create web pages. It offers, among other things, some new elements for inserting media easily into a web page, such as the <audio> and <video> tags.



The <!DOCTYPE> declaration, required at the top of every web page, has also been simplified. Whereas before it required a reference to a DTD (document type definition), now you simply type <!DOCTYPE html> and proceed to type your <html> and <body> tags, it is that simple!

Here is a brief example of how to insert an audio track, just type this code into the body:

<audio controls="controls">
<source src="trackname.mp3" type="audio/mp3" />
</audio>



This is what it will look like (above), and as you can see, the 'controls' attribute is also new in HML5, and it basically displays a play/pause and volume button on the track player so the user can control the song.


Another cool addition is the <base> tag. You put it inside the <head> element and it is used to specify the base URL for all relevant URL's in the html document (for example; images):

<head>
<base href="http://www.example_site.com/images/" target="_blank" />
</head>

<body>
<img src="example_image.png" alt="Sample image" />
</body>

As you can see above, when inserting an image into the code, the base tag already tells the browser where all elements are located so you just specify the file name without the long URL description.


More on HTML5 soon!

No comments: