HTML5 for Beginners

**Andrew** · 10-07-2012

Why HTML5? The first doubt in your mind. Those who know are already aware that HTML5 is another rich web development language that can make your job much easier. If you are a developer, learner, enthuastic, or just a person who manages his personal site, then this article has something for you. Let’s go with basic concept of this language. What it is and why to go for an upgrade. On this Wikipedia gives the best highlight. A well written document that explains clearly about the changes in HTML language. According to me this language is like a Swiss knife. Whatever you want is available in this and all you need to understand is using the right syntax in right place. HTML is the oldest language that is used to create a website which will represent your content. That content can be text, video, a script or report. Today we are more advance. Our web is growing fast and so the technology. The day I remember it was not possible to view media content easily, while today you can simply download a 900kb audio streaming application on your phone and enjoy your favorite entertainment. What really matters is your site design. How it is represented in front of a user.

The wait time on site entirely depend on the structure. Poorly framed website lacks attention. If you want an interactive design then HTML5 can help you in that. This is not a complicated language. HTML5 is the latest version of traditional HTML language. I know that many developers which are in web development for more than 10years still love HTML. The only issue with this language is that you need to be a good expert is web development. Unlike Wordpress (based on php) a Novice can even run his own personal website by reading short guide on web. CMS has on the other hand added great is expanding of web. They had given a ready to use platform to those who have information but are not good in development. Simply adding a paid or open source cms you can learn to manage your own website which as removed the importance of developer mostly. But still many large website do not rely on cms only, they build up their site on the base strong technical knowhow and research. What matters the most is your content should be delivered on user’s browser quickly and properly.

Web is changing and upgrades are needed to stay in the league. And so the search engines. A good structured and clean site is also loved by search engines. HTML5 mostly aims is giving rich media content. Media and HTML will came together on HTML5 for common benefit. Today there are ample of elements on web which are merged together and used. And so CMS came into existence. If you are web designer or willing to be in this field then it is important that you must not ignore upcoming technologies. It is just your favorite markup language coming back with better look. The new version will help you to play with media content and share the same over web. It is possible to share presentations, and other more stuff. Many developers think that HTML5 will be Flash killer. Flash is the most common element on web. But does HTML5 can replace it completely. I am sure yes.

Dynamic data is requirement today. We all love to have a website with cool design and animation. But going for that you will need to learn flash or either higher a flash developer. The site to some extent is heavy. Microsoft came up with Silverlight to beat flash and provide users enhanced platform. But above all HTML5 is the most appreciated language. There can be chances that HTML5 may or may not replace flash. It depends on time. But what I found after going through number of conclusion that this is going to be the future of web designing. Still there are ample of cool examples you can find on web which are made purely in HTML5 and CSS3. Adding media support in HTML5 will make it more comfortable option for many. Let’s have a look on the language structure and elements. The language is still under development stage. We cannot hope for ideal dynamic content output, but this has begun and as the time goes on it will keep on improving.

HTML is the most common web language which was used before. But as new languages appear and are more server friendly, people has migrated to that. But still this language is not died completely. With more additional it back with simple and same structure. For those who had worked on this language before, has something new to learn. There are no changes the structure entirely. The new version now supports many things. You can check mails, or view maps, design online apps, etc. It can now render graphics and 3d content also. This platform cans server movies, games and animation files which lack in older version. It is not possible to embed 3d content on a website and for that you need to add up third party module which will increase your server usage. What actually matters is a proper framework that can help you to perform clean operation on running this type of media content. Flash is one of the most compatible today with various devices, but it needs a separate group of people who must dedicatedly design stuff, pack them and then present it on your site. This all things are quiet easier when you are working on HTML5. JavaScript another great companion for HTML5 to render interactive content. You can design these elements in JavaScript which are faster compared to flash. A small .js file simply is responsible to display your 3d menu and other content inside that are pulled from respected directories. You cannot simply imagine what you can design.

Why HTML5 will became your choice as a web developer is because of its performance. It is better and easy to manage. Also the structure which is used is common and not complicated. You can start writing in HTML5 as you are making a document. Let’s take a common example of word document. You start writing an intro paragraph and then go with the details. Images, videos, charts, etc make the document more interactive and easy to understand. Also you can add hyperlinks where needed to give references. HTML5 works in the same format. With right syntax you and simply make the document clear and simple without putting much load on your website. The site is fast, secure and simple to operate. You can work with many elements in offline mode. HTML5 is not a short language that can work with simple syntax codes, but it is quiet vast that offers you more detailed structure.

To begin with HTML5 lets have a look on the elements. The elements are objects which are used inside the language to design rich sites. There are some new additions also. HTML5 introduces a number of new elements and attributes that helps in building a modern websites. Following are great features introduced in HTML5. It is necessary that you can understand and find how all of them work. I had sorted them on the basis of usage. I had found the list on w3schools and shared here with some detail on each and every element:

