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.
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.
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:
HTML5 Examples: Elements
Some div elements are always used, like header, nav, footer, article etc. We used to load them like this:
Now, all you need is this:
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.
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
<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.
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.
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.