What is semantic

Semantic, refers to the structure of the text content (content semantic), choose semantic tag (code semantic), easy for developers to read, maintain and write more elegant code at the same time, let the browser crawler and assistive technology better parsing.

Second, why focus on semantics

By using HTML tags with proper semantics, you can effectively improve the structure and meaning of your page:

1, accessibility: to help assistive technology better read and translate your web page, conducive to barrier-free reading;

2, checkability: with a good structure and semantics, can improve the effective search engine crawl, improve site traffic;

3. Internationalization: Only 13% of the world’s population are Native English speakers, so common semantic tags make it easier for developers from all over the world to understand the structure of your web page;

4, interoperability: reduce the difference between web pages, help other developers understand the structure of your web page, convenient later development and maintenance;

3. Abused semantic labels

Here are some of the most widely abused semantic tags:

Blockquote: Some people indent text by using the <blockquote> tag, because references are indented by default. If you just want the text to be indent and the text itself is not a reference, use CSS margin instead. P: Some developers use <p>&nbsp; </p> to add an extra blank paragraph to the tag self-inspection. This should be done using CSS margin/padding; Ul: Some developers add text to <ul> to indent text, which is both semantically inappropriate and illegal HTML practice. The < UL > label can contain only the < LI > label. <h1>~<h6> : This tag can make the text larger and thicker, but if the text is not a title, use CSS font-weight font size.Copy the code

Conclusion: In fact, the above four examples are to illustrate a point, with the right label to do the right thing.

4. Semantic label introduction

Before HTML5, we used to use divs to represent sections or different modules on a page, but div itself had no semantics. But now, SEMANTIC tags have been added to HTML5 to make document structure clearer.

Again, the W3C has created these semantic tags that are unlikely to fully meet our design goals. Our goal is to enable developers or crawlers to understand the semantic content of each module. Therefore, div, as an element that has no semantics and is only used to build structures, is the most suitable tag for containers.

Let’s take a look at HTML5 semantic tags:

<header>

Define the introduction information of the article: title, logo, slogan; Wrap the contents section, search box, a nav or any associated logo;

There is no limit to the number of

on a page. You can add one header per content block.

<nav>

Define article navigation bar, links, etc. Nav usually works with u and LI as a navigation bar;

<main>

The main tag, which defines the main content of an article, is unique within a document, and its descendants often include

;

<article>

Define that the document can be separated from the rest of the document, a separate piece of content, usually with a title. When an article is embedded within an article, the inside and outside content should be related, such as a tweet and its comments.

<section>

It differs from an article in that it is part of a whole, or a section of an article.

<aside>

A sidebar (existing alongside an article) or embedded content (within an article), usually considered a separate, independent part of the article, as ancillary information to the main content, such as an index, a list of terms, or ancillary information to a page or site, such as advertisements, author profiles, etc.

<footer>

Footer, usually containing author, copyright information, or related links, etc.

Semantic tags that are easily confused

The following two groups of elements, although very similar in style, have different aspects of semantics. Understanding the differences between them can help you understand the semantic thinking of HTML5…

< I > refers to an ordinary text, which is different from the normal text for some reason, such as professional terms, foreign language phrases or text used in typesetting, which is usually in italics and does not change the semantics.

If a text contains terms in different languages, you need to add the

attribute to the < I > tag as an annotation, as shown in the following example:

  <p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
Copy the code

< I lang=” FR “> is a comment on je ne sais quoi (idiom, wonderful meaning), indicating that the language of the term is French;

<em>

To emphasize the content of the text;

Its emphasis on different positions often brings semantic changes (it can be understood as the emphasis on different positions in a sentence in spoken English affects the understanding of listeners).

It’s also italic visually;

is not suitable for conveying importance. Use for conveying importance.

The tag does not, per se, italicize the contained text. Sometimes the author just wants part of the text to stand out in a paragraph/sentence, or in a different tone or voice.

<b>

B represents bold on the style;

It contains text, does not have the role of emphasizing importance, does not affect voice and mood, only from the style of the inclusion of text specialization;

Common keywords, executable statements in text-driven software or the lead of an article, product/function names in instructions, etc.

<strong>

Strong implies emphasis, intended to convey the importance (need to be seen as soon as possible), seriousness, or urgency of the content;

Conclusion:

is used to highlight important points in a piece of text. The emphasis of position often affects the meaning of the text. If you want to highlight a text only in voice or mood, use < I >.

When using < I >, the W3C encourages developers to check to see if there is a more appropriate alternative tag, such as above, to highlight points, or < DFN > to define a term;

Use to highlight the importance, urgency, and severity of the text;

The W3C explicitly states that the element should be the last tag to be considered when no other tag is appropriate. By implication, the b tag is not officially recommended.

<figure>

Embedded content in the document, such as referenced images, illustrations, tables, code snippets, etc., can be used as separate units that do not affect the body when transferred to appendices or other pages. Such elements can be placed within the

element. And can be matched with its child
for good element description or comment information;

<img>

The img element should be accompanied by an Alt message, which is a text description of the image that is displayed when the image is not viewable.

<table>

The table element now has a set of semantically structured tags

: A table with a caption that jumps out of the table;

: the table header row that defines the table header contents;

: body of the table, body of the table;

: the footnote part of the table, tfoot to be used with thead, tbody;

<form>

The use of the < label > tag: label tag, as the input element definition, improved the availability of the form controls, when you click on the label tag, focused to the corresponding control automatically, there are generally two kinds of usage, the label tag

  1. The for attribute of the label corresponds to the id of the control, for example:

    <label for="username"> please input username: </label> <input type="text" id="username" name="username">Copy the code

  2. Embedded controls in a label, such as:

    <label> please enter username <input type="text" id="username" name="username"></label>Copy the code

In addition,

1. Placeholder properties, whose value will be displayed when the input field is empty and will disappear when the field is in focus;

2, radio radio control and checkbox control in the form and the dropdown select control, you can add checked property for radio, checkbox and selected property for Option to make them selected by default.

This article reprinted from: zhuanlan.zhihu.com/p/32570423