XHTML tags should be used properly
|
<br />In previous tutorials of 123WORDPRESS.COM, we have repeatedly emphasized the importance of making web page HTML files semantic. We should choose the most appropriate HTML or XHTML tags based on the structure of the HTML document of the web page, rather than choosing them based on their appearance style. Use the P tag to define a paragraph, not to get a line break effect. We use h1-h6 tags to mark headings, but we don’t use them to achieve text size and bold effects. For example, a title can be defined as h1: <h1>The title of the article goes here</h1> It should not be defined in any other way: <p style="font-size:16px; font-weight:bold;">The title of the article is written here</p> In the previous article of 123WORDPRESS.COM, we listed all the tags allowed by XHTML1.0. We can also find that there are actually very few element tags that we can choose from. But we also clearly realize that these refined elemental marks also have clearer meanings. If you really can't find the right element to mark up, you can use the general div and span tags. The use of div and span tags in the page is a new problem, and we tend to use them too much. Necessary and reasonable use of div can significantly enhance the structure of the document. If you examine your HTML document and find that there are a lot of divs and spans, then you have to look at the problem from a different perspective. Is there any abuse? Are there better markers to replace them? If h1 can better represent the content it marks, then you have to give up p or span to define it. Perhaps this is a contradiction, and it is difficult for us to grasp how to use them correctly, or perhaps we cannot get a clear answer at all. But one thing needs to be clarified, we should make the document have a clear logical structure and it is easier to apply styles. We can think of div as just a container, or a "part" of a document. We use too many containers, which is not a wise pattern. A container that is placed at the right place can make the entire document appear well organized. The following code is more reasonable and effective: <div id="header"> <h1>123WORDPRESS.COMjb51.net. Welcome to <h2>123WORDPRESS.COMWebjx.Com provides the latest and fastest web technology</h2> <p>123WORDPRESS.COMjb51.net provides web page production tutorials, dynamic web page production tutorials, website building guides, Flash animation tutorials, video tutorials, web page special effects codes, web page materials, book downloads and other content. I hope it can help you with your work and study. </p> </div> |
<<: Docker uses the nsenter tool to enter the container
>>: JS+Canvas realizes dynamic clock effect
Recommend
Analysis and solutions to problems encountered in the use of label tags
I used the label tag when I was doing something re...
Docker installation of Nginx problems and error analysis
question: The following error occurred when insta...
Native JavaScript to achieve the effect of carousel
This article shares the specific code for JavaScr...
Implementation of mysql using mysqlbinlog command to restore accidentally deleted data
Experimental environment: MYSQL 5.7.22 Enable bin...
MySQL 8.0.21 installation and configuration method graphic tutorial
Record the installation and configuration method ...
Introduction to using Unicode characters in web pages (&#,\u, etc.)
The earliest computers could only use ASCII chara...
Summary of Vue 3 custom directive development
What is a directive? Both Angular and Vue have th...
How to make CSS child elements highly consistent with parent elements
Absolute positioning method: (1) Set the parent e...
Detailed explanation of the use of mysql explain (analysis index)
EXPLAIN shows how MySQL uses indexes to process s...
Detailed explanation of creating, calling and managing MySQL stored procedures
Table of contents Introduction to stored procedur...
Building the User Experience
<br />Maybe you've just come into a comp...
About Zabbix custom monitoring items and triggers
Table of contents 1. Monitoring port Relationship...
Detailed process of using vmware to test PXE batch installation server
Table of contents 1. Preparation 1. Prepare the e...
How to bind Docker container to external IP and port
Docker allows network services to be provided by ...
The difference between Decimal type and Float Double in MySQL (detailed explanation)
MySQL has non-standard data types such as float a...