HTML5 Semantic Structure

November 16, 2012 // In: HTML, Web Design

Today, I’ll give you a quick overview of HTML5. After reading this article you can start your development using HTML5 and you’ll see how its easy to use and understand. Working on HTML5 is still in progress. Many Browsers support many of the HTML5 elements and APIs.

What is HTML5?

HTML5 LogoThe previous version of HTML, is HTML 4.01 which was introduced in 1999 and used widely. W3C and WHATWG think that they should work togather for the improvement of the web technology resulting in HTML5. New features are introduced to help the web application developers. HTML5 is simplified version of HTML to reduce efforts of the web developers. Rich media support is also included such as audio/video embeding on the page. APIs are also introduced to making web application development easier.

In HTML5, less but useful elements are added. HTML5 is still in progress thats why all the browsers do not added the support for some HTML5 features.

HTML5 Code Introduction

Delcaring DOCTYPE

If you have some knowledge of HTML, you may know that we declare that document contains HTML by using doctype markup tag. Some beginners don’t remember the complete line of doctype as its automatically written when you use any development tool like Dreamweaver. In the previous versions of HTML doctype is written as

As HTML5 is simplified, declaring the document contains HTML5 markup is also simplified. You can declare it like

Its the simplest form of declaring the doctype and easy to remember and easy to use.

Declaring Character set

As Doctype, defining character set is also simplified, without taking any time, here is how to can define character set in HTML5

Minimum HTML5 document

Here is the HTML5 document with minimum required tags

As you can see HTML5 document structure looks simpler as compared to its previous version.

What’s New in HTML5?

In this article I’ll talk about five factors

  1. Semantic tags
  2. Forms
  3. Audio/Video
  4. Canvas
  5. SVG

1. Semantic tags

First of all look at the picture.

html semantics via attribution

is It look familiar? Of course Yes,  We know and use this pattern over the years. As we use headers, nav etc. so many times,  so many repeatitions, so many ids we use.  why not use this pattern

html5 semantic pattern

It’s typically done using HTML5.  These semantic tags are made available so instead of having ids and classes we can use these tags directly.

Here is the list of some new semantic tags

article

Independent content part of the markup such as blog post, or articles etc.

aside

Slightly related contents or relevant information like a sidebar

figure

Grouping stand-alone contents such as Videos or images

figcaption

Its optional and is used with <figure> to provide caption

footer

could be used for footer for the content and may contains author and copyright data etc.

header

Used for header for the content, navigations etc

hgroup

Grouping several headers from h1 to h6 , or simply main headers to sub-headers

nav

Typically used for site level navigation

mark

Text to mark, reference or highlight

section

A generic document seciont, Grouping of contents usually with a heading. (It can be used within article, as article may contains many sections etc. article and section can be nested with each other.)

time

For date/time representation

2. Forms

HTML5 introduced some new input types for forms. The whole purpose of these new types is input control and validation.

  • email
  • datetime
  • date
  • datetime-local
  • color
  • month
  • number
  • range
  • week
  • url
  • time
  • tel
  • search

As an example Consider situation where we have a contact form asking for Name, Email, Website, and Phone.

contact form

required attribute

The new thing is field can be marked as required. We can make Name field required without having any external plugin.

You noticed the required attribute is stand-alone. To some people it looks non-standard, so you can also put required=”required” instead of stand-alone required attribute.

placeholder attribute

Now for the email field, Its required, validate email and also shows an example email as a watermark in the text box and that watermark will be remove when you enter something in the field.

Now for Site, it validates this field as a valid url, and its required

pattern attribute

New attribute is introduced that takes regular expression to validate the field.

3. Audio/Video

Before the release of HTML5 there was no standard for playing audio and video files on the web. Most audio/video files are played using a plugin (like flash). HTML5 introduced new methods, properties and events to play audio/video files on the web. You can easily embed your media file to your web page using simple HTML5 tags.

Let’s first talk about audio

Audio

HTML5 introduced <audio> tag to play your audio file on the web. Its pretty simple, you don’t need to use any plugin. The following example show you, how to use this tag

src attribute defines the audio file to play, and Any text between <audio> and </audio> appears only If your browser do not supports HTML5 audio element.

There are some properties (attributes) of audio element, here is some basic attributes

autoplay 

This attribute Specifies that the audio will start playing as soon as it is ready

controls

Adds audio controls like play, pause etc.

loop

Specifies that audio file will be start over again when its finished

Multiple <source> elements can be used within <audio> element. <source> elements can be linked to different audio files having different file format (like .ogg, .mp3, .wav) and the browser will use the first recognized format

 Video

The <video> element is just like <audio> element but there is something different between audio and video that there is something to see in the video thats why we need to set width and height.

Just like audio element you can also define type.

poster attribute is used just like placeholder,  it shows the image until the video is ready to play. we used it, when we want to demonstrate a video and don’t want to play it and you want to show some kind of image there.

4. Canvas

How will you draw a any shape or any arc etc? May use css or images? Don’t worry, HTML5 resolved this problem, HTML5 introduced Canvas API that removed the limitations to draw shapes on your website. We can draw anything we imagine. Convas uses javascript to draw shapes and this improves the performance of website as there is no need to use images. With canvas we can draw shapes, lines arcs, text and different patterns etc. Canvas gives us power to manipulate the pixels in images and videos.

Anything between <canvas> element displays only if your browser does not support canvas. here is the example of canvas

CSS

The above css applies the border to canvas area

Javascript

we call this javascript function draw on the page load to apply affects on convas here is the complete example html file code

Demo:

5. SVG

Now we’ll talk about SVG.

SVG stands for Scalable Vector Graphics. It’s an XML-based language for defining vector graphics using a set of elements. Its specific file format that allows you to describe vector graphics using XML. Here is the simple example

The above svg example does not require any javascript to work. SVG has some performance implecations as compared to canvas, thats why most video game apps use canvas.

Thats it!!

Create Captcha Verification in PHP
What is HTML5
  • Bablu

    Thanks….
    this is very helpful.