In this tutorial, we are going to discuss how to create HTML5 layout design from scratch, which covers header and footer design. HTML5 offers new semantic elements that define the different parts of a web page. W3C has conducted a study of over billion websites and found that the most of common div IDs and classes are footer, header, menu, content, title and nav. HTML5 semantic markup elements that can convey the purpose of the element to developers, browser and search spider algorithms.

Check out the below mostly used semantic elements and their purpose :

<header> - Defines a header for a document or a section

<nav> - Defines a container for navigation links

<section> - Defines a section in a document

<article> - Defines an independent self-contained article

<aside> - Defines content aside from the content (like a sidebar)

<footer>- Defines a footer for a document or a section

<details> - Defines additional details

<summary> - Defines a heading for the <details> element

Here we have designed simple example using HTML5 semantic elements and also it includes basic header and footer design. Refer the below diagram that help you to build more understanding on HTML5 template design.

header and footer in html5 example

Lets see the complete example to build more understanding on HTML5 Template Design :

This all about design of HTML5 template including header and footer design. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.