HTML5 structure: How to create the first HTML5 template
In this article, I will introduce the most commonly used HTML5 structure , through which you will know the meaning of some HTML tags that have just been added in HTML5.
When you refer to some websites written in HTML5, you will see tags like header , nav , section , footer , … These tags did not exist before, but since HTML5 was born, people use them. pretty much. If you know English, you can guess the meaning of each card at a glance.
Before we start, I would like to introduce some common positions on a website.
1. The HTML structure of a typical web page
Each website will have a different interface. However, in terms of UI, they are required to have some positions as follows:
When there is no HTML5, each position we will use a div tag to surround it, then use ID or Class to declare those positions.
<body> <div id="header"> HEADER </div> <div id="menu"> MENU </div> <div id="main"> <div id="content"> MAIN CONTENT </div> <div id="sidebar"> MAIN SIDEBAR </div> </div> <div id="footer"> FOOTER </div> </body>But when HTML5 appears, it's different, we will use separate tags, each position will have a corresponding tag. That is in terms of meaning, but in terms of nature, these tags are no different from div tags, just different names.
Now let's study how to convert this structure to HTML5.
2. Most Common HTML5 Structure
HTML5 is pretty cool, the tags will have the right name for what it's meant to be. For example, the header tag is used in the header position, the footer tag is used in the footer position…
You see the HTML5 part that I built for the above interface:
<!doctype html> <html lang="vi"> <head> <meta charset="utf-8" /> <title>Chương Trình HTML Đầu Tiên</title> </head> <body> <header> <h1>Phần header</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Serie</a></li> <li><a href="#">Tutorial</a></li> <li><a href="#">Ebook</a></li> </ul> </nav> <section> <section> Phần nội dung chính trang web </section> <aside> Phần bên phía sidebar </aside> </section> <footer> Copyright 2014 By web888.vn </footer> </body> </html>This is a standard structure for a template built with HTML5. I speak for myself, not for the entire HTML5 writing community.
You consider the first line <!doctype html> , which is a required declaration if a template is built with HTML5. Next is the <html lang="vi"> section, you should also put lang in the html tag for clarity.
The head part below is not controversial, right? This is the information declaration for the website.
<head> <meta charset="utf-8" /> <title>Chương Trình HTML Đầu Tiên</title> </head> In the body part is the most important, in the body part I use the following tags:
The header tag is used to contain the entire header of your website. If you used the div tag before, with HTMl5 you will use this tag instead.
<header> <h1>Phần header</h1> </header> Nav tag, this tag is often used to contain navigation parts such as menus.
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Serie</a></li> <li><a href="#">Tutorial</a></li> <li><a href="#">Ebook</a></li> </ul> The section tag is a tag used to contain the main content of the website. If you don't use HTML5, you can use the div#content tag to surround it.
Inside this section, I divide it into 2 positions, the first is the main content of the website, the second is the sidebar.
<section> <section> Phần nội dung chính trang web </section> <aside> Phần bên phía sidebar </aside> </section> The aside tag, this tag is often used to contain sidebar frames such as left-sidebar , right-sidebar .
<aside> Phần bên phía sidebar </aside> And the last tag is the footer tag, instead of declaring a div and formatting, we use the footer tag to wrap it around.
<footer> Copyright 2014 By web888.vn </footer>You see, if we use these HTML5 standard tags, we don't need to comment on which part is the header and which part is the footer, right? Very intuitive and easy to update.
Run it up and here is the result of our html5 template:
Oh, why does the interface look so corny? The reason is that we have not used CSS to decorate the interface. This shows that although HTML5 tags have their own names, they are essentially the same as a regular div tag.
3. Conclusion
That's it, I've introduced the HTML5 structure that is often found on a web page. There are still many other HTML tags such as article, svg, .. and we will learn about it in the next articles.
