Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to use HTML5 semantic tags. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

What is semantics?

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

Because you have CSS's beautiful clothes, even if your HTML is a mess, CSS can make it look beautiful.

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

The so-called semantics, is to rely on the HTML itself, can also experience a humanized structure!

The benefits of semantics

In the absence of CSS, the page can also present a good content structure, code structure. In this way, developers can see your intention at a glance and break the ice in a second!

Friendly to SEO. Friendly to developers, so to developers' bugs, of course!

When the tag is applied properly to reflect the weight of the keywords you want in the context, then the search engine crawler is on your head. Then the number of visitors to the website will come.

Can support some special devices (blind reading, mobile devices), web page translation, etc.

The most intuitive point is that your teammates want to cooperate with you! The semantics of your code is loved by your teammates.

Semantics are more readable, and teams that follow the W3C standard follow this standard, which reduces differentiation. (quickly integrate into job-hopping? )

Reflections on semantics in work

Don't use some plain style tags, these CSS will help us do it. Such as: B, font, u and other tags.

Text that needs to be emphasized can be included in strong or em tags (strong default style is bold (do not use b), em is italic (not I). Use mark tags to represent annotated / highlighted text.

But you can still consider using CSS to do it.

The description text corresponding to each input tag needs to use the label tag, and the description text is associated with the corresponding input by setting the id attribute for the input and setting for=someld in the lable tag.

Form fields are wrapped in fieldset tags and legend tags are used to describe the purpose of the form.

You should use-to represent the title.

When writing styles with CSS, naming also needs to follow the structure of HTML, reflecting the essence of semantics.

Semantic label

1. The tag defines the header of the document

It usually contains the front and subtitles of the page.

Is he really a beautiful man?

According to the on-the-spot investigation, he is really a beautiful man!

2. Tags define the footer of a document or section

The footer usually contains the author of the document, copyright information, links to terms of use, contact information, and so on.

You can use multiple elements in a document.

Posted by: beautiful man

3. The tag specifies the main content of the document.

The content in the element should be unique to the document.

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

Multiple elements cannot appear in a document. An element cannot be a descendant of the following elements:, or.

My introduction

I'm a smart kid.

4. Tags define fragments in the document.

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

PRC

The People's Republic of China was born in 1949...

5. Tags stipulate independent self-contained content

Such as the comments under the article.

Why am I smart?

The secret of my intelligence is that I like to think.

6. The tag defines something other than the content it is in.

Used to load the content of a non-body class. Such as advertisements, grouped links, sidebars, etc.

Clever research

Why am I smart?

The secret of my intelligence is that I like to think.

7. The element represents the navigation link area of the page.

Used to define the main navigation part of the page.

Baidu Guizimo is a semantic template.

Let's look at a picture first.

It seems that a label-oriented HTML structure is very clear.

These are all the contents of the article "how to use HTML5 semantic tags". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.