HTML5 基本架構

style.css

header, nav, section, article, footer {
    display: block;
}
header, nav, section, article, footer {
    color: white;
}
header, footer {
    text-align: center;
    width: 100%;
}
header {
    background-color: red;
    font-size: 36px;
    font-weight: bold;
}
nav {
    position: fixed;
    top: 50px;
    right: 25px;
    background-color: blue;
    width: 100px;
}
section {
    width: 100%;
    background-color: gray;
}
article {
    padding: 20px;
}
footer {
    background-color: green;
    font-size: 10px;
}


demo.html

＜!DOCTYPE html＞
＜html＞
    ＜head＞
        ＜meta charset="utf-8" /＞
        ＜link rel="stylesheet" type="text/css" href="style.css" /＞
        ＜title＞HTML 5 DEMO＜/title＞
    ＜/head＞
    ＜body＞
        ＜header＞
            header
        ＜/header＞
        ＜nav＞
            ＜ul＞
                ＜li＞nav 1＜/li＞
                ＜li＞nav 2＜/li＞
            ＜/ul＞
        ＜/nav＞
        ＜section＞
            ＜article＞
                ＜details＞
                    ＜summary＞Some details＜/summary＞
                    ＜p＞More info about the details.＜/p＞
                ＜/details＞
            ＜/article＞
        ＜/section＞
        ＜footer＞footer © 2014＜/footer＞
    ＜/body＞
＜/html＞


＜!DOCTYPE html＞是告訴瀏覽器這份html文件是HTML5

＜header＞ 為 HTML5 文件置頂的描述區域， ＜nav＞ 為導覽區塊，通常用作側邊欄， ＜section＞ 為內容區域，裡頭的段落文章再用 ＜article＞ 標記，因此一個 ＜section＞ 可以有多個 ＜article＞ ， ＜details＞ ＜summary＞ 為互動式表單元素， ＜footer＞ 則是置底的描述區域。

結果畫面

參考資料

http://pydoing.blogspot.tw/2012/10/html-css-tutorial.html