HTML5 Elements的使用

2024年5月27日 169次阅读 来源: panhezeng

HTML5 Elements的使用

首先说明HTML Elements是HTML DOM中的概念，是DOM的Node。Element是可以有属性和子节点的node。node还有Text, Attribute,Comment,Namespace等。顺便说下HTML Tags是个语法概念，HTML Tags are used to delimit the start and end of elements in the markup.

对Element的分类定义，语义上和语法上是不一样的。具体不同请参考https://www.w3.org/TR/html5/dom.html#content-categories 和 https://www.w3.org/TR/html5/syntax.html#elements-0 的描述。

在语义上，根据数据的content model定义来确定使用哪个element，是绘制图形数据则用canvas element，是视频数据则用video element，一篇文章数据用article element，等等。div element永远是最后考虑的。

特别注意Grouping content类的div element和Sections类的article element/section element的区别。

HTML5以前div element随便用都没问题，HTML5则明确限定了div element的使用范围。它没有任何特别的语义，纯粹用于有着共同的属性/样式/脚本需求的一组连续元素。如果这组元素本身已有特殊语义的父元素，就没必要再加一层div了。

虽然从官方详细说明来看，article element可使用于所有可分发或可复用的独立完整的内容数据，比如可用于Web Widget/Gadget，section element可以用于上下文中一组有着共同主题的内容数据，比如网站主页中可分成an introduction, news items, and contact information的数据部分，哇，这样div element几乎没有存在的必要了，但是从官方示例代码以及单词字面意思来看，通常article element仅使用于有header或footer element及主体内容的完整数据，比如文章，section element仅用于有h1-h6 element的片段数据（一般有多片同样结构的数据），比如文章小节。

HTML文档的结构和纲要
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document

官方article element/section element/div element的使用规范。
https://www.w3.org/TR/html5/sections.html#the-article-element
https://www.w3.org/TR/html5/sections.html#the-section-element
https://www.w3.org/TR/html5/grouping-content.html#the-div-element

Note:The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

官方的HTML Elements使用规范重点摘要。

https://www.w3.org/TR/html5/dom.html

3.2 Elements

3.2.1 Semantics

Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics). For example, the ol element represents an ordered list, and the lang attribute represents the language of the content.

Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose, as doing so prevents software from correctly processing the page.

3.2.4 Content models

Each element defined in this specification has a content model: a description of the element’s expected contents. An HTML element must have contents that match the requirements described in the element’s content model.

3.2.4.1 Kinds of content

Each element in HTML falls into zero or more categories that group elements with similar characteristics together. The following broad categories are used in this specification:

Metadata content
Flow content
Sectioning content
Heading content
Phrasing content
Embedded content
Interactive content
Some elements also fall into other categories, which are defined in other parts of this specification.

Sectioning content, heading content, phrasing content, embedded content, and interactive content are all types of flow content. Metadata is sometimes flow content. Metadata and interactive content are sometimes phrasing content. Embedded content is also a type of phrasing content, and sometimes is interactive content.

Other categories are also used for specific purposes, e.g. form controls are specified using a number of categories to define common requirements. Some elements have unique requirements and do not fit into any particular category.

这里写个简单的例子。
HTML5以前一般页面主结构的元素使用

<!DOCTYPE html>
<html>
<head>
  <title>Blog</title>
</head>
<body>
  <div id="header">
    <div id="nav">
      <h1>Navigation</h1>
      <ul>
        <li><a href="articles.html">Index of all articles</a></li>
      </ul>
    </div>
  </div>
  <div id="main">
    <div class="article">
      <div class="header">
        <h1>Hello</h1>
      </div>
      <div class="articleBody">
        ...
      </div>
      <div class="footer">
        <p>Posted
          <span>2016-03-08 Tuesday</span>.</p>
      </div>
    </div>
    ...
  </div>
  <div id="footer">
  </div>

</html>

HTML5一般博客主页结构的元素使用

<!DOCTYPE html>
<html>
<head>
  <title>Blog</title>
</head>
<body>
  <header>
    <nav>
      <h1>Navigation</h1>
      <ul>
        <li><a href="articles.html">Index of all articles</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article itemprop="blogPosts">
      <header>
        <h1 itemprop="headline">Hello</h1>
      </header>
      <div itemprop="articleBody">
        ...
      </div>
      <footer>
        <p>Posted
          <time itemprop="datePublished" datetime="2016-03-08">Tuesday</time>.</p>
      </footer>
    </article>
    ...
  </main>
  <footer>
  </footer>
</body>

</html>

https://www.w3.org/TR/html5/sections.html#the-nav-element

简洁，在结构和语义清晰的前提下，能省则省。官方专门写了可省略标签的语法规则章节，https://www.w3.org/TR/html5/syntax.html#syntax-tag-omission。还有属性的语法规则，列在前面的都是最省写法。Empty attribute syntax，Unquoted attribute value syntax。https://www.w3.org/TR/html5/syntax.html#attributes-0

mozilla有HTML文档的中文版，有少数还没翻译，而且和官方文档也略有不同，一切还是以官方文档为准。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

    原文作者：panhezeng
    原文地址: https://segmentfault.com/a/1190000004592568
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