This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Why not use it blindly<div>?

Let’s start with an example:

The < div > < div > this is a xx < / div > < div > XXXX < / div > < div > XXXX < / div > < div > XXXX < / div > < / div >Copy the code

If you see an HTML page structure like this, can you imagine what it is?

If you take over the page, maintenance will probably feel as much like untangling a headphone cord…

What about the next page structure?

<body> <header> This is a page </header> <aside> advertisement or navigation </aside> <main> </main> <footer>Copy the code

Is it natural to think of a web structure like this? (Don’t say surprise 😋)

Through such a web page structure, which part of the need to modify, as long as the right medicine is good, mother no longer need to worry about my bald head.

This is the most intuitive use of semantic tags in development today. It shows the structure of the web page more intuitively. It can be hard to see when you’re working alone, but it’s easy to see when multiple people are working together or looking back at your own pages.

In addition, the functions of semantic tags generally include the following points:

  • Optimized the structure of the code to render the content well structured without looking at CSS
  • Crawlers rely on tags to determine the weight of keywords. More semantic tags help crawlers grasp more effective information and increase the weight of pages
  • It adds a barrier-free reading experience and makes every part of the book have its meaning

Common semantic tags

The header of a web page

<header> This is a page </header>Copy the code


The main part of the page

<main> Page content </main>Copy the code

The footer part of the page

<footer> header, this page is written by XXX </footer>Copy the code

<aside> <h2> </h2> <p> Lana's fantastic cave adventure, content source :I club game -https://isheweiyi.com (funny) </p> </aside>Copy the code

The 

<nav>
    <a>Home</a>
    <a>Other</a>
    <a>About</a>
</nav>
Copy the code

defines page-independent content, where you can nest

,

,
, etc
 
<article> <header> </header> <main> </article>Copy the code

Document sections of web pages, long forms or articles

<section>
    <p>xxxx</p>
</section>
Copy the code

is used for images in the document

<figure> <p> <img SRC ="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>Copy the code

These semantic tags can be used instead of

to describe the structure of a web page more meaningfully

Special label

In addition to the semantic tags mentioned above, these special tags can also be used to some extent to replace the use of

. They often have a unique role and can bring some effect to a web page.

make the font bold

If you can understand these words, you <b>understand</b> them
Copy the code

Make the font one size larger (but not thicker)

If you can understand these words, you <big>understand</big> them
Copy the code

< WBR > determines the position of a long string to switch lines:

<! <p>abcde< WBR >fghigkl< WBR > MNPQRS < WBR > tuvwXYZ </p>Copy the code

One of the functions of the and 

 Code tags is to indicate to the browser that the text surrounding the code tag is computer source code, and the browser can make its own styling. The Pre tag does not do this, but the Pre tag can preserve Spaces and newlines in the text. Preserving whitespace and newlines in text is a must for the display of computer source code. Common nested use of code and pre is 
hrllo world




<! Try whitespace (only pre keeps whitespace). script type=&quot; text/javascript&quot; src=&quot; loadxmldoc.js&quot; &gt; <br> <code> &lt; script type=&quot; text/javascript&quot; src=&quot; loadxmldoc.js&quot; &gt; </code> <pre> &lt; script type=&quot; text/javascript&quot; src=&quot; loadxmldoc.js&quot; &gt; </pre>Copy the code



     Provide meta-information about the page


<! This code tells IE that ie8/9 and later versions will render the page as the highest version of IE. --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <! <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=" content-type "Content ="text/ HTML; charset=gb2312" /> <meta name="keywords" content="HTML,ASP,PHP,SQL">Copy the code



    
      Design multiple images to better populate the browser viewport
    


<! JPG for 650px and above, iamge1.jpg, 650px-465px, image2.jpg... --> <picture> <source media="(min-width:650px)" srcset="/image1.jpg"> <source media="(min-width:465px)" srcset="/image2.jpg"> <img src="/image3.jpg" alt="Flowers" style="width:auto;" > </picture>Copy the code


 shows the download progress of the program


<progress value="45" max="100">
</progress>
Copy the code


 emphasizes the content


<p>To compare with other all you life is the <strong>source</strong> of life tragedy</p>
Copy the code


 is also the focus of the marking, usually in italics


<p>To compare with other all you life is the <em>source</em> of life tragedy</p>
Copy the code


These special tags, in addition to more clearly express the structure of the web page, but also have some special functions can be more convenient to express the web page.


If you can’t remember these labels immediately, bookmark them. Every time you need to optimize the page structure, read it, maybe you can help oh 😋