Step 5: Specific content

HTML5 also has some new elements that you can use for specific content or even specifying parts of your web site. They are intended for sectioning content within your <body>-element. This could come in handy when you are coding in another scripting language, like PHP .

<address>-element

The address element is intended for you to publish all kinds of contact information. It’s used like this:

<address>
Name<br />
Address<br />
City and Zip Code<br />
</address>

Content shown here in italic should be replace with your own content. All the information you publish within the <address>-element will be shown in italic on your web site.

<article>-element, including the new <header> and <footer>-element

The <article>-element is intended for blogs and news sites. It’s usually used in combination with scripting languages.

On it’s own it’s not doing anything different than a <div>-element. Unlike the <address>-element the <article>-element has no default markup or style effects. However, it’s assumed that you’ll be using it to publish an article (duh!). An article usually consists of a header, content and maybe even a footer. So the ideal way of using the <article>-element is to combine it with a few other elements; the <header> and <footer>-elements, and if you want the <time>-element. The <header> element is different to the older headline tags, the<h1> to <h6>-elements from older HTML  versions. In my sample, I will use both, the <h1>-element is added because it’s important to SEO and it automatically shows the content in a bigger size with white space around it:

<article>

<header>
<h1>This is amazing news!</h1>
<p>If you want, you could add a publishing date: <time pubdate datetime=”2015-01-01″>January 1st, 2015</time></p>
</header>

<p>This is the article that would explain what this amazing news is</p>

<footer>
<p>
<small>Here’s where you might want to add your writer’s credits</small>
</p>
</footer>

</article>

Obviously, you should replace the content I’ve published here in italic with your own content.

The <small>-element was introduced to HTML with version 4.01. It’s new to those following my online courses, but it speaks for itself really. As expected text will be shown in a smaller size. There’s also a <big>-element, which would show text in a bigger size

<hgroup>-element

Within certain articles, you will find it necessary to have a subtitle to your main title. You can now use the <hgroup>-element to group your <h1> to <h6>-elements. Sample:

<hgroup>
<h1>This is big news</h1>
<h2>To those who care</h2>
</hgroup>

<section>-element

If you are building a news or blog site in this day and age, you probably want to add a space for comments. Comments are always added using scripts of PHP or ASP. To make sure you can section these within HTML5 you can nest the new <section>-element within your <article>-element. Full sample:

<article>

<header>
<h1>This is amazing news!</h1>
<p>If you want, you could add a publishing date</p>
</header>

<p>This is the article that would explain what this amazing news is</p>

<footer>
<p>
<small>Here’s where you might want to add your writer’s credits</small>
</p>
</footer>

<section>
<h2>Comments</h2>
<article>
<header>Posted by: Someone</header>
<p>Posted on: <time pubdate datetime=”2015-01-01″>January 1st, 2015</time></p>
<p>Whatever comments someone has posted will be shown here</p>
</article>

<article>
<header>Posted by: Someone else</header>
<p>Posted on: <time pubdate datetime=”2014-12-31″>December 31st, 2015</time></p>
<p>Whatever comments someone else has posted will be shown here. You can tell that every post will be shown within the same HTML elements.</p>
</article></section>

</article>

<nav>-element

I think, you’re beginning to get the picture that HTML 5 allows you to define all kinds of different sections of your site. So it wouldn’t surprise you that it also allows you to define the navigation bits of your site. Sample:

<nav>
<a href=”home.html“>Home</a> |
<a href=”about.html“>About</a> |
<a href=”contact.html“>Contact</a>
</nav>

This could come in real handy for styling with CSS.

<code>-element

Now, this is not new to HTML at all, but I thought I’d mention it anyway. If you create a site that would feature a lot of coding as content, for instance when you write an HTML course or you share PHP scripts or Javascripts, you can use the <code>-element. It doesn’t effect the markup of the content, but, if desired, you can add that using CSS.

<aside>-element

If you have a certain type of content that is placed on the page, but it has no relation to the rest of your content, you can section it using the <aside>-element. This could be used for content in sidebars or inserts (for instance for adverts). The element itself has no default markup. You can specify this using CSS.

Go to the next step

Bookmark the permalink.

Comments are closed