Home > Article > Web Front-end > What is the meaning of HTML5 semantic tags

What is the meaning of HTML5 semantic tags

WBOYOriginal: 2022-01-23 13:47:522247browse

In HTML5, semantic tags can clearly describe their meaning to browsers and developers, that is, try to use Html tags with corresponding structural meanings. Semantic tags include "footer" and "header" ”, “nav”, “figcaption” tags, etc.

The operating environment of this tutorial: Windows 10 system, HTML5 version, Dell G3 computer.

What is the meaning of HTML5 semantic tags

Semantics = meaning

Semantic elements = meaningful elements

What are semantic elements?

A semantic element can clearly describe its meaning to browsers and developers.

Examples of non-semantic elements:

and - no need to consider content.

Examples of semantic elements:

, , and

What is the meaning of HTML5 semantic tags

- Clearly define its content.

Many existing websites contain the following HTML code:

, or , to indicate navigation links, headers, and footers.

HTML5 provides new semantic elements to identify different parts of a Web page:

##The example is as follows:

The

tag defines a section (section, section) in the document. Such as chapters, headers, footers, or other parts of the document.

<html>
<head> 
<meta charset="utf-8"> 
<title>123</title> 
</head>
<body>
<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
  <h1>WWF&#39;s Panda symbol</h1>
  <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
</body>
</html>

Output result:

What is the meaning of HTML5 semantic tags

What is the meaning of HTML5 semantic tags

Related articles