HTML5 semantic summary

Html semantic understanding

## 1. What is HTML semantics?

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

Based on the structure of the content (content semantics), choosing appropriate tags (code semantics) facilitates developers to read and write more elegant code, while allowing browser crawlers and machines to parse it well.

　2. Why semantics?

In order to present a good content structure and code structure on the page without CSS: in order to look good when running naked;

User experience: for example, title and alt are used Explain nouns or explain picture information, and the flexible use of label tags;

It is beneficial to SEO: establish good communication with search engines, which helps crawlers to crawl more effective information: crawlers rely on tags to determine the context and the weight of each keyword;

to facilitate other device parsing (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful way;

It is easier for team development and maintenance, and semantics are more readable. It is an important trend in the next step of web pages. Teams that follow W3C standards all follow this standard, which can reduce differentiation.

##　3. What should you pay attention to when writing HTML code?

Use the unsemantic tags p and span as little as possible;

When the semantics are not obvious, you can use p or p, try to use p, because p By default, there is upper and lower spacing, which is beneficial for compatibility with 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, if you can specify it with CSS, do not use them), the default style of strong is bold (do not use b), em is in italics (without i);

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

Table headers should be distinguished from ordinary cells. Use th for table headers and td for cells;

Form fields should use fieldset tags Wrap it up and use the legend tag to explain the purpose of the form;

The description text corresponding to each input tag needs to use the label tag, and set the id attribute for the input in the label tag for=someld to associate the description text with the corresponding input.

## 　4. What new semantic tags are added to HTML5

The goal of HTML5: write more concise HTML code and create simpler Web programs.

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

Why should we introduce semantic elements: to allow developers to more intuitively understand the menu of each part of the page, and at the same time, search engines and screen readers used by visually impaired people can also more easily identify every part of the page.

## 　

Block tag: Tag article: Indicates an independent piece of content contained in a document, page, application or website, that is, it can be published or reused independently.

##　

Use

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

Tag header

## Usually placed At the top of the page, or at the top of a certain block element in the page, it contains the title, introduction and other information of the entire page or a certain 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 the need to use the header tag here. The position is not important; it can be body, article , section and aside add header elements.

Tag footer

Generally placed At the bottom of the page, or at the bottom of a block element on the page.

##　 Tagsnav

## Represents the navigation of the page, which can be connected to other pages of the website or other parts of the current page through navigation.

Search engines or screen readers will determine website content based on nav tags. Not any set of hyperlinks is suitable for placement in nav tags.

## Contents contained in the tag aside

## It is not the main content of the page, but independent and supplements the content of the page.

Some examples of using aside: page sidebar; advertisements; friendly links; article quotations (content summary).

## Tag section

A topic Content grouping usually contains a header and possibly a footer.

Comparison between tag p and section: tag p is more widely used. As long as you want to define a style for a region, you can use the p tag; the content contained in the tag section is a clear The topic, usually with a title area.

## Content grouping tags:

Tagmain

Display the main body of the page Content; Each page can only contain one main tag; the main tag does not contain website title, logo, main navigation, copyright statement and other information.

## Tag figure

Define media content groups, and their titles.

## Tag figcaption

## Define figure element title.

Text-level semantic tags:

## Tag time

New tag for HTML5. Represents a date, a time, or both a date and time value.

## Tags i and b

## HTML4 Tags that already exist are given new semantic functions in HTML5.

## Tags i

In HTML4 , is to modify the text style and display the text as italicized text; in HTML5, it means to emphasize different emotions or sounds, and can also represent technical terms, biological classification, idioms or idioms from another language, an idea, etc. .

## Tag b

In HTML4, It modifies the text style and displays the text as bold text; in HTML5, it represents keywords, product names, etc. in the document.

## Tag em and strong

## in HTML4 already has semantic functions.

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

Tag strong: Indicates very important, serious or urgent content; will be displayed as bold text by the browser.

Usage suggestions: If you simply want to display the text style as italics or bold, please do not use these semantic tags. W3C recommends that we define text styles in CSS style sheets.

The above is the detailed content of HTML5 semantic summary. For more information, please follow other related articles on the PHP Chinese website!