HTML5 Web Design Tutorial

In case you were unaware, HTML5 and CSS3 seem to be what everyone is talking about these days. Web Design has significantly progressed over the years as new and innovative ideas, technologies, platforms, and programming languages have been unleashed.

HTML5 is the 5’th revision of HTML and is the successor to HTML4 which has dominated the World Wide Web since the 1990s. To this day, HTML is still under rapid development and new ways to use and implement the code in its application are ever evolving.

The main focus is to continue to improve HTML while supporting new multimedia and device platforms. HTML5 web design tutorial posts have flooded the internet as designers and savvy business owners who take their internet presence seriously, all want in on the action. A few of the cutting-edge features in HTML5 include functions for embedding audio, video, graphics, client-side data storage, and interactive documents. In addition, HTML5 also contains several brand new elements like <nav>, <header>, <footer>, and <figure>.

The new tags in HTML5 are:

  • <area> Defines an area inside an image map
  • <aside> Defines content aside from the page content
  • <audio> Defines sound content
  • <bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
  • <canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
  • <command> Defines a command button that a user can invoke
  • <datalist> Specifies a list of pre-defined options for input controls
  • <details> Defines additional details that the user can view or hide
  • <embed> Defines a container for an external application or interactive content (a plug-in)
  • <figcaption> Defines a caption for a <figure> element
  • <figure> Specifies self-contained content
  • <footer> Defines a footer for a document or section
  • <header> Defines a header for a document or section
  • <hgroup> Groups heading (<h1> to <h6>) elements
  • <keygen> Defines a key-pair generator field (for forms)
  • <mark> Defines marked/highlighted text
  • <meter> Defines a scalar measurement within a known range (a gauge)
  • <nav> Defines navigation links
  • <output> Defines the result of a calculation
  • <progress> Represents the progress of a task
  • <rp> Defines what to show in browsers that do not support ruby annotations
  • <rt> Defines an explanation/pronunciation of characters (for East Asian typography)
  • <ruby> Defines a ruby annotation (for East Asian typography)
  • <section> Defines a section in a document
  • <source> Defines multiple media resources for media elements (<video> and <audio>)
  • <summary>Defines a visible heading for a <details> element
  • <time> Defines a date/time
  • <track> Defines text tracks for media elements (<video> and <audio>)
  • <video> Defines a video or movie
  • <wbr> Defines a possible line-break

Needless to say, HTML5 has A TON of new features that make it a huge improvement over HTML4. The one that is most people’s favorite is the multimedia features that HTML 5 brings to the table. Prior to HTML5, many people had trouble watching videos and Flash content on their iPhones, iPads, tablets, and other smart phone devices that simply do not support the playback of Flash. HTML5 now offers support for playing multimedia and it works on all of these platforms and devices, now that’s cool.