HTML5 Tutorial for Beginners
HTML - An Introduction
Before we start up with HTML5, lets have a brief overview about what is HTML and how it is used in the web since HTML5 is the latest version of HTML.
- HTMl is a markup language which remains as a standard for creating and defining the structure of the webpages and make them readable by different internet browsers.
- HTML was originally created by Tim Berners-Lee, (a British based computer scientist), as a means of information exchange
between his colleagues. Tim Berners-Lee contributed much to the world wide web by inventing a first successful
communication between a HTTP client and server and hence referred as the inventor of the World Wide Web. He is the founder of the World Wide Web Consortium (W3C) which is a International Standards Organization responsible for defining and maintaining standards for the World Wide Web(WWW).
- HTML stands for Hypertext markup Language - Where Hypertext refers to the text that contains links to other web pages or other sections/areas on the same page;
Markup is a Language with set of tags carrying some instructions on how a page should be displayed on a web browser.
- HTML comprises of several elements put together in a file which ends with a extension of .htm or .html. These elements are nothing but some tags placed within the HTML content.
- Here is what a HTML element looks like: <H1>Your Heading Goes Here</H1>
Here <H1> is start tag; H1 is the Tag name for one of the top-level heading on a webpage where <H6> being the smallest heading tag; </H1> is the end tag for this element;
"Your Heading Goes Here" is the place where you type your custom heading for a page or for a paragraph.
- HTML TAGs are tag names surrounded by two angle brackets. Eg: <TITLE>. Here TITLE is the tag name. Most HTML tags are written in pairs like start and end tags. Some are written with no end tags like the <BR> and <HR> tags.
- These Tags as their name indicates, instruct the content to be displayed as per the underlined rules described in the respective tags. For example, Title tag describes what the Webpage's Title should be when the page is displayed on the webpage.
- HTML 4.01 or simply HTML 4 was the last stable version of HTML also the immediate predecessor to HTML5. HTML 4 was published in late 1999 since when the internet era began to
change rapidly and continue to shape the way the web worked.
Now lets move onto HTML5, as we had spent enough time with HTML 4.01 since the time it was introduced.
What is HTML5?
As obvious it is, HTML5 is the latest standard of HTML for creating web content and comes with an array of new features and endless possibilities where their predecessors lagged miserably.
HTML5 is not fully implemented as of now which means that it is not yet supported by all browsers available on the market.
Although most modern browsers with their latest version includes support for most features, some of old browsers don't even recognize it's new features. Anyhow,with the rapidly growing field of smart phones and other handhelds, HTML5 created a buzz among the web developers and browsers alike by showing them the tons of new features and support for making mobile-friendly web applications without loosing the look and feel of plain old HTML.
HTML5 introduces several new features which include:
- Introduces several new tags and elements for creating more dynamic webpage content.
- New meaningful semantic tags and Elements for creating clean webpage layouts.
- HTML5 is backward compatible where most of the older tags can be used with HTML5 as well without having to replace the old tags completely from your existing webpages. Though HTML5 does exclude a handful of older tags for good.
- HTML5 Introduces Audio and Video tags thus enabling strong support for Multimedia.
- Introduces a new CANVAS element for drawing 2D/3D graphics.
- Introduces interactive features like Drag and Drop by which you can create an interactive web application like games where you can allow your user to do some drag and drop.
- A better and cool way to create your Forms by including email, dates, months and sliders etc.
- Makes use API to handle the ever growing needs of Internet by providing a way to find your users geological location (of course with their consent) which helps the webpage to display location specific information.
- One of the strong hold of HTML5 lies in the fact that it can empower a web application which is device-independent i.e One simple web application for all devices.
- HTML5 comes with a new feature called "Local Storage" a super way to remember the user inputs even after the browser window is closed or refreshed.
- Apart from the above, there are few more features to it's credit which will be explained later.
With this high note, let us move onto the details like how the above said features are used in real time web applications. But before that we will see how a new HTML5 webpage will look like and how it is different from it's older counter part.
Comparing HTML5 Page with Older HTML Page