MENU

Tag Archive: html5 elements

Html 5 elements

Leave a Comment

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
Tags: