A brief discussion of html semantic tags, Html5 new semantic tags_html/css_WEB-ITnose
WBOY
Release： 2016-06-24 11:49:40
Original
1256 people have browsed it
Html semantic tags, new semantic tags in Html5
During my study, I compiled some knowledge about semantic tags in HTML, but the list is not comprehensive.
I hope you all have it If you have any new insights, you can leave me a message and I will add them. Thank you all
1. What are semantic tags?
So what is semantic tags? To put it simply, understand each tag. The purpose of each tag (under what circumstances can I use this tag?) For example,
The title of the article on the webpage can use the title tag, and the of each column on the webpage can be used 🎜>Column nameYou can also use title tags.
The content paragraphs in the article must be placed in the paragraph tag . If there is text that you want to emphasize in the article, you can use the em tag to express emphasis, etc.
2. Why use semantic tags?
1. It is easier to be indexed by search engines.
2. Make it easier for screen readers to read web content.
3. Can better reflect the theme of the page
4. Better compatibility, supports more network devices
Emphasize: the role of the title attribute. When the mouse slides over the link text, the text content of this attribute will be displayed. This attribute plays a great role in actual web development. It mainly facilitates search engines to understand the content of the link address (more semantically friendly)
2):
tag: Article paragraphs are placed in the
tags
3): tag: article title, column title is represented by
title tag There are 6 in total, h1, h2, h3, h4, h5, and h6 are first-level headings, second-level headings, third-level headings, fourth-level headings, fifth-level headings, and sixth-level headings respectively. And in descending order of importance.
is the highest level.
4): and tags: emphasize certain words
but both There is a difference in the tone of emphasis: means emphasis, means stronger emphasis. And in the browser, is represented by italic by default, and is represented by bold.
Compared with the two tags, domestic front-end programmers currently prefer to use to express emphasis.
5): Tag: short text quote
Note that the text to be quoted does not need to be enclosed in double quotes , the browser will The q tag automatically adds double quotes
6):
tag: long text quote
Note that the browser does not accept <blockquote> The parsing of the tag is indentation style
7):
tag: add address information to the web page
8):
Tag: unordered list
9):
Tag: ordered list
10 ):
Tag: Add a title and summary to the table
The content of the summary will not be displayed in the browser. Its function is to increase the readability (semanticization) of the table, enable search engines to better understand the table content, and also enable screen readers to better help special users read the table content.
Grammar:
The title is used to describe the content of the table. The title is displayed at the top of the table.
Syntax:
title text
4.Html5 semantic tags
1):article tag: Load and display an independent article content.
For example, a complete forum post, a website news, a blog article, etc., a user comment, etc. artilce can be nested, then the inner artilce has a subordinate relationship with the outer article tag .
For example, a blog post can be displayed as article, and then some comments can be embedded in it in the form of article.
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
