Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>
Idioma: En

HTML vs HTML5

The HTML5 standard was finalized and released in 2014, and it is what Html should have been when the first version was launched all those years ago. HTML 2.0 was the first true ‘standard’, published all the way back in 1995. Two years later, HTML 3 was published. Another two years later, HTML 4.01 was introduced and it has been the work horse of the internet since then.

Related Articles

The first ‘working draft’ of HTML5 was introduced way back in 2008, with surprisingly broad browser support back then. The HTML5 that we know today is widely different from the HTML of the past, and here we are going to discuss just what the latest standard changed with its release. Since HTML5 was launched, it has been widely accepted and all its features and capabilities are now supported by all major browsers. There are still a few hiccups here and there, but overall HTML5 has assimilated well with the modern online experience.

As a web developer, you could either be an old pro who has mastered the older standards or a newbie curiously watching the development of new standards on the sidelines. Either way, you have to eventually begin transitioning over to HTML5.

HTML Vs HTML5 Infographic

The first step to transitioning to HTML5 or learning is to understand the difference between the older standard and the latest one. Here are some key differences between HTML and HTML5:

  1. HTML5 is a living language

HTML5 is a living language, a work in progress. It is amazing to see what HTML5 can do, but it is also important to know that HTML5 is not a fully standardized version like HTML4, which is more than ten years old and a set standard, unchangeable.

If you are getting into HTML5, you will have to make some updates. Attributes and Elements are added and regularly modified every year. This also depends on how much you use rich elements, but it is definitely one of the risks involved when using a fluid, changing language like HTML5.

  1. HTML5 is simpler

While HTML5 does have risks like constant updates, it is generally easy to keep up with the changes and updates because of the simpler syntax as compared to HTML4. For instance, you have a very simple declaration at the start of the page to set it as an HTML5 page:

The simple Doctype declaration is one of the simplifications made in the HTML syntax, which is compatible with all versions from HTML4 and all the way back to XHTML1. However, HTML5 is not compatible with SGML.

  1. The New Element

HTML5 comes with a number of new elements and eliminates several others (which we will cover in a while), but one of its key added elements is , which has hugely impacted the use of Adobe Flash in websites. Although Flash is still in use by several websites, HTML5 has been adopted many and a lot of people think that it will make Flash obsolete eventually. Only time will decide that; until then, HTML5’s cascade element has proven itself to be a good alternative to Flash.

The element can be used to draw graphics with various shapes and colors via scripting, usually JavaScript. The element is simply a container for the graphics; you need to use a script to define the graphics.  By default, a canvas is a rectangular area with no content or borders. The market is like so:

It’s important to specify an id attribute as well as width and height for defining the canvas size. You can add a style attribute to define borders.

You can use JavaScript as well, like the following example:

var c = document.getElementById(“myCanvas”);

var ctx = c.getContext(“2d”);

ctx.fillStyle = “#FF0000”;

ctx.fillRect(0,0,150,75);

  1. The new and
    Elements

Another big addition that HTML5 comes with are the new and

elements, indicating a new web anatomy. With these new tags, there is no longer a need to identify the two elements with a
tag.

The specifications define the header element as representing a group of ‘navigational’ or ‘introductory’ aids. As such, the element can be used to define an introduction to a section of a page, or to the entire page itself. Here is a code snippet that uses the header element.

               

Title

               

                               

By Author Filed in Web 2.0

 

               

               

Body of text

The HTML5 specifications refer to the foot element as representing ‘a footer for its nearest ancestor sectioning content or sectioning root element’, and generally containing information regarding the section, like the author name, copyright data, links to documents, and so on.

Logically, the footer is placed at the bottom of the web page. But it can also be placed at the end of a page section. Here is some example coding that uses the footer element:

Content title

               

                               

By Author Filed in Web 2.0

 

               

               

Body of text.

               

                                Tags: Command Prompt, Compass, CSS, Sass, Terminal

               

               

                               

10 likes

               

Here, the footer contains post tags and the post ‘Facebook likes’.

  1. The and
    elements

Now, if you went through the above examples, you would have noticed a few more new elements, like the . This element, along with the

element, enables you to mark specific sections of your layout and are hugely beneficial for search engine optimization. The article element is specified as representing a self-contained component of a web page to be independently reusable or distributable. This could be a newspaper, forum post, magazine article, blog entry or anything else.

The article element generally has its own heading in a header element, and maybe even a footer, as you saw in the above example. You can simply think of the element as a blog entry or independent piece of content; the tricky part is identifying what is independent. Simply put, an independent piece of content is one that makes sense by itself.

A good way to know whether a piece of content is independent is by asking whether it makes sense within an RSS feed. Blog articles and static pages do make sense, and some sites have comment feeds. But a paragraph in article would not make any sense separate from the rest of the content. Here is a code snippet with footer and publishing tags.

 

   

Content title

   

Published:

 

 

Body of text

 

   

Creative Commons Attribution-ShareAlike License

 

The section element, according to W3C specifications, representing a ‘generic section’ of an application or document. It could be confused with the

tag, so let’s clear out the confusion right now. The section tag is used when the content within it has to be grouped separate from the rest of the page with a single theme, and when it should be seen as an entry in the page outline. The div element, however, is specified as a ‘generic container’, which means that it is not separate from the main page itself, aside from its own title, language and class attributes.

  1. New and
    Elements

HTML5’s new

and elements are part of the Interactive Elements specifications but are among the least talked-of elements by developers. Given the fact that the web has changed into more just linked paged and documents, these elements are a welcome addition for greater web interactivity.

The

element is not to be confused with the



This post first appeared on Free Online CFA Calculator Training Course | EduCB, please read the originial post: here

Share the post

HTML vs HTML5

×

Subscribe to Free Online Cfa Calculator Training Course | Educb

Get updates delivered right to your inbox!

Thank you for your subscription

×