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
A brief discussion on the difference between Mysql primary key index and non-primary key index
Table of contents What is an index The difference...
CentOS IP connection network implementation process diagram
1. Log in to the system and enter the directory: ...
A brief discussion on whether too many MySQL data queries will cause OOM
Table of contents Impact of full table scan on th...
ByteDance interview: How to use JS to implement Ajax concurrent request control
Preface To be honest, I've been feeling very ...
Detailed explanation of Apache+Tomcat7 load balancing configuration method under Windows
Preparation Windows Server 2008 R2 Enterprise (2....
MySQL 8.0.19 supports locking an account after entering an incorrect password three times (example)
MySQL 8.0.19 supports locking the account after e...
Several situations that cause MySQL to perform a full table scan
Table of contents Case 1: Case 2: Case 3: To summ...
Detailed explanation of HTML element height, offsetHeight, clientHeight, scrollTop, etc.
Some attributes about elements In the daily devel...
Elementui exports data to xlsx and excel tables
Recently, I learned about the Vue project and cam...
Detailed tutorial on installing php-fpm service/extension/configuration in docker
When I installed php56 with brew on mac , I encou...
Front-end state management (Part 2)
Table of contents 1. Redux 1.1. Store (librarian)...
Detailed graphic explanation of hadoop installation and configuration based on Linux7
Prepare the ingredients as shown above (ps: hadoo...
UDP simple server client code example
I won’t go into details about the theory of UDP. ...
Steps to set up Windows Server 2016 AD server (picture and text)
Introduction: AD is the abbreviation of Active Di...
In-depth explanation of MySQL learning engine, explain and permissions
engine Introduction Innodb engine The Innodb engi...