The corresponding attributes and usage of XHTML tags in CSS
|
When I first started designing web pages using XHTML CSS, I had little experience with the use of tags and was very casual about it. I often used whatever I thought of, thinking that as long as I could achieve the desired effect, it would be fine. But as I learned more and understood more about search engine optimization, I found that the use of tags is actually a science. We have been emphasizing semantics in the CSS tutorial articles of 123WORDPRESS.COM - jb51.net, so how should we use HTML tags? Where are they generally used? When I first started designing web pages using XHTML CSS, I had little experience with the use of tags and was very casual about it. I often used whatever I thought of, thinking that as long as I could achieve the desired effect, it would be fine. But as I learned more and understood more about search engine optimization, I found that the use of tags is actually a science. Here I will not give a detailed introduction to the corresponding properties and usage of each tag in CSS, but will focus on its application in web pages, hoping that it will be of some help to everyone. 1. DIV DIV should not be unfamiliar to those who build XHTML websites. Many websites and materials also refer to Web standard website construction as DIV CSS website construction. There is a reason for this name, because W3C does not recommend the Table tag to be used in the layout of web pages, and DIV as a layout tag naturally takes on the responsibility of layout. DIV can also be said to be a large container. In addition to the overall structural layout of the web page, it is recommended to be used to divide areas that appear to be relatively independent on the web page. Just like a newspaper, the function of DIV is to divide different contents into a large container. In different areas, appropriate labels are selected according to specific circumstances. 2. H tag The H tag is a title tag, often used before a paragraph to indicate the meaning of the paragraph. According to the level of display and meaning to be expressed, it can be divided into H1~H6. H1 is of the highest importance and is often used to express a description of the role and nature of the entire website, or to indicate the target audience of the website. Other tags are used to display the name of a certain area or a general description of a certain introductory text, depending on the level. Because it represents a general description of a website or a paragraph of text, the H tag has a high value for search engines. But this does not mean that it can be used casually. For example, some websites use H tags to display keywords in a paragraph of text in order to deliberately pursue rankings for specific keywords. Or simply use the H tag as a container to layout the web page. This completely confuses the purpose of the H tag and is not recommended. 3. P P is a paragraph tag, which is used to distinguish different paragraphs of a group of text. For search engines, according to their crawling order, the text in the first P tag is also of high value. For example, Baidu ignores the text in the Meta tag description and grabs the content in the first P tag (not absolute). In order to allow search engines to crawl more content while providing users with a good browsing experience, some websites use the <br/> tag when dividing the content. This is not to say that it is not possible, but sometimes the expected effect cannot be achieved. For strict type documents, <br/> is a presentation tag and is not allowed to be used. Although most websites use transitional document types, I do not recommend using them for text segmentation. 4. UL and LI tags This is an unordered list. The UL tag is a declaration of the list, and LI is the list item. Due to the relative independence of its items, it is often used in places such as navigation, news or article lists. UL can also be used as a container to distinguish different lists. Some websites may pursue "Web standards" and convert Tables to UL and LI, which makes web pages difficult to read and maintain. This misunderstanding goes against the ideas that Web standards convey to us. 5. Table I won’t go into detail about the usage of Table here. I just want to say that the Web standard does not mean that Table cannot be used in the future, but it is not recommended to use Table for layout, and it should only be used when displaying data. Therefore, there is no contradiction between web pages that conform to the Web and the use of Table tags. 6. Tags prepared for search engines (1) Title: The title of the web page, a description of the website. This tag is also very valuable to search engines and often contains target keywords. (2) Meta keywords: the main keywords in the web page. It was originally prepared to facilitate search engines to classify websites, but later on, many websites often used this tag to cheat in order to make keyword rankings more favorable, so now this tag has almost no meaning for search engines. (3) Meta Description: Description of the web page. Like Keywords, it was originally intended to facilitate search engine classification. Similarly, since many websites use this tag to cheat, it is no longer so important to search engines. Currently, among the mainstream search engines, only Google is still crawling the content, but it almost no longer determines keywords based on the content. In fact, for search engines, the most important thing is the quality of the content. Similarly, the purpose of creating a website is to promote ourselves to visitors. Please don't forget the basics because of momentary pleasure. After all, what users care about is whether the information is what they need, not the ranking of your website. The above is an introduction to the commonly used tags, which are easy to confuse for beginners. Welcome to follow jb51.net's updated CSS tutorial articles. If you encounter any new problems in the future, we will continue to expand on them. |
<<: How to view MySQL links and kill abnormal links
>>: Docker image creation and one-click packaging and deployment of the entire project
Recommend
Pure CSS3 mind map style example
Mind Map He probably looks like this: Most of the...
Semanticization of HTML tags (including H5)
introduce HTML provides the contextual structure ...
How to monitor array changes in Vue
Table of contents Preface Source code Where do I ...
Super detailed MySQL usage specification sharing
Recently, there have been many database-related o...
Tips for designing photo preview navigation on web pages
<br />Navigation does not just refer to the ...
Solution to Linux server graphics card crash
When the resolution of the login interface is par...
Professional MySQL development design specifications and SQL writing specifications
In the process of team development, it is essenti...
Ubuntu View and modify mysql login name and password, install phpmyadmin
After installing MySQL, enter mysql -u root -p in...
Vue storage contains a solution for Boolean values
Vue stores storage with Boolean values I encounte...
Example code of vue icon selector
Source: http://www.ruoyi.vip/ import Vue from ...
Linux exposes Sudo privilege escalation vulnerability, any user can also run root commands
As one of the most commonly used and important ut...
Mysql optimization Zabbix partition optimization
The biggest bottleneck of using zabbix is the d...
jQuery plugin to achieve image suspension
This article shares the specific code of the jQue...
How to submit the value of a disabled form field in a form Example code
If a form field in a form is set to disabled, the ...
In-depth analysis of Vue's responsive principle and bidirectional data
Understanding object.defineProperty to achieve re...