[HTML] Talk about the semantic understanding of HTML5

introduction

github: [HTML] Talk about the semantic understanding of HTML5

Content Express: What you can learn after reading this article

HTML5 semantic

Before talking about what semantics is, let's take a look at the background of semantics.

As mentioned in the previous article, the most important feature of HTML is tags. But the project is so big, there are so many labels that I can't understand, and there are piles of piles. Some of the names are weird, and I was persuaded to quit if I wanted to maintain them. Teamwork led to the start of team battles!

Therefore, semanticization is imminent!

1. What is Semanticization

It doesn't really matter when we write HTML, because users can't see what you look like inside, and don't need to see it.

Because you have beautiful clothes with CSS, even if your HTML is a mess, CSS can make it shine.

But users can't see it, developers can see it! Therefore, this semantic friend is the developer himself.

The so-called semantics means that HTML itself can also experience a humanized structure!

2. The benefits of semantics

In the absence of CSS, the page can also present a good content structure and code structure. In this way, developers can understand your intention at a glance, breaking the ice in a second!
SEO friendly. If it is friendly to developers, it is of course also to the little bugs of developers!

When tags are applied properly, reflecting the contextual weight you want your keywords to have, then the search engine crawlers are on your way. Then the traffic of the website will not come.
It can support some special devices (blind reading, mobile devices), webpage translation, etc.
The most intuitive point is that all your teammates want to cooperate with you! Your teammates love the semantics of your code!

Semantics are more readable, and teams that follow the W3C standard follow this standard, reducing differentiation. (Job-hopping and quick integration?)

3. Semantic thinking in work

Don't use some pure style tags, these CSS will do it for us. Such as: b, font, u and other labels.
Text that needs to be emphasized can be included in strong or em tags (, the default style of strong is bold (do not use b), em is italic (do not use i). Use mark tags to indicate marked/highlighted text.

But you can still consider using CSS to complete.
The description text corresponding to each input tag needs to use the label tag, and set the id attribute for the input and set for=someld in the lable tag to associate the description text with the corresponding input.
The form fields should be wrapped with the fieldset tag, and the purpose of the form should be described with the legend tag.
Should be used <h1> - <h6>to represent the title.
When writing styles with CSS, naming also needs to follow the structure of HTML, reflecting the essence of semantics.

4. Semantic tags

1. <header>The label defines the header of the document

Usually contains the title and subtitle of the page.

<header>
<h1>他真的是美男子吗?</h1>
<p>据现场勘查，他真的是美男子！</p>
</header>

2. <footer>The tag defines the footer of the document or section

Footers typically contain the author of the document, copyright information, a link to terms of use, contact information, and more.

<footer>Multiple elements can be used in one document .

<footer>
  <p>Posted by: 美男子</p>
</footer>

3. <main>The label specifies the main content of the document.

<main> The content within the element should be unique to the document.

It should not contain content that is repeated throughout the document, such as sidebars, navigation bars, copyright information, site logos, or search forms.

There cannot be more than one <main>element . <main> Element cannot be a descendant of: <article>, <aside>, <footer>, <header> or <nav>.

<main>
  <h1>我的介绍</h1>
  <p>我是一个聪明的孩子</p>
</main>

4. <section>Tags define fragments in a document.

Such as chapters, headers, footers, or other parts of the document.

<section>
  <h1>PRC</h1>
  <p>The People's Republic of China was born in 1949...</p>
</section>

5. <article>Labels specify independent, self-contained content

such as comments on articles

<article>
   <h1>我为什么聪明呢</h1>
   <p>我聪明的秘诀是我爱思考</p>
</article>

6. <aside>Tags define content outside of the content in which they are placed.

Used to load non-text content. Examples include ads, grouped links, sidebars, and more.

<p>聪明的研究</p>
<aside>
  <h1>我为什么聪明呢</h1>
  <p>我聪明的秘诀是我爱思考</p>
</aside>

7. <nav>The element represents the navigation link area of the page.

Used to define the main navigation section of the page.

<nav>
<ul>
<li><a href=”https://www.baidu.com”>百度</a></li>
<li><a href=”https://www.guizimo.com”>归子莫</a></li>
</ul>
</nav>

5. A semantic template

Let's look at a picture first.

Semantic HTML

It seems that a beautiful HTML structure is very clear.

6. Summary

Some friends will definitely ask, the code is usually written in the framework, basically do not need to use these, and it is not to write a personal website or official website, but to write some business-type H5 or background management.

In fact, for personal websites or official websites, semantics has practical value. Moreover, this is also a frequently asked question in interviews in recent years. The most important thing is to learn the semantic meaning. Achieve code semantics, including function naming, component naming, and component business function splitting. Always on the road!

Do you want to restructure the front-end knowledge system?

Good series

HTML History: 【HTML】Would you still read HTML? Take you to review or walk into

HTML tags: 【HTML】Take you back to those vaguely remembered tags in HTML

HTML video: 【HTML】Talk about how to play HTML5 video

HTML audio: [HTML] Changes brought by HTML5 to web audio

HTML semantics: [HTML] Talk about the understanding of HTML5 semantics

HTML positioning: 【HTML】HTML5's new feature Geolocation

HTML drag and drop: 【HTML】Have you used HTML5 drag and drop?

HTML cache: [HTML] Why don't you take a look at HTML5's WebStorage?

HTML Application Cache: 【HTML】HTML5 Application Cache

HTML的Web Werkors：【HTML】HTML5的Web Werkors

Blog Description and Acknowledgments

Some of the information involved in the article comes from the Internet, which contains my own personal summary and opinions. The purpose of sharing is to build a community and strengthen myself.

If the referenced material is infringing, please contact me to delete it!

Thanks to the almighty network, W3C, rookie tutorials, etc.!

Thank you for your hard work , personal blog , GitHub learning , GitHub

Public account [Guizimo] , mini program [Zimoshuo]

If you feel that it is helpful to you, you might as well give me a thumbs up to encourage me, remember to collect good articles! Follow me and grow together!

Luckily I'm here, thanks for coming!