HTML5 For Beginners, Examples, Resources and HTML5 Basics.

HTML5 will be the latest standard for HTML, it comes with many new and improved elements and attributes that can enhance the quality of your everyday websites. HTML5 for beginners is basically a brief overview of some of the features and things you can create using HTML5. I will provide you with some examples and some of the top resources you can use to learn more about HTML5.

Please remember that HTML5 is still a work in progress and not all browsers have full support yet, however most major browsers are always adding new HTML5 features to their browsers. Such as Firefox, Chrome, Safari and Opera, sooner or later HTML5 will be fully supported on every browser.

First lets brush up on the latest HTML5 elements. I will quickly introduce some of the structural elements, media elements and form elements.

New Doctype

Finally a simple doctype that can be easily remembered! They definitely made this doctype a lot easier than their recent ones.

All HTML5 documents start with this simple doctype:


<!DOCTYPE HTML>

Structural Elements

Some new elements that have been introduced to HTML5 are the structural elements. These elements allow you to give a better structure of your websites. Structural elements were developed to make the whole coding process a lot easier and more simple for developers.

Here are some of the new structural elements you can use in HTML5.


<header>
Element used to define the header of your website.
</header>

<article> 
Element used to define an article. 
</article> 

<aside>
Element aside the pages content.
</aside>

<nav>
This element defines navigation links.
</nav>

<footer>
Element that defines your footer.
</footer>

There are also many more structural elements that you can use for your websites to easily define areas and classes. A full list of elements for HTML5 can be found at w3schools.org

Media Elements

One of the many new impressive elements added to HTML5 are media elements. Elements that define a media type, you can play a video or audio right from your website. Here are some of the media elements that you can use in HTML5:

 
<audio>
Element used for audio.
</audio>

<video>
Element used for video.
</video>

<embed>
Element used to embed media on your website.
</embed>
Form Elements

HTML5 also contains new convenient form elements. Which make creating input forms easier than before. Take a look at some of the latest form elements that can be used with HTML5.

 
<datalist>
Element used to create a list of options.
</datalist>

<keygen>
A control for key-pair generation.
</keygen>

<output>
Defines a result of a calculation.
</output>

OK, so we briefly took a look at some of the basic elements that come with HTML5. This next element is known as the canvas element. The canvas element is used to draw graphics on a web page using scripting which would usually be JavaScript. Yes a basic knowledge of JavaScript would be required before you dive into using the canvas element, but JavaScript can be learned from the w3c website or some of the resources I provide at the end of this article.

Now on CSS3 For Beginners I provided you with some of my own basic examples of using CSS. But I have managed to find a truly amazing example of the canvas element. Please take a look at this beautiful HTML 5 canvas example, it’s inspiring and quite relaxing! Click the image link to view the demo.

HTML5 Canvas Example

HTML5 Inline Support For SVG

HTML5 now provides inline support for SVG. SVG stands for Scalable Vector Graphics, SVG is W3C recommended and is used to define vector based graphics for the web.

Some of the advantages of using SVG images over other formats are that the images are scalable, can be printed at high quality with any resolution, and SVG images can be edited with any text editor.

In this example you can find a combination of inline SVG, HTML5 video and some CSS. This example is a SVG embedded over a HTML 5 video. It currently only works in Firefox 4 and newer versions. Click the image to view the demo.

SVG Inline Example

HTML5 Drag and Drop and Geolocation

Another top feature of HTML 5 has to be the drag and drop. You can basically drag any element of your choice in to the desired location. I couldn’t sum it up any easier than that. It does require a fair amount of code, but it is actually very simple. Anyway take a look at this cool drag and drop example.

The HTML5 Geolocation lets you pinpoint the geographical position of a user. For privacy reasons the user must approve it. Most browsers are supporting Geolocation so you shouldn’t have any problems with browser compatibility.

Lets take a look at a demo of HTML5 geolocation function in action.

HTML5 Video and Audio

Until now there hasn’t been a standard way to play a video or audio file on a website. With HTML5 you are now able to play and embed a standard video on to your website using HTML5, without using a plug-in such as flash. You can use the following code below to display a video or audio file on your website. Just specify the source and add the code to your site. It will also display standard audio and video controls.

<video width="500" height="500" controls>
  <source src="yourvideoname.mp4" type="video/mp4">
</video>

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
</audio>

Form and Input Types

There are many new input types for forms with HTML5. HTML5 forms do not only make web forms better for web developers, but they give a much more friendly user experience for the users. With many more custom options for HTML5 forms. No need for an example of forms as we all know what forms are and do. You can find a full list of input types and form elements here.

HTML5 Learning Resources

We now know some of the top features and elements that come with HTML5. Now it’s time to dive in and brush up on your HTML5 skills. Here are some of the top resources to help you learn more about HTML5.

Personally I’m a big fan of learning by video, so my number one resource has to be

thenewboston.org

My favorite place to learn coding is thenewboston.org. They recently added a bunch of YouTube videos with detailed tutorials which will help you learn HTML5.

I hope you have learned and enjoyed this HTML5 for beginners article.

If you would like to receive the latest web updates and trends from our blog. Please subscribe to our newsletter and we will send you free updates of our latest articles.

Thanks for reading! I appreciate every single one of my readers, so please leave a comment with your feedback of this article.

Author: Jake

Share This Post On