“This is the fifth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Knowledge about

What are semantic tags

Semantic tagging is the ability to make the tag have its own meaning.

Compare the differences between the two HTML files below

Traditional label

<div class="header">
  <h1>Html5 semantic tags</h1>
  <div class="nav">
    <h2>navigation</h2>
    <ul>
      <li>Chapter tag</li>
      <li>The title tag</li>
    </ul>
  </div>
</div>
Copy the code

semantic

<header>
  <h1>Html5 semantic tags</h1>
  <nav>
    <h1>navigation</h1>
  <ul>
    <li>Chapter tag</li>
  <li>The title tag</li>
  </ul>
  </nav>
</header>
Copy the code

You can clearly see the header description, but semantic tags can clarify the meaning of the content.

Advantages of semantic tags

  1. The code structure is clear, easy to read, and conducive to team development.
  2. Facilitate parsing by other devices (screen readers, blind readers, mobile devices) to render web pages in a semantic manner.
  3. Good for search engine optimization (SEO).

Common semantic tags

HTML.spec.whatwg.org/

<title>: Page subject content.<hn>: H1 ~ H6, classification title,<h1><title>Coordination is good for search engine optimization.<ul>: Unordered list.<li>: Ordered list.<header>The header usually includes the site logo, main navigation, site-wide links, and a search box.<nav>: Tag navigation, used only for important link groups in the document.<main>: Main content of a page. A page can be used only once. If it's a Web application, cover its main functions.<article>: Defines external content that is independent of the rest of the document.<section>: Defines sections in a document. Such as a chapter, header, footer, or other part of a document.<aside>: Defines the content beyond the content it is in. A sidebar, a set of links to an article, an advertisement, a friendship link, a list of related products, etc.<footer>: footer, the footer of the entire page only if the parent is body.<small>: Render small print, specify details, enter disclaimer, annotation, signature, copyright.<strong>Like the EM tag, the: is used to emphasize text, but with a stronger degree of emphasis.<em>: Represents the text as emphasis, in italics.<mark>: Highlight part of the text with yellow.<figure>: Specifies separate streams of content (images, charts, photos, code, etc.) (default margin around 40px).<figcaption>: Defines the title of the figure element, which should be placed in the position of the first or last child of the figure element.<cite>: refers to a reference in the contained text, such as the title of a book or magazine.<blockquoto>: defines block references, which have their own space.<q>: Short quotes (cross-browser issues, avoid using them).<time>The: datetime attribute follows a specific format. If this attribute is ignored, the text content must be in a valid date or time format.<abbr>: Abbreviation or abbreviation.<dfn>: Defines the term element, which must be next to the definition and can be used in the description list DL element.<address>: Contact information for the author, person or organization (email address, link to contact information page).<del>: Removed content.<ins>: Added content.<code>: Marks the code.<meter>: Defines a scalar measure within a known range or fractional value. (Internet Explorer does not support meter tags)<progress>: Defines the running progress (process).Copy the code

Main part

<html>
    <head>
        <title>HTML</title>
    </head>
    <body>
        <aside></aside>  
        <header></header>
        <main></main>
      	<footer></footer>
    </body>
</html>
Copy the code
  • Aside: aside bar, a set of links to an article, an advertisement, a friendship link, a list of related products, etc
  • Header: The header usually includes the site logo, main navigation, site-wide links, and a search box.
  • Main: Indicates the main content of a page. A page can be used only once. If it’s a Web application, cover its main functions.
  • Footer: the footer of the entire page, only if the parent is body.

The navigation bar

<nav>
  <h2>The navigation bar</h2>
  <ol>
    <li>history</li>
    <li>tag</li>
    <li>Semantic HTML</li>
    <li>distribution</li>
  </ol>
</nav>
Copy the code

  • Nav: Tag navigation, used only for important link groups in the document
  • Ol: Ordered list

The paragraph

<article>
    <h1>First, the headline</h1>
    <section>
        <h1>1. The headings</h1>
        <section>
            <h1>1.1 headings</h1>
        </section>
    </section>
</article>
Copy the code

You can see how easy it is to do this with the section tag +h1.

content

The body of the<q>Quote from 2</q>
    <del>Deleted content</del>
    <ins>Added content</ins>
Copy the code

Commonly used in text

  • Del: Deletes the content
  • Ins: Add content
  • Q: Reference content

Reference picture

    <figure>
        <img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/200px-HTML5_logo_and_wordmark.svg.png" alt="">
        <figcaption>HTML5Logo</figcaption>
    </figure>

Copy the code
  • Figure: Specify separate stream content (images, charts, photos, code, etc.) (default margin around 40px).

  • Figcaption: Content caption

Code and results

<pre><! Preformatted text with Spaces and newlines -->
    <code>exports.call = function (context, ... Args) {// this is the call method example :f.call this = f context.fn = this; const result = context.fn(... args); delete context.fn; return result; };</code>✅ Running result:<samp><! -- a phrase tag used to format text in a document for computer output -->(base) ➜ call-apply-bind git:(master) qualify jest.. /call-apply-bind PASS __tests__/index.spec. Js ✓ Test the call method (7 ms) ✓ Test the apply method (1 ms) ✓ Test the bind method (1 ms), ✓ Test the call method (7 ms), ✓ Test the apply method (1 ms), ✓ Test the bind method (1 ms) ms) Test Suites: 1 passed, 1 total Tests: 3 passed, 3 total Snapshots: 0 total Time: 1.657 s Ran all test suites matching /.. \/call-apply-bind/i. (base) ➜ call-apply-bind git:(master) qualify</samp>
</pre>
Copy the code
  • pre: Preformatted text preserves Spaces and newlines
  • Samp: A label represents a text character that the user should have no other interpretation of. This tag is usually used to extract these characters from normal context.
  • Code: Used to refer to computer code

The interview guide

A major update to HTML5 is the addition of a series of semantic tags. I hope we can clarify the meaning of + description system.