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
instead of a
tag heading.
The first is about the difference between semantics and default styles. The default style is the expression of some commonly used tags set by the browser. Personally, I think its main purpose is to let everyone intuitively understand markup and attributes. Purpose and function, it is obvious that the Hx series looks a lot like the title, because of the bold and larger font size. , 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 content will naturally be easily crawled by search engines, and you can save a lot of effort in promoting your website.
,
,
,
,
,
, are used as titles, in descending order of importance.
is the highest level. For example:
<h1>文档标题</h1>
<h2>次级标题</h2>
Copy after login
Instead of using
Document Title
, or Document Title. Obviously search engines will not use the latter. Think he's the one in the title.
Paragraph mark, after knowing
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:
Unordered lists are so common that they are widely used by everyone, Ordered lists are 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:
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
Copy after login
<ol>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ol>
Copy after login
,
,
dl is "definition list". For example, this kind of list can be used for the explanations and definitions of words in the dictionary. For example:
<dl>
<dt>Dog</dt>
<dd>A carnivorous mammal of the family Canidae.</dd>
</dl>
Forums and blogs often use to mark short single-line quotes when quoting others. 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 to 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://peintomark.org/archives/2002/05/04/the_q_tag) written by Mark Pilgrim for his views on dealing with related issues. 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 tag to quote content, then you cannot use the cite attribute. For example:
<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.
Copy after login
<p> <cite>孔子</cite>曰：<q>学而不思则罔，思而不学则殆</q>.</p>
Copy after login
<p>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>.</p>
The above is the detailed content of Semantize your HTML tags and attributes. For more information, please follow other related articles on the PHP Chinese website!
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
