程湘之間: HTML5

顯示具有 HTML5 標籤的文章。顯示所有文章

2012年12月26日星期三

Html5 常用 Tag

HTML5 New Tags

HTML5 新增了許多 Tag，這些Tag 部份著重在語意上。因此，什麼場景使用什麼Tag顯的相當重要。但UI看起來並沒有差異，故大部份的開發人員其實不太重視。
以下是我的翻譯，翻的不好請見諒。

header

header : The header element represents a group of introductory or navigational aids. 一群由簡介文或輔助瀏覽的元素。

section

section : The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. 章節元素表達一個文件或應用程式的一個一般的章節。一個章節，通常有個標題，對其內的內容做簡單的專題。

section 的目的，通常用來製作成大綱(outline)。因此不要用 section 來作為套用樣式的手段。如果目的只是套用樣式，就使用 div 即可。

hgroup

hgroup: the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines. section 通常有個標題。若標題由 h1 ~ h6 組成，則 hgroup 將這些 h1~h6 內挑出一個最高等級做為此 section 的大綱。

如下例，hgroup 內含了h1, h2，則該section 會以h1的文字作為 outline

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
    <body>
        <h1>The Body</h1>
        <section>
            <hgroup>
                <h1>H1</h1>
                <h2>H2</h2>
            </hgroup>
        </section>
    </body>
</html>

nav

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links。一個由一組連結組成的章節。

article

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. article 是一個獨立的組合，因此將 article 獨立出來或移到別的地方，都不會讓該 article 失去意義。

一個簡單的方式辨別 article 是否為適當的 tag，就是檢視該內容是否適合作為 RSS 的文章。

aside

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. 支援性的文章。不看 aside 的內容並不影響對整個內容的了解。通常用於註解或廣告。

footer

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. 包含章節結束的資訊。例如作者資訊，相關文章連結， copyright data。