Semantic meaning

Semantically, I mean using meaningful tags or setting meaningful properties based on content.

The role of semantics

  • HTML structure is clearer, easier to read and maintain
  • Facilitate machine recognition of content, help SEO

Semantic tag

I divide semantic tags into container tags that are used to build structures and tags that specify specific meanings. The following is taken from MDN.

Construct the container tag for the structure

<header>

Used to present introductory content, usually containing a set of useful elements that are introductory or navigational AIDS. It might contain some title elements, but it might also contain other elements, such as a Logo, a search box, an author name, and so on.

Instructions:

  • The
    element is not segmented content, so no new paragraphs are introduced into the outline. That is, the

    element is usually used to contain the title of the surrounding part (h1 through H6 elements), but this is not required.

<main>

Present the body of the application. The body section consists of content that is directly related to the document, or extends to the central topic of the document, or the main functional parts of the application.

Instructions:

  • This should be unique to the document and not include content that is repeated in any series of documents, such as sidebars, navigation links, copyright information, site logos, search boxes (unless the search box is the main function of the document).

  • does not contribute to the outline of the document; That is, unlike elements such as and titles such as

    ,

    does not affect DOM’s concept of page structure. This is strict information.

<aside>

Represents a part of the page that has little to do with the rest of the content, considered separate from that part of the content and can be split off separately without affecting the whole. This usually takes the form of a sidebar or a tag box.

Instructions:

  • Do not use the

<footer>

Represents the footer of the root node element or the content of the most recent chapter. A footer usually contains information about the chapter’s author, copyright data, or links related to the document.

Instructions:

  • The author information in the
    element should be included in the

    element.
  • The
    element is not chapter content, so new chapters cannot be included in outline.

<nav>

The purpose is to provide navigation links in the current document or other documents. Common examples of navigation sections are menus, directories, and indexes.

Instructions:

  • Not all links must use the
  • A web page may also contain multiple
  • For screen dyslexics, you can use this element to determine whether to ignore the initial content.

<article>

Represents a separate structure in a document, page, application, or website, by definition, a structure that can be independently distributed or reused, as in publishing, it could be a forum post, magazine or news article, blog, user-submitted comments, interactive component, or other separate content item.

Instructions:

  • Each
    usually includes a title (< H1 > –

    element) as a child of the

    element.
  • When the
    element is nested, it represents the article associated with the outer element. For example, an

    element that represents a blog comment can be nested within an

    element that represents a blog post.
  • The author information for the
    element is available through the

    element, but not for nested

    elements.
  • The publication date and time of the
    element are indicated by the pubdate attribute of the

  • You can use the datetime attribute of the

<section>

Represents a separate part contained in an HTML document that has no more specific semantic element to represent and typically contains a title.

Instructions:

  • Each
    is generally identified by whether it contains a title as a child node.
  • Use
    instead of

    if the element content can be divided into several parts.
  • Do not use the
    element as a normal container, which is what the

    element should be (especially if the fragment is just for styling purposes). In general, a

    should appear in the document outline.

<details>

You can create a widget that displays the contained information only when it is switched to the expanded state. <summary> is used as a summary, title, or legend of one of the contents of the <details> element.

<ol>/<ul>

The labels OL and UL represent lists. The difference is whether there is an order requirement. The child

  • represents the list item, and the value of li’s attribute value represents the ordinal number of the list item.

    • <dl>

    Is a list of definitions and descriptions of terms, usually used to display glossaries or metadata (key-value pairs lists).

    • is used to declare a term in a list of definitions.
    • is used to indicate the description of a term in a description list.

    <address>

    Represents HTML that provides contact information for a person or organization (and so on).

    Instruction section

    • When representing an arbitrary address unrelated to contact information, use the

      element instead of the

      element.
    • This element cannot contain any information other than contact information, such as a publication date (which should be included in the
    • In general, the
      element can be placed within the

      element if it exists.

    Specifies the label for the specific content

    < h1 > – < h6 >

    The Heading element presents six different levels of Heading, with < H1 > being the highest and < H6 > the lowest.

    Instructions:

    • The user agent can use title information, such as a table of contents for automatically building documents.
    • Do not use a lower level title to reduce the font size of the title. Instead, use the CSS font size property.
    • Avoid skipping level headings: always start with

      , follow with < H2 >, and so on.

    • When using the
      element, for convenience, you should consider avoiding repeating

      on the same page.

      should be used to indicate the title of the page. Other headings should start with

      . When using sections, you should use a

      for each section.

    <a>

    Anchor elements can create hyperlinks to other web pages, files, locations within the same page, E-mail addresses, or any other URL. The rel property can be set prev/next to identify “previous”/” next “, and nofollow to identify documents to which hyperlinks are not recommended.

    <em>/<strong>

    Both labels are used for emphasis, but they are different in form. Em is italic and strong is bold.

    <i>/<b>

    I is italic, and B is bold. The difference between <em> and <strong> is that < I >/<b> does not emphasize/emphasize, but is for attention or typography purposes.

    <img>

    The SRC, Alt attributes determine the meaning of the image

    • SRC and Alt are empty strings representing decorative diagrams
    • SRC and Alt is a non-empty string, shown as part of the document content
    • With SRC and no Alt, the graph is part of the content but no equivalent text content is available

    <p>

    Represents a paragraph of text. This element is typically represented as a block of text separated from adjacent text, either separated by vertical whitespace or indented by the first line.

    attribute

    title

    Contains text that represents consulting information, relative to the element to which it belongs. This information is usually present, but not necessarily presented to the user as a prompt. Some typical use cases:

    • Link: The title or description of the linked document
    • Media elements, such as images: descriptions or associated information
    • Paragraphs: footnotes or relevant comments
    • Quote: author information, among others

    SEO

    If you want to learn more about how the front end achieves SEO or how the Vue single-page project achieves SEO, feel free to click on my other article, the Complete GUIDE to Vue Single-page Project SEO.