Another important aspect of separating structure and presentation is the use of semantic markup to structure document content. The presence of an XHTML element means that the portion of the marked content has a corresponding structural meaning, and there is no reason to use other markup. In other words, don't let CSS make one HTML element look like another HTML element, such as using a

instead of a

tag heading.

First of all, it’s about the difference between semantics and default styles. The default style is the expression of some commonly used tags set by the browser. I personally think its main purpose is to let everyone intuitively understand tags (markup). And the purpose and function of attributes, it is obvious that the Hx series looks a lot like titles, because it has bold fonts and larger font sizes. , are used to distinguish them from other words and play a role in emphasis. Lists and tables clearly tell you what they do.

Secondly, the most important benefit of semantic web pages is that they are friendly to search engines. With good structure and semantics, your web page content will naturally be easily crawled by search engines, and you can save money on the promotion of your website. Put in a lot of effort.

The specific semantics and uses have been explained in the XHTML1.0 TAG reference. Some TAGS and attributes that are easily forgotten or confused are supplemented here.

,
,
,
,
, is the highest level.
For example:

Copy content to clipboard
Code:
`<h1>Document Title</h1><code><h1>文档标题</h1> <h2>次级标题</h2>`
Subtitle

Instead of using
Document Title
, or Document Title. Obviously search engines are interested in the latter I won't think that he is the title.

Paragraph mark, if you know
as a paragraph, you will no longer use
to break lines. And there is no need for

to distinguish paragraphs from paragraphs. The text in
will wrap automatically, and the line wrapping effect is better than
. The gaps between paragraphs can also be controlled using CSS, making it easy and clear to distinguish paragraphs from each other. Using line-height can easily define the spacing between lines, and then define effects such as drop caps, which is perfect.
For example:
Copy content to clipboard
Code:
Blue Idea www.blueidea.com was born in October 1999. From the beginning of its establishment, Blue Ideal has been aiming to build a home for website designers and developers, with the main content of introducing network development technology and website creation and design exchanges. The content of its website is well-produced. Tutorials carefully crafted by members are released every day, selflessly helping netizens. It has also held many design competitions and developed many related programs that are still used by many websites. The published works and reviews have attracted the attention of many media and praised by experts, and at the same time established their social status. As a result, batch after batch of Internet colleagues have joined Blue Ideal, becoming the largest design site in China. one. <code>蓝色理想 www.blueidea.com 诞生于1999年的10月。从成立之初，蓝色理想就以建设网站设计与开发人员之家为宗旨，以介绍网络开发技术与网站创作设计交流为主要内容。其网站内容制作精良，每天都会有会员精心制作的教程发布，无私地对网友进行帮助，而且还举办过不少设计比赛并开发了很多目前仍被许多网站应用的相关程序。而所发布的作品与点评受到了多家媒体关注及行家的好评，同时也从中确立了自己的社会地位，于是一批又一批的网络同仁加盟了蓝色理想，成为国内最大的设计类站点之一。 多年来，蓝色理想的内容不断充实，先后被国内一些知名网站、传统媒体重点推介过，并陆续被Google、百度、雅虎、搜狐、新浪、Excite等各大搜索站点收藏，并在Google、百度、Yahoo三大搜索引擎中以简体汉字关键词"网站设计与开发”搜索排名均为第一，现在蓝色理想已发展成为国内影响最大的网站设计、开发的专业网站之一。

Over the years, the content of Blue Ideal has been continuously enriched, and has been promoted by some well-known domestic websites and traditional media, and has been successively promoted by Google, Baidu, Yahoo, Sohu, It has been collected by major search sites such as Sina and Excite, and ranked first in the search rankings for the keyword "website design and development" in simplified Chinese in the three major search engines of Google, Baidu, and Yahoo. Now Blue Ideal has developed into one of the most influential in the country. One of the professional websites for website design and development.

,
,

Unordered list is very common and widely used by everyone,
Ordered list It's also quite commonly used. In the process of web standardization,
is also used more in navigation bars. Originally, the navigation bar was a list. This is completely correct, and when your browser does not support CSS, the navigation links are still very convenient. It works fine, but the aesthetics are a bit off.
For example: Copy content to clipboard

Code:`<ul> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul>` `<ul>`
Project 1
Project 2
Item 3
Copy content to clipboard
Code:
`<ol> <li>第一章</li> <li>第二章</li> <li>第三章</li> </ol>`

,
,

dl is the "definition list". For example, this kind of list can be used for the explanations and definitions of words in the dictionary.
For example:
Copy content to clipboard
Code:
`<dl><code><dl> <dt>Dog</dt> <dd>A carnivorous mammal of the family Canidae.</dd> </dl> `
Dog

A carnivorous mammal of the family Canidae.

Copy content to clipboard
<dl> <dt>上海滩</dt> <dd>这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。 当年在香港播出以后，产生了巨大的轰动效应。</dd> <dt>周润发</dt> <dd>和所有伟大的影星一样，周润发印证了一个时代，一个香港电影的黄金时代。 风衣墨镜、冷血双枪、阳光微笑，都封存胶片之中，当我们回首寻望的时候，发哥已被刻为一个时代的坐标。</dd> </dl>Code:

<dl><dt>Shanghai Beach</dt><dd>This "Shanghai Beach" filmed in 1980 can be called The most successful and classic drama series in the history of Hong Kong television. After it was broadcast in Hong Kong, it created a huge sensation. </dd> <dt>Chow Yun-fat</dt> <dd>Like all great movie stars, Chow Yun-fat confirmed an era, a golden age of Hong Kong movies. The windbreaker and sunglasses, the cold-blooded guns, and the sunny smile are all sealed in the film. When we look back, Fa Ge has been engraved as the coordinate of an era. </dd> </dl>
, cite, ,
Forums and blogs often use quotations from others, and use to mark short single-line quotes. . Web browsers will automatically recognize content between . Unfortunately, IE doesn't recognize it, and sometimes, can cause some accessibility issues. Because of this, some people recommend that you avoid using and manually insert citation tags. By adding a single line of reference content within a containing the appropriate class, you can style the reference with CSS, but this has no semantic meaning. You can read The Q tag (http://diveintomark.org/archives/2002/05/04/the_q_tag) written by Mark Pilgrim for his views on dealing with related issues. <cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.For long quotes of one or more paragraphs, use
. CSS can be used to define styles for references. Note that a paragraph of article cannot be placed directly in
, the quoted content must also be included in an element, usually
. The cite attribute can be used with both and
to provide the source address of the quoted content. It should be noted that if you use instead of to mark reference content, then you cannot use the cite attribute.

For example: Copy content to clipboard

Code: <cite>孔子</cite>曰：<q>学而不思则罔，思而不学则殆</q>.

Copy content to clipboard

Code:The W3C says that <q cite="http://www.w3.org/TR/REC-html40/ struct/text.html#h-9.2.1">The presentation of phrase elements depends on the user agent.</q>.
Copy content to clipboard Code: The W3C says that <q cite="http://www.w3.org/TR/REC-html40/<🎜>struct/text.html# h-9.2.1">The presentation of phrase elementsdepends on the user agent.</q>.
Copy content to clipboard
Code:
<blockquote cite="http://www.w3cn.org/"> “我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时， 我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战"， 为了兼容 Netscape 和 IE，网站不得不为这两种浏览器写不同的代码。同样的， 每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备， 例如支持手机上网的 WAP 技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽； 针对某种浏览器的 DHTML 特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。 这是一种恶性循环，是一种巨大的浪费。” </blockquote>
,

is used for emphasis, is used for emphasis. Most browsers display emphasized content in italics and bold for highlighted content. However, this is not necessary. If you want to determine how the highlighted content is displayed, the best way is to use CSS to define their appearance. . Don't use emphasis when all you want is a visual effect. And if you want to emphasize but still feel that the visual effect of bold or italics is not that good, especially italics for Chinese, then you can define some other more eye-catching styles to achieve the effect of emphasis.
For example:
Copy content to clipboard
Code:
Text that emphasizes is usually italicized,<code>强调 的文本通常用斜体显示， 然而， 特别强调 的文本通常以粗体显示。However, text that emphasizes Usually shown in bold.

, tag is the head of the table, the tag is the main content of the table, and the tag is the tail of the table. .
You can also use scope, which can be used to replace the headers attribute and mark cells containing header information. The contents of each value are as follows:
row indicates the current cell and provides related tables for the rows containing the current cell. header information.
Col indicates the current cell and provides corresponding header information for the column specified based on the current cell.
Rowgroup indicates the current cell and provides relevant header information for the remaining row groups containing the current cell.
Colgroup indicates the current cell and provides corresponding header information for the remaining column groups specified based on the current cell.
abbr is used to define the abbreviation name in the header cell. If this attribute is not defined, the default cell content will be in abbreviated form.
For example:
Copy content to clipboard
Code:
<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series"><code><table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series"> <caption>Table 1: Power Mac G5 tech specs </caption> <tr> <th scope="col" abbr="Configurations" class="nobg">Configurations</th> <th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th> <th scope="col" abbr="Dual 2">Dual 2GHz</th> <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th> </tr> <tr> <th scope="row" abbr="Model" class="spec">Model</th> <td>M9454LL/A</td> <td>M9455LL/A</td> <td>M9457LL/A</td> </tr> <tr> <th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th> <td class="alt">Dual 1.8GHz PowerPC G5</td> <td class="alt">Dual 2GHz PowerPC G5</td> <td class="alt">Dual 2.5GHz PowerPC G5</td> </tr> <tr> <th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th> <td>900MHz per processor</td> <td>1GHz per processor</td> <td>1.25GHz per processor</td> </tr> <tr> <th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th> <td class="alt">512K per processor</td> <td class="alt">512K per processor</td> <td class="alt">512K per processor</td> </tr> </table>

< th scope="col" abbr="Dual 2.5">Dual 2.5GHz

<dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.

It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.
, ,
, summary

Tables in XHTML should not be used for layout. However, if you are labeling list data, you should use tables.
is the title of the table, the attribute summar is the summary, the
tag is the header description, the
Table 1: Power Mac G5 tech specs
Configurations Dual 1.8GHz Dual 2GHz
Model M9454LL/A M9455LL/A M9457LL /A
G5 Processor Dual 1.8GHz PowerPC G5 Dual 2GHz PowerPC G5 Dual 2.5GHz PowerPC G5
Frontside bus 900MHz per processor 1GHz per processor 1.25GHz per processor< ;/td>

Level2 Cache 512K per processor 512K per processor 512K per processor
View the effect: http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm Copy content to clipboard Code: , If you know del, don’t use as a strikethrough. Using del is obviously more semantic. And del also has cite and datetime to indicate the reason for deletion and the time of deletion. ins means insert and also has such attributes. For example: Copy content to clipboard Code:  means computer code. The default style is typeface. Often encountered in technical forums and blogs. For example: <div class="blockcode"> Copy content to clipboard <h5>Code:</h5> <code><code>p{margin:2px 0;}

is the title of the table, the attribute summar is the summary, the
,	,
Configurations	Dual 1.8GHz	Dual 2GHz
Model	M9454LL/A	M9455LL/A	M9457LL /A
G5 Processor	Dual 1.8GHz PowerPC G5	Dual 2GHz PowerPC G5	Dual 2.5GHz PowerPC G5
Frontside bus	900MHz per processor	1GHz per processor	1.25GHz per processor< ;/td>
Level2 Cache	512K per processor	512K per processor	512K per processor

Semantic web pages XHTML semantic tags_HTML/Xhtml_web page production

,

,

,

Code:

Subtitle

Code:

Code:

Code:

Copy content to clipboard

Code:

Code:

Code:

Code:

Code:

Code:

Code: