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

This article will explain in detail the sample analysis of HTML5 semantics for everyone. Xiaobian thinks it is quite practical, so share it with you for reference. I hope you can gain something after reading this article.

1 What is HTML semantics?

Basically, it revolves around several main tags, such as title (H1~H6), list (li), emphasis (strong em), etc.>

According to the structure of the content (content semantics), select the appropriate tags (code semantics) so that developers can read and write more elegant code while allowing the browser crawler and machine to parse well.

2 Why semantically?

In order to present a good content structure and code structure without CSS: to look good when streaking;

User experience: for example, title, alt is used to explain nouns or explain picture information, label is used;

Good for SEO: good communication with search engines helps crawlers grab more effective information: crawlers rely on tags to determine context and the weight of each keyword;

Make it easier for other devices (e.g. screen readers, blind readers, mobile devices) to render web pages in a meaningful way;

It is easy for teams to develop and maintain, semantic is more readable, is the next important trend of the web page, follow the W3C standard team to follow this standard, can reduce differentiation.

What should I pay attention to when writing HTML code?

Minimize the use of non-semantic labels p and span;

When the semantics are not obvious, you can use p or p, try to use p, because p has an upper and lower spacing by default, which is beneficial to compatible special terminals;

Do not use pure style tags, such as b, font, u, etc., use css settings instead.

Text that needs to be emphasized can be included in the strong or em tag (browser default style, can be specified with CSS without them), strong default style is bold (do not use b), em is italic (do not use i);

When using a table, use caption for the title, thead for the header, tbody for the body, and tfoot for the tail.

The header should be distinguished from the general cell, with th for the header and td for the cell;

Form fields should be wrapped with fieldset tags and legend tags explaining the purpose of the form;

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

4. What semantic tags are added to HTML5

The goal of HTML5 is to write simpler HTML code and create simpler Web applications.

Exciting new features include: new html tags and attributes, full support for CSS3, video and audio tags, 2D/3D drawings, local storage, local SQL database.

Why Semantic Elements: To make it easier for developers to visualize the menu of each part of the page, and for search engines and screen readers for visually impaired people to recognize each part of the page.

Block tags:

Tag article: Represents a separate piece of content contained within a document, page, application, or website, that is, it can be published or reused independently.

use

Some examples of using an article: a blog post, a forum post, a news story, a user comment.

Tag header

It is usually placed at the top of the page, or at the top of a block element in the page, containing information such as the title and introduction of the entire page or a block.

A document can contain more than one header tag; the header tag does not have to be displayed at the top of the page, its content determines that the header tag needs to be used here, the location is not important; header elements can be added for body,article,section and aside.

Tag footer

It is usually placed at the bottom of the page, or at the bottom of a block element in the page.

Tags nav

Represents navigation of a page, which can be navigated to other pages of the site, or other parts of the current page.

A search engine or screen reader determines the content of a site based on nav tags, not just any set of hyperlinks.

label aside

The content contained is not the main content of the page, but is independent and complementary to the content of the page.

Some examples of using aside: sidebar; ads; links; article quotes.

Tag section

A thematic content grouping, usually consisting of a header and possibly a footer.

Comparison of the tag p and section: The tag p is more widely used, as long as you want to define a style for a section; the tag section contains content that is an explicit topic, usually with a heading area.

Content grouping label:

label main

Display the main content of the page; each page can only contain one main tag; the main tag does not contain the website title, logo, main navigation, copyright notice and other information.

label figure

Defines the grouping of media content, as well as their titles.

tag figcaption

Defines the title of the figure element.

Text level semantic tags:

label time

New tags for HTML5. Represents a date, or a time, or both.

Labels i and b

Tags that already existed in HTML4 and were given new semantic functionality in HTML5.

labeli

In HTML4, it is a modifier of text style, showing text as italic text; in HTML 5, it means emphasizing different emotions or sounds, but also technical terms, biological classifications, idioms or idioms from another language, an idea, and so on.

tag B

In HTML4, it is a modifier of text style, displaying text as bold text; in HTML5, it represents keywords, product names, etc. in the document.

Tags em and strong

HTML4 already has semantic functionality.

Tag em: emphasis, the content in the tag is used to emphasize the important content, will be displayed as italic text by the browser.

Tag strong: Indicates importance, severity, or urgency of content; will be displayed as bold text by browsers.

Usage advice: If you simply want to style text in italics or bold, please don't use these semantic tags. The W3C recommends that we define text styles in CSS stylesheets.

About "HTML5 semantic sample analysis" This article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

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.