What exactly is the energy of HTML5 and CSS3?

Web designers can use HTML4 and CSS2.1 to do something cool. We can complete the logical structure of the document and create a content-rich site without using the stale table-based layouts. We can add a nice and delicate style to the site without using inline <font> and <br> tags. In fact, our current design capabilities have kept us away from the dreaded browser war era, proprietary protocols and ugly Web pages full of flashing, scrolling and flashing.
Although we have now widely used HTML4 and CSS2.1, but we can also do better! We can reorganize the structure of our code and make our page code more semantic-rich. We can reduce the amount of code that gives the page a beautiful look style and give them a higher level of scalability. Now, HTML5 and CSS3 are eager to wait for everyone, let's see if they can really get our design to the next level ...

Say goodbye to <div>, welcome to semantic tagging
Once, designers frequently used table-based layouts without any semantics. But ultimately thanks to Jeffrey Zeldman and Eric Meyer, the smart designers slowly accepted the relatively more semantic <div> layout instead of the table layout and began invoking the external stylesheet. Unfortunately, complex web design requires a lot of different tag structure code, which we call "<div>-soup" syndrome. Perhaps you are familiar with the following code:

<div id= "News" >
<div class= "section" >
<div class= "article" >
<div class= "Header" >
<p>posted on July 11th, 2009</p>
</div>
<div class= "Content" >
<p>lorem ipsum text blah blah blah.</p>
<p>lorem ipsum text blah blah blah.</p>
<p>lorem ipsum text blah blah blah.</p>
</div>
<div class= "Footer" >
&LT;P&GT;TAGS:HMTL, code, demo</p>
</div>
</div>
<div class= "aside" >
<div class= "Header" >
</div>
<div class= "Content" >
<p>lorem ipsum text blah blah blah.</p>
<p>lorem ipsum text blah blah blah.</p>
<p>lorem ipsum text blah blah blah.</p>
</div>
<div class= "Footer" >
&LT;P&GT;TAGS:HMTL, code, demo</p>
</div>
</div>
</div>
</div>

Although this is somewhat reluctant, the above example still shows that using HTML4 to code a complex design is still too bloated (in fact xHTML1.1). But it's exciting to HTML5 solve the "<div>-soup" syndrome and bring us a new set of structured elements. These new HTML5 elements have more granular semantics in place of those without semantic <div> tags, and also provide "natural" CSS hooks for CSS calls. The following is an example of a solution for HTML5:

<div id= "News" >
<div class= "section" >
<div class= "article" >
<div class= "Header" >
<p>posted on July 11th, 2009</p>
</div>
<div class= "Content" >
<p>lorem ipsum text blah blah blah.</p>
<p>lorem ipsum text blah blah blah.</p>
<p>lorem ipsum text blah blah blah.</p>
</div>
<div class= "Footer" >
&LT;P&GT;TAGS:HMTL, code, demo</p>
</div>
</div>
<div class= "aside" >
<div class= "Header" >
</div>
<div class= "Content" >
<p>lorem ipsum text blah blah blah.</p>
<p>lorem ipsum text blah blah blah.</p>
<p>lorem ipsum text blah blah blah.</p>
</div>
<div class= "Footer" >
&LT;P&GT;TAGS:HMTL, code, demo</p>
</div>
</div>
</div>
</div>
As we can see, HTML5 allows us to replace a lot of meaningless <div> tags with more semantically structured code tags. This semantic feature not only improves the quality and semantics of our web pages, but also reduces the class and ID attributes that have been used in the code to be called by CSS. In fact, CSS3 is also able to ignore all classes and IDs by us.

Say goodbye to the class attribute, welcome to the neat label
HTML5,CSS3, which combines the new semantic markup, provides the Web designer's Web page with the power of God. With the energy of HTML5, we will get more control over the document code, with the CSS3 energy, our control will tend to infinity!
Even without those advanced CSS selectors, we can still call different containers with a powerful HTML5 bar without having to bother with class and ID properties. Like the previous Div layout, we might want to call this in CSS:

Detailed Description: http://html5.662p.com/thread-33-1-1.html