HTML5 Page structure

Hungarian Version!

Examine the new structural build up of the HTML5 from a little bit closer. The picture beneath can demonstrate well what exactly has changed.

html4 and html5 page structure

HTML4 & HTML5

HTML5 brings a cleaner maybe simplier structure with itself. Let’s see every single elements how they are works:

<header> Heading/header element. Overall they put the heading’s section here.(h1-h6 vagy hgroup)

<nav> The more important navigation elements of the page can get place here.(links to other sites)

<article> The “article” is just as its name implies, a separate section with content.

<section> This represents the content of each of the chapters.

<aside> Represents a sidebar (box) that the content is not necessarily linked to but it’s still an integral part of it.

<footer> Typically it shows the connection informations or the informations relating to the specific section.

Let’s see the new structure in practice with a simple example:

<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Structure Demo - start</title>
<meta charset="UTF-8">
</head>
<body>
<header>
HTML5 Structure Demo
</header>
<div id="content-holder">
<nav>
<a href="#">HTML5 - 1</a>
<a href="#">HTML5 - 2</a>
<a href="#">HTML5 - 3</a>
</nav>
<section>
<article>
<h3>Article Header</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis purus posuere odio volutpat accumsan. Nunc lobortis augue eu sem egestas eget bibendum leo bibendum. Nullam dui erat, tincidunt a gravida sit amet, commodo dictum risus. In non purus mi. Ut pellentesque ligula nec tortor bibendum et consequat nunc eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum pulvinar cursus laoreet. Donec eu leo ut lacus imperdiet euismod. Fusce tellus eros, lacinia nec tincidunt nec, mattis ut eros. Praesent id velit tortor, nec tincidunt orci. Aenean rhoncus pellentesque turpis, in condimentum ligula auctor vitae. Integer tristique aliquam leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lacinia condimentum lacus id hendrerit. Curabitur ultrices mi consectetur lorem tempus in rutrum leo congue. Etiam lacinia aliquet lacus. Vivamus id tellus in quam ullamcorper tincidunt sed ac ligula. Pellentesque non eleifend turpis. Fusce scelerisque odio id erat porta id posuere odio semper.
<footer>Article Footer</footer>
</article>
</section>
<aside>Mauris dui nisi, viverra at sagittis quis, tincidunt id enim. Praesent vitae sem elit. Donec vitae suscipit ipsum. Donec porttitor risus in eros rutrum mollis. Proin pellentesque pulvinar neque vel accumsan. Vestibulum vestibulum bibendum lorem vel posuere. </aside>
<footer>Page Footer</footer>
</div>
</body>
</html>

Of course the articulation of our example and lookout is not perfect, but it is worthwhile to look inside of the source.

The Tree structure of the HTML5 language is clearly visible. (You can download the example file from here.)

To make it look even better (not that it would be now 🙂 ) we need some CSS knowledge too. I will not bring You into the Forest. Let’s see the basics. First of all let’s see how can we enclose a CSS file to our HTML5 file. I have named my CSS file as html5.css.

<link rel="stylesheet" href="html5.css"> <!--Linking our CSS file-->

Complete our example above with these:


<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Structure Demo - finish</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="html5.css"> <!--Linking our CSS file-->
</head>
<body>
<header>
HTML5 Structure Demo
</header>
<div id="content-holder">
<nav>
<a href="#">HTML5 - 1</a>
<a href="#">HTML5 - 2</a>
<a href="#">HTML5 - 3</a>
</nav>
<section>
<article>
<h3>Article Header</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis purus posuere odio volutpat accumsan. Nunc lobortis augue eu sem egestas eget bibendum leo bibendum. Nullam dui erat, tincidunt a gravida sit amet, commodo dictum risus. In non purus mi. Ut pellentesque ligula nec tortor bibendum et consequat nunc eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum pulvinar cursus laoreet. Donec eu leo ut lacus imperdiet euismod. Fusce tellus eros, lacinia nec tincidunt nec, mattis ut eros. Praesent id velit tortor, nec tincidunt orci. Aenean rhoncus pellentesque turpis, in condimentum ligula auctor vitae. Integer tristique aliquam leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lacinia condimentum lacus id hendrerit. Curabitur ultrices mi consectetur lorem tempus in rutrum leo congue. Etiam lacinia aliquet lacus. Vivamus id tellus in quam ullamcorper tincidunt sed ac ligula. Pellentesque non eleifend turpis. Fusce scelerisque odio id erat porta id posuere odio semper.
<footer>Article Footer</footer>
</article>
</section>
<aside>Mauris dui nisi, viverra at sagittis quis, tincidunt id enim. Praesent vitae sem elit. Donec vitae suscipit ipsum. Donec porttitor risus in eros rutrum mollis. Proin pellentesque pulvinar neque vel accumsan. Vestibulum vestibulum bibendum lorem vel posuere. </aside>
<footer>Page Footer</footer>
</div>
</body>
</html>

After this we have to form – according to our taste – the lookout of the page. I have tried to be understandable and placed some commentary aswell.
You can find further information about the elements in the CSS referency.

Then let’s see the content of our html5.css file.

body {
margin: 0px auto; /*Gives the 4 values of the element's margin (top, right, bottom, left)*/
max-width:1000px; /*define width (px - pixel)*/
}

header {
display:block; /*Let's You define how a certain HTML element should be displayed. (block - by blokk-element)*/
text-align:center; /*Set the text alignment (center, left, right)*/
padding:20px; /*Set the necessary place between the element and other contents.*/
}

article
{
display:block;
margin: 15px;
padding: 15px;
}

nav{
display:block;
width:25%; /*Define the width of the element. */
float:left; /*Set the floating direction of the element*/

}

nav a:link{
display: block;
height:15px; /*Define height.*/
padding: 10px;
padding-left: 10px; /*Set the necessary place between the left side of an object and other contents.*/
}

#content-holder {
background-color: #B3B3B3;/*Set the background color.*/
}

section {
display:block;
width:50%;
float:left;
}

aside {
display:block;
width:20%;
float:right;
padding: 10px;
font-size: 12px; /*Define the font size.*/
}

footer {
clear: both; /*Removing the floating elements from a side. (both - remove in both sides) */
display: block;
text-align:center;
padding: 5px;
}

You can download the CSS file from here.

Demo

If You have any further questions or flaws that have been found You can write to the e-mail address that has been given in the Contact menu.
The full page and the necessary file can be downloaded from here.

Source:

http://dev.w3.org/html5/spec/Overview.html?true
http://reference.sitepoint.com/css
http://www.w3.org/Style/CSS/

Creative Commons Licenc
HTML5 Page structure a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.

You may also like...