What are semantic elements?

Semantic elements clearly describe their meaning to browsers and developers. That is, the element itself conveys some information about the type of content the tag contains. For example, when the browser parses a tag, it interprets it as the most important title containing that piece of content.

Non-semantic elements: <div> and <span> – cannot provide information about their content.

Semantic elements: <form>, <table>, and <img> – clearly define their contents.

Why semantic?

  1. Page structure: Provides good content structure without CSS
  2. Good for SEO: crawlers rely on tags to determine the weight of keywords, so it can help crawlers grab more effective information
  3. Improve user experience: For example, title and Alt can be used to explain names or image information, and label can be flexibly used.
  4. Ease of team development and maintenance: Semantization makes your code more readable, makes your HTML structure more understandable to other developers, and reduces differentiation.
  5. Facilitate parsing by other devices: screen readers, blind readers, mobile devices, etc., to render web pages in a meaningful way.

There are about 100 HTML semantic elements to choose from.

Common semantic elements are as follows:

The structure of the body The text consistent
  • h1
  • h2
  • h3
  • p
  • ul
  • ol
  • li
  • blockquote
  • a
  • strong
  • em
  • q
  • abbr
  • small

Many web sites contain HTML code that indicates navigation, headers, and footers, such as: <div id=”nav”> <div class=”header”> <div id=”footer”>.

With HTML4, developers would style page elements using their favorite attribute names:

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, …

As a result, the browser does not recognize the correct web content.

HTML5 provides new semantic elements that define different parts of a page:

The label describe
<article> Define the article.
<aside> Define content beyond the content of the page.
<details> Define additional details that users can view or hide.
<figcaption> Define the title of the <figure> element.
<figure> Specify self-contained content, such as diagrams, diagrams, photos, code listings, and so on.
<footer> Defines the footer of a document or section.
<header> Specifies the header of a document or section.
<main> Specify the main content of the document.
<mark> Define important or emphatic text.
<nav> Define navigation links.
<section> Define sections in the document.
<summary> Defines the visible title of the < Details > element.
<time> Define the date/time.

The < article > element

The <article> element defines the page-independent content, which can have its own headers, footers, sections, etc., for blog posts, newspaper articles, or web articles focused on a single topic. An article can be nested with an article, as long as the inside article and the outside article are part and whole.

The instance

<article>
   <h1>What Does WWF Do?</h1>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article> 
Copy the code

The < section > element

The <section> element defines sections in the document.

According to THE W3C HTML document, “A section is a group of content with a topic, usually a title.”

You can divide your home page into introduction, content, contact information, and so on.

The instance

<section>
   <h1>WWF</h1>
   <p>The World Wide Fund for Nature (WWF) is....</p>
</section> 
Copy the code

The < header > element

The <header> element specifies the header for a document or section.

The <header> element should be used as a container for introductory content. The presentation area used to define a page, usually including the site logo, main navigation, site-wide links, and a search box. It is also good for marking up a set of introductory or navigational content within a page.

You can have more than one <header> element in a document.

The following example defines the header for an article:

The instance

<article>
   <header>
     <h1>What Does WWF Do?</h1>
     <p>WWF's mission:</p>
   </header>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article> 
Copy the code

The < footer > element

The <footer> element specifies the footer for a document or section.

The <footer> element should provide information about the elements it contains.

The footer usually contains the author of the document, copyright information, links to terms of use, contact information, and so on.

You can use more than one <footer> element in a document.

The instance

<footer>
   <p>Posted by: Hege Refsnes</p>
   <p>Contact information: <a href="mailto:[email protected]">
  [email protected]</a>.</p>
</footer> 
Copy the code

The < nav > element

The <nav> element defines a collection of navigation links.

The <nav> element is intended to define large blocks of navigation links. However, not all links in the document should be in the <nav> element!

The instance

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav> 
Copy the code

< value > element

<aside> element Something outside the main content of the page (such as a sidebar).

Aside should be related to the surrounding content.

The instance

<p>My family and I visited The Epcot center this summer.</p>

<aside>
   <h4>Epcot Center</h4>
   <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside> 
Copy the code

<figure> and <figcaption> elements

Headlines that accompany pictures are common in books and newspapers.

A caption adds visual explanation to an image.

With HTML5, images and titles can be combined in

elements:

The instance

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure> 
Copy the code
Fig1.-html semantic.

Other semantic elements:

< blockquote > * * * * elements

To define a block reference, the browser adds a line break before and after the blockQuote element and adds a margin. The cite attribute can be used to specify the source of a reference

<blockquote cite="https://en.wikiquote.org/wiki/Marie_Curie">
    Here is a long quotation here is a long quotation here is a long quotation
    here is a long quotation here is a long quotation here is a long quotation
    here is a long quotation here is a long quotation here is a long quotation.
</blockquote>
Copy the code

The < abbr > element

Explain abbreviations. Use the title attribute to provide the full name, which is used only for the first occurrence.

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
Copy the code

Seek a key three connect ~

Related series: Front End Foundation from scratch journey (super detailed, constantly updated ~)

Reference Documents:

HTML semantic elements: www.w3school.com.cn/html/html5_…

HTML semantic tags: blog.csdn.net/qq_38128179…