To Specify Document type - <!DOCTYPE>
To place comment in any section of your website code --
To specify the address of any element - <address>
To specify a article in code - <article>
For adding abbreviation of specific word used - <abbr>
To add content aside of actual page content - <aside>
To specify html documents on web page - <html>
To specify headers based on level - <h1> to <h6>
To specify the head of document - <head>
To specify a group of introductory or navigational aids - <header>
To specify header of a section or page - <hgroup>
To specify horizontal rule on web page - <hr>
To specify the body content of web page - <body>
To add a menu list on the page - <menu>
To add meta description on the page - <meta>
To add a measurement element on page - <meter>
To add navigation links on page - <nav>
To specify noscript section of page - <noscript>
To specify an embedded object on the web page - <object>
To define table caption - <caption>
To specify citation on the web page - <cite>
To specify computer code text in any part of site - <code>
To specify common on the page - <command>
To specify a auto complete list on web page - <datalist>
To add readable data on the web page - <data>
To add a definition or description on the content - <dd>
To specify content or text deleted separately - <del>
To provide details on a element used in the web page - <details>
To add definition of certain term on the web page - <dfn>
To provide different sections of web page - <div>
To add a hyperlink - <a>
To provide a resource reference on the web page - <link>
To specify base url for each and every link placed in web page - <base>
To add a break after link in web page - <br>
To make a text bold - <b>
To specify text as italic - <i>
To specify special attributes on table columns - <col>
To specify group of table - <colgroup>
To add a definition list on the page - <dl>
To add a list on web page - <li>
To specify order list on the page - <ol>
To specify form on the website - <form>
To provide definition term separately on the page - <dt>
To show emphasized text on the page - <em>
To mark a text on page - <mark>
To add any external content on the web page - <embed>
To specify server based event target - <eventsource>
To specify a set of controls on web page - <fieldset>
To add caption for specific element only on web page <figcaption>
To perform bi-directional text formatting - <bdi>
To specify the text display direction based on web page - <bdo>
To specify a sub window on web page - <iframe>
To map a image on the web page - <map>
To specify image element on web page - <img>
To specify input field on web page - <input>
To specify inserted text on a web page - <ins>
To specify keyboard text separately on web page - <kbd>
To specify long quotation in the page - <blockquote>
To specify a option group on the web page - <optgroup>
To add a drop down list option on the page - <option>
To provide different output on the page - <output>
To specify a different a different paragraph on page - <p>
To specify object parameter on the page - <param>
To specify preformatted text on web page - <pre>
To add task progress bar on page - <progress>
To add a short quotation - <q>
To specify ruby annotation - <ruby>
To help browser who do not support ruby annotation for displaying content - <rp>
To specify ruby text of annotation - <rt>
To define that the content is not accurate - <s>
To specify a sample computer code - <samp>
To specify a script on page - <script>
To specify a section on web page - <section>
To specify a selectable list on the page - <select>
To specify small text on the page - <small>
To specify document section - <span>
To specify text as strong on page - <strong>
To define a specific style - <style>
To add subscripted text on the web page - <sub>
To add summary on the web page - <summary>
To specify superscripted text on page - <sup>
To add table on the page - <table>
To add table body on the web page - <tbody>
To add table cell on page - <td>
To add text area on the web page - <textarea>
To add tablet footer on the web page - <tfoot>
To add tablet header on the web page - <th> / <thead>
To add current date and time on web page - <time>
To add document title on the web page - <title>
To add table row on the web page - <tr>
To add non-textual annotation - <u>
To add unordered list on the page - <ul>
To add variable on the page - <var>
To add link break on page for long sentences - <wbr>
To add a push button on the web page - <button>
To specific area inside the image map - <area>
To setup graphics on the web page - <canvas>
To add a audio content in web page - <audio>
To specify group of media content separately - <figure>
To add media source on the web page - <source>
To add text for tracking a media content - <track>
To add a video on the page - <video>
To specify authentication process or generate pair on site between user and server - <keygen>
To specify a label used in form control - <label>
To specify a fieldset on web page - <legend>
To specify the website footer - <footer>

**Andrew** · 10-07-2012

Now those who had worked already on some of the above elements can easily figure out where to use what. All this references will help you to design an interactive page on html platform. One more thing which is important to mention here is defining the HTML5 structure. This helps you to understand how the web elements will work with each other. It is required that you must arrange them as per your need and place them properly so that all is displayed well. Below is as short sample of HTML5 webpage layout.

Code:

<!DOCTYPE HTML>  --- This is the document type you have to provide so that the server can identify your page easily. 
<html>  --- Then comes the language you are using which is by default HTML. 
<head>   --- This part consist of import page heading which is also display in the page title. 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>name of your website which will appear in page title</title>
</head>

<body>  --- Then comes the body of page. You can fill up all your page elements here. 
<footer> --- This parts defines the page footer 
<p>add the site footer</p>

</footer>

</body>

</html>

This is the most common layout which every beginner see when he starts working on HTML. HTML5 is not different compared to older version it has just some more additional of elements. You can make a video box, or interactive presentation, you can run online software’s, etc on it now. On web you can find ample of example on web. You can download then test them and use it.

HTML5 Frameworks :

Frameworks are pre-designed set that helps you to construct your website visually. You do not need to go much in coding part. The code is thus generated by the framework itself. A CMS is popular example of framework. Like Vbulletin, Drupal, Wordpress, etc. This are dedicated CMS system made from end user point of view. What if you just receive a packet of software which has everything that you need. You just need to click to add a web page or simply choose widget to embed social networking support on your website. That makes your job easier and you need nothing to design from scratch. It is more time saving and better. I am listing here some of the best framework that can be use to design rich website in HTML5.

HTML5 Boilerplate - A template that can be used to create html5 websites. The project does not gives you much but good for start. It cannot be entirely a framework but somewhat between a template and entire cms. You can use it for quick designing a website on HTML5.
52framework - This is an advance framework which can help you to design anything in HTML5. You can use this to make richer site. There are ready demo on the official website to give you live example what you can do with it.
G5 Framework - This is another good for starters. The framework is equipped with some most important stuff that you will need to build up html5 site. The framework allows you to manipulate ready to use codes and insert your needed page element. You can use the on free and commercial usage also.