HTML5 Explained

What is HTML5?

HTML is the code used to program what you see on the screen when you view a website in a browser. HTML5 is the latest incarnation of this language, which has been in it’s previous form since 1997. With such an increase in the use of video, audio, graphics and animations in websites, HTML5 has extra elements to make programming this easier, and also to make websites more compatible with different browsers and search engines.

HTML5 reflects the way we are using web pages, in terms of the structure, the flow and the media we use on web pages. It has been designed with developers in mind to make web programming easier, more legible and more interactive.

HTML5_Logo

HTML5 Page Structure

Where we used to use <div> and <span> elements in conjunction with id references, HTML5 gives us new tags to define the common areas of websites that have evolved over time. These elements help make the code more legible to debug and interpret, such as:

  • <header> & <footer>  Self-explanatory
  • <nav> Navigation links
  • <section> Defines a section in the document
  • <article> Defines an article
  • <command> Command button
  • <details> Defines additional details that the user can view or hide in a drop-down style
  • <figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
  • <figcaption> Defines a caption for a <figure> element
  • <hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
  • <mark> Defines marked/highlighted text
  • <time> Defines a date/time

Dynamic Page Elements

Form Input Types

There are many new form input types. Some examples are:

  • Date- Defines a date – year, month, day
  • Datetime & datetime-local – Defines a date and time in one piece
  • Month, week- Defines the month or week plus the year
  • Color- Allows users to select a colour from a pop-up colour picker
  • Range- Presents the user with a slider control to select a number within a predefined range
  • Email, url-Defines an email address or url with a basic syntax check (ie a@b.c or http://a.b)

an auto-complete for forms with a limited selectionForm Input Types
There are heaps of new form input types. Some examples are:
date Defines a date – year, month, day
datetime & datetime-local Defines a date and time in one piece
month, week Defines the month or week plus the year
color Allows users to select a colour from a pop-up colour picker
range Presents the user with a slider control to select a number within a predefined range
email, url Defines an email address or url with a basic syntax check (ie a@b.c or http://a.b)

HTML5- Graphics and multimedia

<canvas> Defines a space for graphics to be drawn using JavaScript. Types of drawing tools for use with the <canvas> element include:

  • Colors, Styles, and Shadows (including gradients and patterns)
  • Line Styles
  • Rectangles (and squares)
  • Paths (ie to create odd shapes and polygons)
  • Transformations (scaling, rotating, moving)
  • Pixel Manipulation (bitmapping and getting information about graphic objects)

<video> Embeds a video player on the screen. However, different browsers play different video formats so to use this at the moment you need to include all the formats which may be supported: mp4, ogg and WebM

<audio> Embeds an audio player on the screen. Like with video, different browsers support different formats. To be sure you need to include formats for all the major browsers: mp3, ogg, aac. Wav files will play in some browsers but still (at the time of this article) may be too big for music to load quickly enough.

Mobile and responsive design & HTML5

Using <meta> tags can send information directly to specific devices. For example,

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=0.5 maximum-scale=1.0, user-scalable=yes/no”>

Would tell a device to use:

  • the full width of the device screen
  • apply an initial scale
  • determine the minimum and maximum scale the user can use
  • control whether the use can zoom in or not

HTML5 also works in conjunction with CSS3 to detect which device the page is being viewed on, and lay the webpage out accordingly (actually this has been around since HTML4 and CSS2, but is much more relevant with today’s devices).

Between HTML5’s new element design and CSS3’s step-up in layout and graphics options, a new platform has been created for the next level of web design and development, offering greater control, flexibility and legibility to make web design not only more powerful, but easier for developers.

 

Other Articles you might be interested in

images

Backing up your website using cPanel

How to back up your website in CPanel The idea of backing up your work is one of the oldest messages around, so much so that we may find ourselves … [Read More...]

internet security key

What is a DDos Attack?

A Distributed Denial of Service (DDoS) attack is where a group of computers flood another website with a large number of messages, so that the website … [Read More...]

About Robin Jennings

I'm a creative web designer that specialises in designing and marketing websites for small business owners, community groups and creative types. I'm based in regional Victoria but work with clients Australia-Wide as well as a healthy sprinkling of overseas clients through my Web Design Agency: Explainafide

Speak Your Mind

*