HTML5 Basics

Today we are going over HTML5 fundamentals. We will find out what HTML5 is and how we can use it.

What is HTML5, you ask?
HTML stands for Hyper Text Markup Language and is used for presenting content for the World Wide Web and the core technology of the Internet. HTML5 is the latest HTML standard. HTML files are stored on a server. When a person(s) uses a web browser and requests a webpage, it is then rendered by the browser as a webpage.
HTML has come a long way! With HTML5, a developer can do many things that previously required plug-ins. HTML5 can do many of the things we used FLASH for in the past.
HTML5 has numerous new features that we will go over and has over 30 new elements added to it. Let’s get started!

Here is what’s new in HTML5:

  • New Elements
  • New Attributes
  • Full CSS3 Support
  • Video and Audio
  • 2D/3D Graphics
  • Web Applications
  • Local Storage
  • Local SQL Database

New Elements

  • <mark> Used to mark and highlight text
  • <canvas> Used to draw graphics on the fly using a scripting language like JavaScript
  • <video> Used for defining a video or movie
  • <header> Used for defining a header for a document or section
  • <footer> Used for defining a footer for a document or section
  • <section> Used for defining a section in a document
  • <article> Used for defining an article
  • <aside> Used for defining content aside from the page content
  • <details> Used for defining additional content to be viewed or hidden

New Global Attributes

  • contenteditable – Used to specify whether the content of an element is editable or not
  • data-* – Used to store custom data private to the page
  • draggable – Used to specify whether an element is draggable or not
  • dropzone – Used to specify whether the dragged data is copied, moved, or linked, when dropped
  • hidden – Used to specify that an element is not yet, or is no longer, relevant
  • spellcheck – Used to specify whether the element is to have its spelling and grammar checked or not

HTML5 uses CSS3

CSS3 is fully supported by HTML5. Most all modern browsers support CSS3. The best features of CSS3:
  • New Selectors
  • New Properties
  • Animations
  • 2D/3D Transformations
  • Rounded Corners
  • Shadow Effects
  • Downloadable Fonts
Here are the most important CSS3 modules:
  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Image Values and Replaced Content
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface
Here is an example of CSS3 creating a border radius:

CSS3 animation example:

HTML5 Graphics

You can now use the <canvas>, CSS3 2D/3D and inline SVG for graphics in HTML5. Using inline SVG (Scalable Vector Graphics):

HTML5 Applications

  • Local data storage
  • Local file access
  • Local SQL database
  • Application cache
  • Javascript workers
  • XHTMLHttpRequest 2

Semantic Elements

New elements for headers, footers, menus, sections and articles.

HTML5 Forms

New form elements, new attributes, new input types, and automatic validation.

HTML5 Structure

In HTML5, there is only one DOCTYPE declaration and it is very simple:

The basic structure for HTML5 markup.

If you are not already using HTML5, then I hope that this inspires you to start using it. Barrett

Tagged with:

View all contributions by


Related Articles


Stay connected with us

Add us on Google+

Follow us on Facebook

Follow us on Twitter

Get updates via RSS

Get email updates


Leave a Reply

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

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