让html标签可读性更高

我们在编写html代码的时候,有很多朋友都没有很好利用html标签的元素,没有做到让他们各负其责,如果你恰当的使用这些html元素,你会发现你的html可读性很高,也容易去理解你编写代码的思路,对于搜索引擎来说也是一件很好的事情。

分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XH

TML 元素的存在就意味被标记内容的那部分有相应的结构化的意义,没有理由使用其他的标记。换句话说,不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素,比如用<div>来代替<p>标记标题。

首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,个人认为他的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用,很明显Hx系列看起来很像标题,因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字,起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。

其次,语义化的网页的好处,最主要的就是对搜索引擎友好,又了良好的结构和语义你的网页内容自然容易被搜索引擎抓取,你网站的推广便可以省下不少的功夫。

具体的语义和用途在,XHTML1.0 TAG 参考中都已经说明,这里将一些容易遗忘或者混淆的TAGS和属性予以补充。

<Hx>

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用,并且依据重要性递减。<h1>是最高的等级。

例如:

<h1>文档标题</h1>
<h2>次级标题</h2>

而不要使用
<div>文档标题</div>,或者<span>文档标题</span>.很明显搜索引擎对于后者是不会认为他是标题的。

<p>

段落标记,知道了<p>作为段落,你就不会再使用<br/>来换行了,而且不需要<br/><br/>来区分段落与段落。<p></p>中的文字会自动换行,而且换行的效果优于<br>。段落与段落之间的空隙也可以利用CSS来控制,很容易而且清晰的区分出段落与段落。在利用行高(line-height)很容易的定义出行间距,再定义首字下沉等效果,那就挺完美了。
例如:

<p>欢迎来到magic-jungle.com 希望这里可以给你带来帮助。</p>

Tags: , , , ,

Leave a Reply

© Copyright 2009 magic Jungle ® Professionally Designed WordPress Themes · All Rights Reserved · BrianEntries (RSS) and · Bopooo