The key to using HTML5 semantic tags to implement web page layout is to understand the uses of each tag and organize the structure reasonably. 1. is used for information on the top of the page; 2.
It is actually not difficult to implement a complete web page layout with HTML5 semantic tags, but many people tend to confuse structures or use the wrong tags at the beginning. The key is to understand the purpose of each semantic tag and their position in the overall page structure.
Here is an example that is close to actual development needs, including several common parts: the header, navigation bar, main content area (including articles), sidebar, and bottom. This clear structure is also convenient for SEO optimization and screen reader recognition.
The basic structure of the web page
Generally speaking, a complete web page includes at least the following parts:
-
<header></header> : Usually used at the top of the page, such as the website title, logo, or navigation bar.
-
<nav></nav> : Navigate the area and put the link menu.
-
<main></main> : The main content area, there should be only one main per page.
-
<article></article> and <section></section> : Used to organize specific content, such as blog posts or functional modules.
-
<aside></aside> : Sidebar, place relevant links, advertisements or other auxiliary information.
-
<footer></footer> : The bottom of the page, often used for copyright information, contact information, etc.
These tags make the code more readable and structural, while also being accessible and search engine friendly.
Example of actual HTML5 page layout
Here is a basic complete web layout code example:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>HTML5 Page Layout Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, nav, main, aside, footer {
padding: 20px;
}
nav, footer {
background-color: #f4f4f4;
}
main {
display: flex;
}
article {
flex: 3;
}
aside {
flex: 1;
background-color: #eaeaea;
}
</style>
</head>
<body>
<header>
<h1>My website</h1>
</header>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
<main>
<article>
<h2>Welcome to homepage</h2>
<p>This is the main content area of the website, and you can place articles, introductions and other content. </p>
</article>
<aside>
<h3>Sidebar</h3>
<ul>
<li><a href="#">Related Articles1</a></li>
<li><a href="#">Related Articles 2</a></li>
<li><a href="#">Advertising slots</a></li>
</ul>
</aside>
</main>
<footer>
<p>? 2025 My Website. All rights reserved. </p>
</footer>
</body>
</html> This code shows a basic page structure built using HTML5 semantic tags. You can copy it into an HTML file and run it directly to view the effect.
Although the semantic tags of HTML5 improve the structure of the web page, there are some details that need to be paid attention to:
- It is best to use the
<main></main> tag only once per page.
-
<article></article> is suitable for wrapping separate content blocks, such as a blog or news; while <section></section> is more suitable for grouping content.
- Don’t abuse semantic labels for the sake of styles, you should choose according to the actual meaning of the content.
- Screen readers rely on these tags to help visually impaired users understand the page structure, so it is very important to use them correctly.
If you are a new front-end developer, it is recommended to write a few more pages to practice structure division, which will help you develop good coding habits.
Basically that's it. HTML5 semantic tags are not complex, but their importance is easily overlooked in practical applications. Just remember "what content should be used as the label", and you can write a web page with clear structure and easy to maintain.
The above is the detailed content of Example of a full webpage layout using HTML5 semantic tags. For more information, please follow other related articles on the PHP Chinese website!