Useful HTML5 Example Code To Help You Get Started

This is a collection of useful HTML5 example code that will help you get started with HTML5 web development. I've included a bunch of new HTML5 element examples and attributes that you should know about, hopefully this post will help  you with just that.

html5 code tips1   Useful HTML5 Example Code To Help You Get Started

How did HTML5 get started? Well, the project was a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). WHATWG was working with web forms and applications, while W3C took take of XHTML 2.0. In 2006, they decided to create a new version of HTML and they called it HTML5.

HTML5 Example Code

There are some very useful new features in HTML5 that you should know about, these new feature will make it easier and quicker when you're coding. The most popular web browsers have already updated their code to allow for HTML5 use, so now it's all up to you. I've included some of the most used HTML5 examples in this collection. There are many more examples of elements and attributes, but these are the most common today.

New Doctype

Whenever you create a new HTML file, you always add the Doctype at the top of it. It used to look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Now all you need is this:

<!DOCTYPE html>

HTML5 Examples: Elements

Some div elements are always used, like header, nav, footer, article etc. We used to load them like this:

<div id="header"></div>

Now, all you need is this:

<header></header>

When to use <div>

You will be using a div whenever you can't find a better <element> to use. You can also choose not to use the quotation marks in your code. I do however still use it.

<div class=box-shadow>

The Figure Element

The figure element makes it possible to associate captions with their image.

<figure>
    <img src="/image.png" alt="image" />
        <figcaption>
             <p>Caption of the image. </p>
        </figcaption>
</figure>

The Video Element

The video element is a feature in HTML5 that will allow you to load different video formats.

<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

The Audio Element

Same as the video element, but for audio sources.

<audio controls="controls">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>

The Input Element - New Types

  • color
  • date
  • email
  • number
  • range
  • search
  • tel
  • time
  • url
<input type="color" name="choosecolor">

The Datalist Element

Add a pre-selected list of choices to a text-field.

<input list="browsers" placeholder="DoubleClick here">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

The Placeholder Element

The placeholder element adds text to a text area that will disappear when the user types in it.

<input type="text" placeholder="This is the placeholder">

HTML5 Examples: Attribute

You attach an attribute to an element to provide additional information.


<element attribute="value"></element>

The ContentEditable Attribute

This attribute makes it possible for visitors to your website to edit the content, when they refresh the page - it's back to normal.


<element contenteditable="true"></element>

The Hidden Attribute

Hide the content of elements.


<element hidden="hidden">This paragraph is hidden.</element>

Learn More About HTML5

HTML5 is a markup language for structuring and presenting content for the World Wide Web and a core technology of the Internet. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997) and, as of December 2012, is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but XHTML 1 and DOM Level 2 HTML as well.

Leave a Reply