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
Detailed Analysis of or, in, union and Index Optimization in MySQL
This article originated from the homework assignm...
Tutorial on using Multitail command on Linux
MultiTail is a software used to monitor multiple ...
The table tbody in HTML can slide up and down and left and right
When the table header is fixed, it needs to be di...
JavaScript Design Pattern Command Pattern
The command pattern is a behavioral design patter...
MySQL joint index effective conditions and index invalid conditions
Table of contents 1. Conditions for joint index f...
7 useful new TypeScript features
Table of contents 1. Optional Chaining 2. Null va...
A brief discussion on size units in CSS
The compatibility of browsers is getting better a...
Solution to the problem that Docker container cannot access Jupyter
In this project, the Docker container is used to ...
Nginx Layer 4 Load Balancing Configuration Guide
1. Introduction to Layer 4 Load Balancing What is...
Example code for CSS to achieve horizontal lines on both sides of the text
This article introduces the sample code of CSS to...
VMware virtual machine to establish HTTP service steps analysis
1. Use xshell to connect to the virtual machine, ...
Ideas and codes for realizing magnifying glass effect in js
This article example shares the specific code of ...
How to implement Linux automatic shutdown when the battery is low
Preface The electricity in my residence has been ...
The difference between shtml and html
Shtml and asp are similar. In files named shtml, s...
5 solutions to CSS box collapse
First, what is box collapse? Elements that should...