Explain HTML5 semantic tags in detail
-
<header>Header tag -
<nav>Navigation tab -
<article>Content label -
<section>Block label -
<aside>Sidebar label -
<footer>Tail tagnote:
- Semantic tags are mainly for search engines
- The new label can be used multiple times in the page
- In IE9, these elements need to be converted into block-level elements
- These tags are used more on mobile
header,
nav,
article,
section,
aside,
footer {
display: block;
}
header {
height: 80px;
background-color: aqua;
line-height: 80px;
text-align: center;
}
nav {
margin-top: 10px;
height: 80px;
background-color: bisque;
line-height: 80px;
text-align: center;
}
article {
float: left;
margin-top: 10px;
width: 50%;
height: 300px;
background-color: cadetblue;
}
section {
float: left;
width: 300px;
height: 80px;
background-color: chartreuse;
margin: 40px auto;
}
aside {
float: right;
margin-top: 10px;
width: 50%;
height: 300px;
background-color: coral;
}
footer {
float: left;
width: 100%;
height: 80px;
background-color: darkkhaki;
margin-top: 10px;
}
<body>
<header>header</header>
<nav>nav</nav>
<article>article<section>section</section></article>
<aside>aside</aside>
<footer>footer</footer>
</body>
