In previous tutorials on Wulin.com, it has been emphasized many times that web page HTML files have semantics. We should choose the most appropriate HTML or XHTML tags based on the structure of the web page HTML document, rather than selecting them based on their appearance and style. Use the P tag to define a paragraph, instead of using it to get a new line effect. Instead of using them to achieve text size and bolding effects, we use h1-h6 tags to mark titles.
For example, a title, we can define it with h1:
<h1>The title text of the article is written here</h1>
And no other way should be used to define it:
<p style=font-size:16px; font-weight:bold;>The title text of the article is written here</p>
In previous articles of Wulin.com, we listed all the tags allowed by XHTML1.0, and we can also find that there are actually very few element tags that allow us to choose. But we also clearly realize that these refined elemental marks are also more meaningful. If you really can't find the right element to mark it, you can use the common div and span tags.
The use of divs and span tags on the page is a new problem, and we are prone to using them too much. Necessary and reasonable use of div can significantly enhance the structure of the document. If you look at your HTML document and find that there are many divs and spans, then you have to look at the problem from a different perspective. Is there any abuse? Are there any better markers to replace them? If h1 can better represent the marked content, then you have to give up p or span for definition.
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 to be clarified is that we should make the document logically clear and easier to apply styles. We can just look at a div as a container, or as a component of a document. We use too many containers, which is not a wise pattern. A container that is just right in a reasonable position can make the entire document look very organized.
The following code is more reasonable and effective:
<div id=header>
<h1>Wulin.com VeVb.com. Welcome to your arrival</h1>
<h2>Wulin.com Webjx.Com provides the latest and fastest web technology</h2>
<p>Wulin.com VeVb.com provides web production tutorials, dynamic web production tutorials, website building guides, Flash animation tutorials, video tutorials, web special effects codes, web materials, book downloads and other contents. I hope it can help you in your work and study. </p>
</div>