HTML Tutorial – Getting Started with Html5

html 5 image
0 Flares Twitter 0 Facebook 0 Google+ 0 StumbleUpon 0 Pin It Share 0 0 Flares ×

In recent years there is much talk and mention in the websites with HTML5 technical content. For those who do not have much technical knowledge, they will not understand what it means, how important it is and in practice what is the difference with other specifications like HTML4 or XHTML.

There are several versions or specifications of HTML, are the following:

HTML the first specification of 1991

HTML 3.0 proposed by the newly formed W3C in 1995

HTML 4 1999

XHTML 2002

HTML5 being used currently but still under development

HTML5 emerges as a logical evolution of previous specifications and the need to achieve the following objectives:

  • Make information, and how to present it, as widely as possible.
  • Summarize, simplify and simplify the code used.
  • A language that makes pages compatible with all web browsers, including those of mobile phones and other modern devices currently used to surf the Internet.
  • Remove restrictions that make the code more popular and affordable


Main standards in HTML language


Possibly the most used language in the pages of Internet is HTML4, although it is already almost obsolete due to its limitations. Many CMS (software made to easily create web pages on the Internet) are designed to create the pages using this specification, so they continue to add many of them to the millions accumulated on Internet servers. A page written in HTML4 may be displayed differently in different browsers, or it may not be displayed at all. It is impossible to represent in this language a multitude of special characters such as Unicode, which is so common in the pages of this site.


Finally, HTML5 arrives, collects all the advantages that introduced the XHTML and eliminates enough restrictions and limitations. It is lighter because the code is simpler and simpler, which allows pages written in this language to load faster in the browser. If that were not enough, it introduces an infinite number of options that were previously closed to web pages, such as directly inserting video (not flash), music, and almost any element. If you are interested in positioning your page in Google, you should know that a page written in this language is prioritized by the search engine, compared to others with the same content but written using other languages.

Elements supported by HTML5

Abbr, address, area, article, aside, audio, b, base, bb, blockquote, body, br, button, caption, cite, code, col, colgroup, command, datagrid, datalist, dd, Iframe, hr, hr, hr, h4, h3, h4, h5, hr, hr, html, header, shape, fieldset, dfn, dfn, Img, input, ins, kbd, label, legend, li, link, map, mark, menu, meta, meter, nav, noscript, object, ol, optgroup, option, output, Rp rt ruby samp script section select small source span strong style sub sub table tbody td textarea tfoot th thead time title tr tr ul Var, video

Example of required code in HTML5

<!DOCTYPE html>

<html lang=”en”>


<meta http-equiv=”Content-Type” content=text/html; charset=windows-252”>

<title>Required code for an HTML5 page</title>


Using geo-location in HTML 5

Geo-location allows the developer to detect the user’s location, which can be used for different purposes, at the same time the user can know his exact location with the browser, without having to go to other applications. This feature is more effective on mobile devices, more so if they have GPS.

How to validate forms in HTML5?

To correctly validate forms in HTML5, INPUT elements that contain the NAME attribute must be enclosed in a DIV container, for example:

<form method=”get” action=>


<input type=”text” name=”q” value=””>

<input type=”submit” name=”” value=”search”>



How to validate tables in HTML5?

The following attributes can no longer be used in the framework of the tables: border, cellpadding, cellspacing and width.

In the case of border and width should be specified in the CSS style, the other two do not validate or use them in CSS, its effect gets achieved using PADDING.

Do it as in the following simple example:

<table class=”table”>




<style type=”text/css” media=”screen”>

.abla {width: 400px; border-collapse: collapse;}

.txt padding: 6px; border: 1px solid black;}


How to validate iframe in HTML5?

The following attributes can no longer be used in iframe: scrolling, frameborder, marginwidth and marginheight. You need to specify border and margin in CSS.

To avoid scrolling you can use overflow-x: hidden; overflow-y: hidden; in CSS.

It introduces the use of: seamless which states that the iframe should look as if it were part of the page, it is used: seamless = “seamless”. It maintains the use of the attributes: width, height and src.

How to use object to insert flash and other objects in HTML5

The object element allows you to insert flash movies, audio, video, PDF, etc. The following attributes are no longer valid: align, classid, codebase, codetype, standby, border. It is possible to use: data that specifies the URL of the file, type, width and height. The <param> parameter is required to ensure compatibility with Internet Explorer.

Use the following example to insert a flash movie.

<Object type=”application/x-shockwave-flash” width=”740” height=”470” data=”../flash/horoscopo.swf’>

<Param name=”movie” value=”../flash/horoscopo.swf”></Object>

So, this was the guide of HTML5 for the beginners. There is a lot more to learn in HTML5 which will be shared in several upcoming posts. HTML5 is not a big thing alone; it is a collection of individual features. So, you cannot detect support for HTML5, because that does not make the slightest sense. But you can detect support for individual features like canvas, video, and geo-location from this article.

About Sarah Feldman

has written 1 post in this blog.

Sarah Feldman has years of experience in the digital marketing sectors and content writing. She has worked for several companies of Europe, America, UK, and Middle East. She is currently working as Blogger and Digital Marketing Expert in a web design company in Dubai named as Digital Express.

Leave a Reply

Your email address will not be published. Required fields are marked *