MENU

Tag Archive: html 5 intro

html 5 introduction

Leave a Comment

This article originally posted at http://www.kroativ.net/web-dizajn/uvod-u-html5-i-css3/ in Croatian language.

In the world of web design comes a new technologies and a new standards.So that way is how HTML5 and CSS3 are born.

In this html5 introduction today I’ll describe in short html5 and css3. so let’s start with a basics.

Here are new element tags which are more semantic.

So first things first the old Doctype is replaced with shorter

<!doctype html>

And every modern browser will recognize that is all about html document. Here’s also declaration for encoding type it has a shorter version.So we will write instead of

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

A simplest one:

<meta charset=”UTF-8″>

A declaration for a language is now:

<html lang=”hr”>

New semantic elements in HTML5 in order of appearance:

-header <header></header>

-nav <nav></nav>

-section <section></section>

-article <article></article>

-aside <aside></aside>

-figure <figure></figure>

-footer <footer></footer>

Because of IE issues in HTML5 for older versions is needed to add at a beginning a little bit of javascript code or using the templates with this linked to a JS scripts to declare this elements to be a block-level elelemnts.

Here’s an example for IE:

<script>

document.createElement(‘header’);

document.createElement(‘nav’);

document.createElement(‘section’);

document.createElement(‘hgroup’);

document.createElement(‘aside’);

document.createElement(‘figure’);

document.createElement(‘footer’);

</script>

Second option is using boilerplate template which already has needed code for pages to look consistent in all major browsers.

One interesting thing in boilerplate that if it recognize You are using IE6 or IE7 it gives You possibility to install google Chrome framework which lasts a few seconds and after installation it rendering pages properly in IE.

You have clean version of boilerplate or one with comments included.

Here’s a link for boilerplate html5: http://html5boilerplate.com/

Ok it‘ll be all for now I hope I helped someone.

Keep working in discovering a new possibilities.

Share it if ya like it
Tags: