What is HTML5?

What is Html 5?

Source: http://w3.org

A Brief Explanation of HTML

Lets begin with a simple explanation of HTML. HTML is a markup language that is used to create webpages (like this one). It consists of beginning and ending tags such as:  ”<h1></h1>“.  The <h1> tag is used to show a heading. It is used to display the title of a page. Other tags such as <h2>, <span>, <div> are also a part of HTML and are used to markup a webpage.

When the internet began,  most webpages were static and the HTML tags were able to handle this static content. However, the web has grown to be very interactive. Websites today contain more than just static content. For example, audio and video are very common on webpages.

HTML 5 aims to address how the web has grown.

What is HTML5?

What is html 5

 

HTML5 is designed to be compatible with HTML 4 (the previous version of HTML). HTML5 allows developers to use MathML. It also has support for SVG. Most importantly HTML5 introduces new tags, or elements. These include: Headers, Footers, Sections, and others. Anchor element, “<a>“, can now contain any other element rather than just inline elements.

The font, center, and iframe elements are not a part of HTML5.

To ensure compatibility with older browsers, a DOCTYPE is required in HTML5. The required DOCTYPE is:

<!DOCTYPE HTML>

New Elements in HTML5

header

Header elements must contains at least one heading tag: <h1>, <h2>, etc.  They cannot contain another header element, a footer element or a section element. It also cannot contain the nav element with external links.

section

The section element is used to group together content such as paragraphs, images and headings to form a larger logical unit. The section element can contain header and footer elements. Note, this element is not a replacement for the div element.

article

The article element is basically a specific type of section. Articles are sections that can exist without being a logical part of the page. For example, a newspaper page may contain several articles.

nav

The nav element holds a section of a page that links to other pages or to parts within the page. This element can only be used to markup the primary navigation blocks.

aside

This element is used for sidebars.

figure

This element is used to present images with captions and descriptions.

legend

The legend element is used with the img element. For example, here is some markup:

<figure>
     <img src="path/to/file.mp4" type="video/mp4"/>
     <legend> This is a caption for the image </legend>
</figure>

footer

This element is used for the footer of the website. It usually contains copyright material, privacy policies and contact details. However, a footer does not have to appear at the end of a page. Footers can appear at the end of articles and at the end of sections. For example in a blog post, the footer element can contain the author’s name, publication date, and tags for the post at the end of the blog.

Audio, Video and Embedded Elements in HTML5

Currently, the object element is used to embed audio and video content. However, this element is generic and can also be used to embed flash, images, html documents, and even Silverlight content.

In HTML5, Audio and Video have their own elements. Here is an example of the video element.

<video>
     <source src="path/to/file.mp4" type="video/mp4">
</video>

The audio element is similar to the video element. Here is an example of the audio element.

<audio controls>
     <source src="path/to/file.mp3" type="video/mp3">
</audio>

HTML5 Support for Browsers

HTMl5 can be used in modern browsers however, IE7 and earlier versions will not work. For example, you cannot style section  element. This will not work:

section{
     color:red;
}

Even adding classes to these elements will not work. But a workaround is available. You can download a javascript solution here: html5.js

HTML5 is a great markup language. Its new elements have a lot to offer for web design. There is a lot more to learn about HTML5. However, I hope this article provided a good foundation and explanation of HTML5.

Leave a Reply

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

*


+ 3 = 12

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge