Semanticization of HTML tags (including H5)

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:

<!--Unsemanticized-->
<div id="header">
<div class="H3">Former Brick Siege Master</div>
<div class="h2">Building with blocks is also about art</div>
</div>
<!--After semanticization-->
<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?

  1. Removing styles can make the page structure clear
  2. Screen readers will "read" your web pages by marking them up
  3. Good for SEO
  4. 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

<<:  Teach you how to use Portainer to manage multiple Docker container environments

>>:  Sample code for making a drop-down menu using pure CSS

Recommend

CnBlogs custom blog style sharing

After spending half the night on it, I finally ma...

Detailed explanation of the differences and applications of {{}}, v-text and v-html in Vue

{ {}} Get the value, the original content of the ...

Detailed explanation of the use of umask under Linux

I recently started learning Linux. After reading ...

Don’t bother with JavaScript if you can do it with CSS

Preface Any application that can be written in Ja...

Implementation of MySQL joint index (composite index)

Joint Index The definition of the joint index in ...

Zabbix WEB monitoring implementation process diagram

Take zabbix's own WEB interface as an example...

Useful codes for web page creation

<br />How can I remove the scroll bar on the...

Implementation of MySQL master-slave status check

1. Check the synchronization status of A and B da...

MySQL database must know sql statements (enhanced version)

This is an enhanced version. The questions and SQ...

Detailed explanation of Vue event handling and event modifiers

<div id="root"> <h2>Keep go...

CocosCreator Universal Framework Design Network

Table of contents Preface Using websocket Constru...

MySQL data duplicate checking and deduplication implementation statements

There is a table user, and the fields are id, nic...

Detailed explanation of VUE's data proxy and events

Table of contents Review of Object.defineProperty...

Encapsulation method of Vue breadcrumbs component

Vue encapsulates the breadcrumb component for you...

Example code for implementing div concave corner style with css

In normal development, we usually use convex roun...