语义元素和非语义元素

在我上一篇文章，我指出“所有语义的元素都不应作为布局来使用”，引来很多反对声音。这里我想解释一下我认为的语义和非语义元素（只是个人观点哦）。

非语义元素，布局元素

我认为的作为布局只有div，span，因为他们只有属性display。一个表示块（断行的），一个表示内联的（不断行的），并无其他实际意义。所以他们只能用来布局，我们可以理解为水泥板和砖头。

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

语义元素，非布局元素

• 标题元素，H系列
  

  There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

  
  对于H系列，要注意的是他们的级别，比如H1最高级，一个页面只能出现一次，我的解释是一山不容二虎。
• P元素
  

  The P element represents a paragraph. It cannot contain block-level elements (including P itself).
  We discourage authors from using empty P elements. User agents should ignore empty P elements.

  
  它呈现的是一个段落，我们怎么能用一个段落来布局呢？更何况它还不能包含一个块级元素，包括P本身。
• 列表系列，UL，OL，LI
  

  Ordered and unordered lists are rendered in an identical manner except that visual user agents number ordered list items. User agents may present those numbers in a variety of ways. Unordered list items are not numbered.

  
  很多人会认为做导航的时候，是否是布局呢？导航不是结构，导航只是在呈现一个列表。另外在国内，UL大家已经在滥用了。
• 着重元素，EM，STRONG
  

  EM and STRONG are used to indicate emphasis.
  The presentation of phrase elements depends on the user agent. Generally, visual user agents present EM text in italics and STRONG text in bold font. Speech synthesizer user agents may change the synthesis parameters, such as volume, pitch and rate accordingly.

  
  EM表示重点，STRONG表示更加重视。这里值得注意的是，STRONG并不是用来加粗的，加粗可以用b，但表现元素（无任何语义元素）已经开始淘汰了。现在表现已经交给CSS了。

以上是常见的一些元素（当然还有很多元素，这里就不一一列出了），我们拿出来比较就会发现，语义元素和非语义元素的差别。最后我还是想强调，所有语义的元素都不应作为布局来使用。（如果你不同意我的观点，你当然坚持自己的，挖哈哈~~）。