Semanticization of HTML tags (including H5)

introduce

HTML provides the contextual structure and meaning of the content of a web document; HTML itself has no expression. For example, we see that <H3> is bold and the font size is 2em; <strong> is bold, but don’t think that these are the expression of HTML. This is the default style of HTML at work. So we need to know that HTML has nothing to do with the expression of the page . Expression is the business of CSS. The role of HTML in a page is structure and meaning. To put it simply, it is to divide the content. What is put here is what we put.

Structuring

If a web page is compared to a house, then HTML is the reinforced concrete walls and the roof and beam frames; and CSS is the decorative materials, floor paint and the like. A good page structure means that even without CSS decoration, the page structure is still clear and the house is still visible. The DIV+CSS that people often talk about is just a popular term, not DIV throughout the article. Remember: DIV is not God!

Semantic

HTML is a supplementary representation of the content and meaning (i.e. semantics) of text. It tells us, "This line is a heading, these lines form a paragraph, this is a bulleted list, that is a link." It doesn't tell us, "These words are blue, those are red, this part is on the right, these are italic." That's the job of CSS. In short: HTML tells us what a piece of content is (or what it means), not what it looks like.

Copy code

The code is as follows:

<div id="header">
<div class="H3">Former Brick Siege Master</div>
<div class="h2">Building with blocks is also about art</div>
</div>

<div id="header">
<H3>Former Brick Siege Master</H3>
<h2>Building with blocks is also about art</h2>
</div>

What are the benefits of semantics?

Removing styles can make the page structure clear
Screen readers will "read" your web pages by marking them up
Good for SEO
Easy for team development and maintenance

Appendix: New elements in HTML5

Label	meaning	Comparison with HTML4
<article>	The tag defines the external content. For example, a new article from an external news provider, or text from a blog, or text from a forum. Or from other external sources	HTML5: <article></article> HTML4: <div></div>
<section>	Tags define sections in a document. Such as chapters, headers, footers, or other parts of a document.	HTML5: <section></section> HTML4: <div></div>
<aside>	Tags define content outside of article. The content of aside should be related to the content of the article.	HTML5: <aside> Aside content is independent content, but should be related to the document content. </aside> HTML4: The content of <div>Aside is independent content, but should be related to the document content. </div>
<header>	The tag defines a section or document header.	HTML5: <header></header> HTML4: <div></div>
<footer>	The tag defines a section or document footer. Typically, it will contain the creator's name, the date the document was created, and/or contact information.	HTML5: <footer></footer> HTML4: <div></div>
<hgroup>	Tags are used to group titles of web pages or sections.	HTML5: <hgroup></hgroup> HTML4: <div></div>
<nav>	The tag defines the part of the navigation link	HTML5: <nav></nav> HTML4: <ul></ul>
<canvas>	Tags define graphics, such as charts and other images. This HTML element is designed for client-side vector graphics. It has no behavior of its own, but exposes a drawing API to client-side JavaScript so that the script can draw whatever it wants onto a canvas.	HTML5: <canvas id="myCanvas" width="200" height="200"></canvas> HTML4: <object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>
<video>	Tags define videos, such as movie clips or other video streams.	HTML5: <video src="movie.ogg" controls="controls">Your browser does not support the video tag. </video> HTML4: <object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>
<audio>	Tags define sounds, such as music or other audio streams.	HTML5: <audio src="someaudio.wav">Your browser does not support the audio tag. </audio> HTML4: <object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>
<embed>	The tag defines embedded content, such as plugins.	HTML5: <embed src="horse.wav" /> HTML4: <object data="flash.swf" type="application/x-shockwave-flash"></object>
<source>	The tag defines media resources for media elements (such as <video> and <audio>).	HTML5: <source> HTML4: <param>
<datalist>	A tag defines a list of optional data. Used in conjunction with the input element, you can create a drop-down list of input values.	HTML5: <datalist></datalist> HTML4: none
<details>	Tags define the details of an element, which the user can view or hide by clicking on it. Used with <legend> to create the title of the detail. This title is visible to the user and when clicked on it opens or closes the detail.	HTML5: <details></details> HTML4: <dl style="display:hidden"></dl>
<summary>	The tag contains the title of the details element, which is used to describe detailed information about a document or document fragment. The "summary" element should be the first child of the "details" element.	HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details> HTML4: none
<figure>	Tags are used to group elements. Use the <figcaption> element to add a caption to a group of elements.	HTML5: <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure> HTML4: <dl><H3>PRC</H3><p>The People's Republic of China was born in 1949...</p></dl>
<figcaption>	The tag defines the title of the figure element. The "figcaption" element should be placed as the first or last child of the "figure" element.	HTML5: <figure><figcaption>PRC</figcaption></figure> HTML4: none
<mark>	It is mainly used to visually present text that needs to be highlighted to users. A typical application of the <mark> tag is to highlight search keywords to users in search results.	HTML5: <mark></mark> HTML4: <span></span
<meter>	Tags define the measurement. Only used for measurements with known maximum and minimum values. The range of the measurement must be defined, either in the element's text or in min/max attributes.	HTML5: <meter></meter> HTML4: none
<output>	Tags define different types of output, such as the output of a script.	HTML5: <output></output> HTML4: <span></span>
<progress>	Label the running process. You can use the <progress> tag to display the progress of time-consuming functions in JavaScript.	HTML5: <progress></progress> HTML4: none
<time>	Tags define a date or a time, or both.	HTML5: <time></time> HTML4: <span></span>
<keygen>	Tags are used to group titles of web pages or sections.	HTML5: <keygen> HTML4: none
<command>	The tag defines a command button, such as a radio button, check box, or push button.	HTML5: <command onclick=cut()" label="cut"> HTML4: none