Why Learn Html5

Easy implementation

The nice thing about HTML 5 is how easy it is to impelement. You use the HTML 5 doctype, which is very simple and streamlined. Just two words "doctype" and "html".

Dynamic page support

Html5 was developed to help web application developers, so there are a lot of new features and elements to make it easy to create modern, dynamic html web pages.

New useful elements

And HTML 5 has created tags to support those elements of the page like 'section' to define sections of pages, but 'header' , 'footer' , 'nav' elements also involved

New inline elements

These inline elements define some basic con- cepts and keep them semantically marked up, mostly to do with time markers like: 'mark' 'type' & 'meter' and 'progress' tags.

The canvas element

It gives you a drawing space in JavaScript on your web pages and can let you add images or graphs to tool tips or just create dyanmic graphs on your pages, built on the fly.

Better browser support

Microsoft has stated that they will begin sup- porting at least portions of html5 in IE8. If you want to get started sooner, Opera has had the best support, with Safari close behind.

Free Html5 Lessons

Below you can find a kind of introduction to our beginners html5 lessons, go through them and if you are intrested you can get the full free version of this ebook right after you signed up.


sample_1

sample_1

Block & Inline Elements

We have looked at some of the HTML5 elements a webpage is constructed of and now it’s time to introduce yet another property of the HTML5 elements. There are 2 different types of elements: inline elements & block elements. Whether an element is an inline or block elements affects how the browser render the element

BLOCK ELEMENTS

A block element is rendered, as the name indicates, as an actual block. The block-element is as wide as it can possibly be, a rectangular that does not break across lines, and the width and height of the element can be regulated. Block-elements may contain inline elements and other block-elements.

INLINE ELEMENTS

The inline elements are treated as a part of the flow of the document and the size should normally not be changed manually. Only inline elements may be contained with inline-elements. And to make even more confusing, inline elements are the only elements that may be contained within a paragraph-element, even though the “p”-element is a block-element.

Read the full article at html5-tutorials.org

The Section Tag

sample_3_a

The section element is one of the new elements that it is the hardest to learn to use correctly. It is more general than the “article” element, but you still have to have an actual section in your document when you use the “section” element.

This means, that you should always consider whether or not it might be more appropriate to use the “nav”, the “aside”, the “header”, the “footer”, or the “article” element before actually using the “section” element. (Some of these elements might be new to you, there is chapters discussing all of them).

DIVIDES THE DOCUMENT

As you can see, this adds several lines of markup to your document and some prefer as little markup as possible. Luckily for them, you do not need to use the section element inside the article, but it often creates a more correct document outline.

As the section element divides your content into sections, it is important to remember that all section elements must be followed by a heading tag – if this doesn’t make sense semantically, then you should not be using the section element (consider using the one of the other new semantic HTML5 elements or perhaps no element at all?).

OTHER USUAGE

Some might give in to the temptation of using the section tag as a styling hook for e.g. pullquotes, but resist it. There are more appropriate elements to use for this purpose instead of the section element, e.g. the “aside” element.

Read the full article at html5-tutorials.org

Placeholder Text

sample_4_a

An empty form might be a bit intimidating especially if you are uncertain of what might go in to the different input fields. Therefore some developers invented the idea of a sample text inside the fields – so the user would have an idea of what to type in. This is what we nowadays call the placeholder text. Usually the placeholder text would have a light gray color in order to distinguish it from the user’s actual input.

HOW DOES IT FUNCTION?

As you might have discovered by now, the ability to set a placeholder text in input fields is not really a part of form validation but it is a long awaited feature that developers up until now have been creating using JavaScript. The placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click the field the placeholder text disappears and if you do not type anything into the field the placeholder text will reappear as soon as the field is no longer focused.

BROWSER SUPPORT

The placeholder attribute actually has a pretty great support across browsers but if your user uses a browser that does not support the new html5 attribute no harm is done – the browser will just ignore your placeholder text. And of cause you can use a polyfill to make sure the placeholder text is shown in all browsers – check out my recommendations.

Read the full article at html5-tutorials.org

Wanna See More On Html5 Coding?

Hit the button below & sign up for absolutely free to our popular 5+1 lessons Starter Course.

begin starter course

On Responsive Coding

Add as many chapters or content boxes as you wish with a custom post type called overviews. The first four elements are always shown, while the rest can be seen when you click on the show more button below.

Desktop Size

Desktop Size

Consectetur adipiscing elit nam sed lacus accumsan ipsum dolor amet consectetur adipiscing elit nam dui

Monitor Size

Monitor Size

Consectetur adipiscing elit nam sed lacus accumsan ipsum dolor amet consectetur adipiscing elit nam dui

Tablet Size

Tablet Size

Consectetur adipiscing elit nam sed lacus accumsan ipsum dolor amet consectetur adipiscing elit nam dui

Mobile Size

Mobile Size

Consectetur adipiscing elit nam sed lacus accumsan ipsum dolor amet consectetur adipiscing elit nam dui

Behind The Scenes

Dave Russi

Dave Russi

Proin gravida nibh vel velit auctor aliquet enean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis uis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare

Jane Fatale

Proin gravida nibh vel velit auctor aliquet enean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis uis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare

Jane Fatale
Bob Mandy

Bob Mandy

Proin gravida nibh vel velit auctor aliquet enean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis uis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare

Chris Tedderman

Proin gravida nibh vel velit auctor aliquet enean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis uis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare

Chris Tedderman
Jenny Bogdan

Jenny Bogdan

Proin gravida nibh vel velit auctor aliquet enean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis uis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare