It's strange that few websites use HTML5's semantic tags now

Today, I learned some new tags of HTML5. After learning about them, I feel very powerful and practical.

Replace the full screen DIV layout with semantic tags in each area of the website. It's not only very cool to read, but also can be controlled without adding a bunch of class styles in many cases. Just use css to control the tags directly. The structure is very good, and the novice doesn't look dizzy!

Here is a simple layout of a page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic structure label</title>
<style type="text/css">
footer {
	height: 50px;
	background: #abcdef;
	line-height: 50px;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	color: #696969;
}
</style>
</head>
<body>
<header>/*Head tag*/
	<div>Logo</div>
	<nav>/*Navigation bar*/
		<a href="index.html">home page</a>
		<a href="#> > introduce </a>
		<a href="#> case </a>
		<a href="#> link </a>
		<a href="#> > about </a>
	</nav>
</header>
<section>/*Define block area*/
	<hgroup>/*For package title label, you can intuitively understand that this is a collection of titles*/
		<h1>Download the web template of dream weaving rookie</h1>
		<h3>dedenoob</h3>
		<h4>Many dream templates can be downloaded</h4>
	</hgroup>
	<aside>/*Can be used in article side column*/
		<a href="#se1">Section One</a>
		<a href="#se2">Section Two</a>
		<a href="#se3">Section Three</a>
	</aside>
	<article>/*Article*/
	    //Article content area, Zhimeng template download learning www.dedenoob.com, the whole site template installation can be used, a large number of responsive templates, learning, building a part-time station can be used!!
	</article>
</section>
<section>
	<figure>/*Multimedia with title*/
		<figcaption>Title</figcaption>
		<div class="video">...</div>
	</figure>
</section>
<section>
	<dialog>/*For conversation collection*/
		<dt>Hello, how about the template website?</dt>
		<dd>It's not bad. It's quite complete</dd>
		<dt>Hello, how about the template website?</dt>
		<dd>It's not bad. It's quite complete</dd>
        <dt>Hello, how about the template website?</dt>
		<dd>It's not bad. It's quite complete</dd>
	</dialog>
	<dialog>
		<dt>Hello, how about the template website?</dt>
		<dd>It's not bad. It's quite complete</dd>
		<dt>Hello, how about the template website?</dt>
		<dd>It's not bad. It's quite complete</dd>
        <dt>Hello, how about the template website?</dt>
		<dd>It's not bad. It's quite complete</dd>
	</dialog>
</section>
<footer>/*For tail*/
	Copyright,,,,,
</footer>
</body>
</html>

In the end, a style control footer is written to show that other elements can also be directly controlled. In this way, it's really convenient to read, and it should also be very beneficial for search engine to grab. Although it's a machine, good code structure improves spider's speed of data processing.

The specific meaning of the label in the page is indicated in the code.

Tags: html5

Posted on Fri, 10 Jan 2020 10:44:07 -0800 by anm8ed