Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Markup your website using HTML5

Wednesday, December 3rd, 2014 by Servage

HTML5_Logo_512HTML5 has been around for a while now, yet many websites are still not making use of the great advantages introduced with the new HTML standard. Obviously you don’t necessarily need to convert an existing site just for the conversion itself, but could combine it with other maintenance work on your site – or in combination with a relaunch. This post will highlight some of the benefits you could get from using HTML5.

New tags in HTML5

Old websites often used tables for structuring layouts. That technique was later replaced by <div> containers used in conjunction with CSS positioning. HTML5 has taken this to the next level by introducing a range of new tags, which can be positioned like <div> containers, but also have two new advantages by being self-explanatory in their names and better suited for SEO (Search Engine Optimization). Examples of such new tags are:

  • <nav>
  • <section>
  • <article>
  • <canvas>

These tags increase the semantics of the HTML code, because you no longer use some custom defined css class or id attributes to know the meaning and position of it. Now the browser (thus also search engines) know the meaning of specific elements as well, thereby increasing their ability to handle and prioritize the elements accordingly.

Video & audio playback

HTML5 offers built-in tags to include video and audio playback in your site. This makes is fast and easy to include such media.

<video poster="movie.jpg" controls>
  <source src=”movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>

The example above tries to load video files and shows an error text in case the browser does not support it.

The old way of building HTML content

Here is an example of how an old website could have built the HTML for a simple list-based navigation element, and some content articles. Notice the use of <div> containers with css classes.

<div class="navigation">
    <ul>
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
        <li><a href="#">Menu item 3</a></li>
    </ul>
</div>

<div class="content">
    <div class="post">
        <h2>Post Title 1</h2>
        <p>Post description 1 ...</p>
    </div>
    <div class="post">
        <h2>Post Title 2</h2>
        <p>Post description 2 ...</p>
    </div>
</div>

The new way of building HTML content

Here is the same example converted to HTML5 using some of the new element types. You can see from reading the code that it not only makes life easier for browsers and search engines, but also makes the code easier to read for developers.

<nav>
    <ul>
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
        <li><a href="#">Menu item 3</a></li>
    </ul>
</nav>

<section>
    <article>
        <h2>Post Title 1</h2>
        <p>Post description 1 ...</p>
    </article>
    <article>
        <h2>Post Title 2</h2>
        <p>Post description 2 ...</p>
    </article>
</section>

It is never too late to start using HTML5

You might think you could have already missed the HTML5 train, but don’t think of it in that way. The HTML standard evolves continuously and whenever you have the time and resources, remember to bring your projects up to date. Doing so will enable you to stay on top of web development and make it easier to implement new features in the future.

References & More Reading

Markup your website using HTML5 , 5.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.