Web design with HTML5: Structure and Composition

One advantage that HTML5 has brought to the field of web design is that it includes a HTML tags structure much more semantic, i.e., a markup with a meaning for what will truly serve said identifier. In other words, HTML5 has made to the web designer the job much easier than with previous versions, especially when we have to modify a web design of a colleague.

html5-design-web

Structure of a website in HTML5

When designing a website, there are certain elements or parts of the page, which are clearly identified and roughly accepted by the majority of the community, either users or designers. We refer to the header, footer, aside….

However, in previous years, these elements were designed in the web as divisions by the <div> tag, having to identify each as they really were. So we had a list of divs tags, each with its corresponding identifier wrote by ourselves <div id=”header> or <div id=”footer “> … They could also be called <div id = “header-section “> or <div id=”footer-section”> so each designer had their own way of identifying parts of their sites.

Indeed, it seems logical that these elements, which are always repeated across the web designs we are working, have their own identifying and semantic labels. So we replace <div id = “header-section “> by <div id=”header>, which is much cleaner and easier for designers and very useful for search engines like Google, that can more quickly identify the structure of a web.

HTML5 responsive design: Composition

It is exactly the same, nothing changes (If you have not yet heard of customisable design or responsive design, here it is an article on responsive design.) Just the “responsive” web elements are going to adapt to the device where the page is displayed, without losing our design, making a responsive and easy navigation experience to the user.

design-web-responsive

These same labels will adapt to the support, but as we see, several items do maintain their order, as the header and the footer. However, elements such as the sidebar or a possible side navigation menu (nav) shall be located above or below the main section (previously called “main”)

With this composition, HTML5 tags, that usually are present in all web designs we do, are:

<header></header>

It is the element that opens the web. Usually it is where the logo or representative text is located. In cases that our web has advertising, the header banner is usually also place within it. In many cases it contains the <nav> navigation menu, though not necessarily.

<nav></nav>

It refers to all navigation links that lead to the different sections of our website. It is one of the most important parts, as it should be essential for the user to be able to browse the categories and pages.

<section></section>

It is the label which replaces the default <div> indicating that we are in a different section, like a chapter in a book.

<article></article>

The article tag is designed to contain an own unit of information and content, which in turn may have its header, section and footer. A section can contain several separate articles.

<aside></aside>

It replaces the sidebar, although its use is to fill it with content that is not directly related to that page, for example a list of links, advertisements, social icons…

<footer></footer>

And the footer, present in almost all websites, serves to locate the contact data, some extra information, social icons, twitter updates… even a second navigation menu.

<audio>,<video>…

There are other tags to display content without the need for third-party plugin like Flash, but we will write more about them in following articles.

Therefore, HTML5 will become (if it is not yet) a language that will structure the web design in a much more easy and semantic way to identify. If you are a designer, we encourage you to start to design with html5 like us at SiloCreativo (all will thank you;) ) and if you are a user, do not hesitate, add these changes to your web design, which will positively influence the positioning and SEO!

Leave a Reply

Your email address will not be published. Required fields are marked *