Semantize your HTML tags and attributes

巴扎黑
Release: 2017-04-05 16:52:29
Original
1003 people have browsed it

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:

<p>Admin10000.com 是WEB开发者学习交流的网站,这里提供大量实用的技术文档及相关资源下载,是网页设计、网络编程人员及其爱好者必备网站。</p>
<p>希望大家能在这里学到WEB开发知识,启发灵感,提高自己的WEB开发水平。</p>
Copy after login