(2) HTML semantics

HTML Semantic label 1 What is a semantic tag?

The content semantics are judged by the tag, for example, according to the H1 tag, the content is the title, and the content according to P is the paragraph, input tag is the entry box and so on.

2 Why label semantics?

1. Search Engine Friendly
2. Easier for screen readers to read Web content
3. When you remove or lose a style, you can make the page appear in a clear structure
4. Facilitate team development and maintenance

3 What are the tags that are commonly used for semantic expression? 3.1 Title

The title element defines the caption of the document.
The browser uses the caption in a special way, and usually places it in the title bar or status bar of the browser window. Similarly, when a document is added to a user's list of links or favorites or bookmarks, the title becomes the default name for the link to the document.

3.2 Header

Header tags define the headers of the document (introduction information).

3.3 Nav

The NAV tag defines the part of the navigation link.

<nav><a href="index.asp">Home</a><a href="html5_meter.asp">Previous</a><a href="html5_noscript.asp">Next</a></nav>

3.4 Main

The main tag specifies the primary content of the document.
The contents of the main element should be unique to the document. It should not contain content that recurs in a document, such as a sidebar, navigation bar, copyright information, site logo, or search form.
Note: In a document, more than one main element cannot appear. The main element cannot be a descendant of the following elements: article, aside, footer, header, or NAV.

<main>  

3.5 Progress

The progress label identifies the progress (process) of the task.

3.6 Pre

You can define a pre-formatted text. Text that is enclosed in the pre element usually retains spaces and line breaks. The text is also rendered as an equal-width font. A common application of the pre tag is to represent the source code of the computer.

<pre>&lt;html&gt;&lt;head&gt;  &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;  &lt;script type=&quot;text/javascript&quot;&gt;    xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>(&quot;books.xml&quot;);    document.write(&quot;xmlDoc is loaded, ready for use&quot;);  &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

3.7 Footer

The footer label defines the footer of the document or section.
The footer element should contain information about its containing element.
The footer usually contains the document's author, copyright information, terms of Use link, contact information, and so on.
You can use multiple footer elements in a document.

<footer>  <p>Posted by: W3School</p>  <p>Contact information: <a href="mailto:[email protected]">[email protected]</a>.</p></footer>

3.8 aside

The aside tag defines what is outside of its content.
The content of the aside should be relevant to nearby content.

<p>Me and my family visited The Epcot center this summer.</p><aside>

3.9 section

The section tag defines the sections in the document (the segments, sections). such as chapters, headers, footers, or other parts of the document.

<section>  

3.10 article

Article tags provide independent self-contained content.
An article should have its own meaning and it should be possible to distribute it independently of the rest of the site.

<article>  

Part of this article was excerpted from W3school

(2) HTML semantics