In previous tutorials on the Web Page Teaching Network, it has been emphasized many times to make web page HTML files semantic. We should choose the most appropriate HTML or XHTML tags based on the structure of the web page's HTML document, rather than selecting them based on their appearance. Use the P tag to define a paragraph rather than using it to get a line break effect. We use h1-h6 tags to mark headings, rather than using them to achieve text size and bold effects.
For example, for a title, we can use h1 to define it:
<h1>Write the title text of the article here</h1>
Instead of defining it in any other way:
<p style="font-size:16px; font-weight:bold;">Write the title text of the article here</p>
In previous articles on the Web Teaching Network, 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. But we also clearly realize that these refined element marks also have clearer meanings. If you really can't find the right element to tag, you can use the generic div and span tags.
The use of div and span tags in pages is a new issue, and we tend to use them too much. Necessary and reasonable use of divs can significantly enhance the structure of the document. If you look at 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 abuse? Are there better markers to replace them? If h1 can better represent the marked content, then you have to give up p or span to define it.
Perhaps this is a pair of contradictions, 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 make it easier to apply styles. We can think of div as just a container, or a "part" of the document. We use too many containers, which is not a wise pattern. And a container that is just right and in a reasonable position can make the entire document appear organized.
The following code is more reasonable and effective:
| The following is the quoted content: <div id="header"> |