Mixing all elements together: a blog example

a blog example

Hello! Let's look at a blog example that uses all the new structural elements introduced by HTML5. Just click on this link to see a JSBin version of the example, and it's interesting because you can modify the code and look at the modifications in real time here.

So, it's just a static blog, not a real one, but we reproduced the classic layout of a blog, except that in that case we relied on the new HTML5 structuring elements. For example, this is a ‘header’ element here, this is ‘nav’ element for the navigation block, and every month, that contains blog posts in the blog, is made using ‘section’ elements.

And inside sections, we used ‘article’ for describing every blog post. So, in this section that corresponds to April 2012, we've got one article … and another article… and another article, and so on. Here we can see the footer of the page. If you look at the code, we can just see the header that corresponds to the big header at the top of the document.

The nav here is described using a ‘nav’ element and inside we've got a ‘header’… and we've got a list that contains the different hyperlinks for navigating inside the blog. We've got a ‘section’, that also in turns contains a ‘header’. So the title here of the section blog post for April 2012 is an ‘h2’, an heading level 2, inside a ‘header’ element. So the advantage of using ‘header’ element is that there are just logical containers and they can contain more than just a heading. For example here for the first blog post, the ‘header’ of the article is composed of heading level 2, ‘h2’, and some text with an hyperlink that describes this part here of the header of the post. So like that, in every article, every section, every nav, we can add headers and inside headers we can add headings.

The part on the right here is made using the new ‘aside’ element. The ‘aside’ element here contains a heading ‘h2’ that contains the string "tag-cloud" and different tags. So you can have one or more aside elements on the right or on the left. A good practice is never to put very important information in the aside elements. The main content should be in sections and article elements, in the biggest part of the page.

Ok, let's just have a quick look at the CSS part.

The most interesting part is that use CSS ‘float:right’ for laying out the ‘aside’ elements on the right and we use ‘float:left’ for positioning the section and all their children on the left.

Then, all the other properties we used are just for specifying left margin, right margin, font size, background color, and so on. So, for people with a basic CSS knowledge it should be straightforward.

And for pure beginners, try to understand how it works, but at the end of this section, in a few pages further in the course, we propose a very simple example, much simpler than this one, and we explain how to make a simple layout using only a few lines of CSS code.

A blog example that uses the structural elements

Let's study the example below:

codepen.io/

Use a <header> at the top of the blog

This is an example of one way to organize a blog. Here, we have designed the HTML page using a <header> element that contains the "Simple HTML5 blog" text that appears on top of the page.

HTML code:

<!DOCTYPE html>

<head>

<title>Simple HTML5 blog</title>

</head>

<body>

<h1>Simple <span>HTML5</span> blog</h1>

</header>

...

The CSS rules we used:

header {

color: #007e99;

font-size: 2.5em;

padding: 20px 50px

}

header span {

color: #722

}

Use a <nav> for the navigation menu just below the header

The navigation menu just below the header is a <nav> element. For the purpose of this example we haven't provided any value for the hyperlinks...

HTML code:

<!DOCTYPE html>

<head>

<title>Simple HTML5 blog</title>

</head>

<body>

<h1>Simple <span>HTML5</span> blog</h1>

</header>

<nav>

<ul>

<li><a href="">About</a></li>

<li><a href="">Contact</a></li>

</ul>

</nav>

And here is the CSS we used in this example for the <nav> element:

nav {

font-size: 1.5em;

margin: 5px 0;

padding: 20px 50px

}

nav li {

display: inline;

margin: 0 15px

}

nav li:first-child {

margin-left: 0

}

* html nav ul {

margin-left: -15px

}

nav span, nav a {

padding: 3px 15px 4px

}

nav span {

background: #722;

color: #fff

}

A <section> for each month and an <article> for each post in the blog

Now, we have one big <section> element that contains a set of <article> elements...

HTML code:

...

</article>

...

</article>

...

</article>

</section>

And here is the CSS:

section {

float: left;

padding: 35px 0;

position: relative;

width: 70%

}

section article {

margin: 0 50px 40px;

padding: 25px 0 0;

position: relative

}

section header {

font-size: 1em;

padding: 0;

}

section h2 {

font-size: 2.3em;

}

Note that the H2, article, article header, etc. will be styled using these rules.

Add a <header> at the beginning of each <article>

Next, in each article in the section we have a header (to display the article title), paragraphs (article content), and so on.

Example for the first blog article:

<h2><a href="">Information about this example</a></h2>

</header>

<p>Try to move the mouse on different elements. The structure will be

highlighted and you will be able

to see the different inclusions of elements one in each other. If you

move the cursor to this sentence, it will be highlighted in dark grey,

showing the presence of an <article> element, surrounded by a

<section> element (light grey), etc. So we have some articles in

a single section element. The page title at the top is a <header>

element, while the tag cloud on the right is a <aside> element. The

main menu on top (with Blog, About, Contact) is a <nav> element.</p>

<img src="HTML5-tags.png"

alt="Example of HTML5 structural tags" />

Fig. 1 : an example of how new structural elements could

be used. This page put a <nav> on top, and does not have

headers and footer for each article, like in this figure,

but it could... By the way this is a

<figcaption> inside a <figure> element...

</figcaption>

</figure>

</article>

...

</section>

Use <figure> and <figcaption> and embed <img> inside

Also note the way we included a figure using the new "HTML5" method, using a <figure>..</figure> element that embedded a <img src=.../> element together with a <figcaption> element.

Here is the CSS for the <figcaption> element we have used in the example (we did not apply any style to the <figure> element):

HTML code:

<img src="HTML5-tags.png"

alt="Example of HTML5 structural tags" />

Fig. 1 : an example of how .....

</figcaption>

</figure>

CSS code:

figcaption {

font-style:italic;

font-size: 0.8em;

width: 100%

}

Use an <aside> element to display a tag cloud on the... side of the main content

After the long <section> element that contains all the blog articles displayed in the page, we added the HTML code for the tag cloud that is displayed on the right of the page, "aside"! This is done using - you already guessed it - an <aside> element:

.... all <article>... </article> here....

</section>

<aside>

<h2>Tag cloud</h2>

<li><a href="" rel="tag" class="w8">apple</a></li>

...

</ul>

</aside>

...

We are not going to show the complete CSS here as it uses some tricks to display the list as a "real tag cloud" that uses JavaScript for handling events, etc.

Here is the CSS for the <aside> element:

aside {

float: right;

padding: 70px 0 30px;

position: relative;

width: 25%

}

aside h2 {

color: #888;

font-size: 1.8em

}

aside .tag-cloud {

padding: 15px 35px 10px 0;

text-align: center

}

...

We used a float:right CSS rule to put the tag cloud on the right... In a following section we will provide several examples that explain how to make a nice layout with the new structural elements, using simple CSS rules.

Here is the result:

Add a <footer> at the end of the blog

Finally, we added a <footer> element (lines 12-14 below) after the tag cloud definition, to display a page footer:

<html>

...

<body>

...

...

</section>

<aside>

...

</aside>

</footer>

</body>

</html>

With this CSS rule:

footer {

clear: both;

color: #777;

padding: 10px 50px

}

And here is the result at the bottom of the page: