MENU

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.

[gs-fb-comments]

Share it if ya like it

html 5 introduction

February 2nd, 2012 | by andreas | Posted in html 5

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 […]

Share it if ya like it

This article originally posted at http://www.kroativ.net/web-development/html5-elementi-ukratko/ in Croatian language.

Header

As the name suggests it’s a first element in body part of our html. Ocasionaly we put a logo and the main navigation, or even social links.

Header by itself can’t have another header, but in rest of the elements we could have for example header in SECTION or ARTICLE.

Example of usage before HTML5 is:

<div id=“header“>sadržaj</div>

By now we simply use:

<header>sadržaj</header>

Nav

This element serve us to put all types of navigation.We could keep it anywhere on the page, for the purpose of easier keeping track where it belongs we add IDs or CLASS

Example:

<nav id=“main“></nav>

<nav class=“bottom“></nav>

Hgroup

It belongs to the so called section group of elements, from h1 to h6 headings and it’s grouping.

Example:

<hgroup>

<h1>About me</h1>

<h2>Why on earth I became a web designer</h2>

</hgroup>

section

This elemnt is used for thematic grouping of content on the page. It could hold h1 to h6 headings, a paragraphs etc. If we intentionally use for styling than it’s better to use DIVS instead

Example:

<section>

<h1>About me</h1>

<h2>Why on earth I became a web designer</h2>

<article><p>text</p></article>

</section>

article

Can be standalone element or instead SECTION tag or inside this tag. A name talks by itself what for we uses it.

Example:

<section>

<article>text</article>

</section>

Example:

<article>text</article>

aside

Aside tag is similar to a SIDEBAR but it is not a sidebar exactly. We are going to use it for blocquotes or separating part of the content linked to a main content. It could keeps navigations, blocquotes, paragraphs etc.

Example:

<aside>

<nav></nav>

</aside>

figure i figcaption

We use it when embedding photographs an figcaptions relates to a text below photographs

Example:

<figure>

<img src=“my photo.jpg“ />

<figurecaption>Photo of me</figurecaption>

</figure>

footer

Footer is standalone element on page and could keep a contact informations, navigations copyrights.We can use it as the element in the sections too as its footer.

Example:

<footer>

<small>(c) Copyright <a href=www.androwebgraphic.com</a></small>

</footer>

Share it if ya like it

Html 5 elements

February 2nd, 2012 | by andreas | Posted in html 5

This article originally posted at http://www.kroativ.net/web-development/html5-elementi-ukratko/ in Croatian language. Header As the name suggests it’s a first element in body part of our html. Ocasionaly we put a logo and the main navigation, or even social links. Header by itself can’t have another header, but in rest of the elements we could have for example […]

Share it if ya like it
Share