基本 HTML5 版面元素
下方範例是使用最新的 HTNL5 標記語言來定義網頁內容版面。
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>常用網頁版面</title> </head> <body> <header>頁首</header> <nav>導覽選單</nav> <section>區段</section> <article>文章</article> <aside>側邊</aside> <footer>頁尾</footer> </body> </html>
<header> tag represents a group of introductory or navigational aids.
Headers can contain headings, subheadings, version information, navigational controls, etc.
According to the HTML5 specification:
<nav> tag is used for declaring a navigational section of the HTML document.
Websites typically have sections dedicated to navigational links - links that enable the user to navigate the site. These links should be placed inside a
網頁主要內容的容器，一個網頁只能使用一個 main 標籤。
<main> tag is used to represent the main content area within an HTML document.
<main> tag surrounds the main content of the page - content that is unique to that document and is obviously the "main" content for that page. This excludes any content that is repeated across multiple pages (such as navigation bars, headers, footers, etc).
<section> tag is used to represent a section within an article.
Any given web page or article could have many sections. For example, a homepage could have a section for introducing the company, another section for news items, and another section for contact information.
<article> tag is used to represent an article. More specifically, the content within the
<article> tag is independent from the other content on the site (even though it could be related). By "independent" I mean that its contents could stand alone, for example in syndication.
Examples of article content could include a forum post, a newspaper article, a blog entry, or a user-submitted comment.
<aside> tag is used to represent content that is related to the surrounding content within an article or web page, but could still stand alone in its own right. This type of content is often represented in sidebars.
An example is a "pull quote" from a longer article. A pull quote (also known as a lift-out quote or a call-out) is a quotation or edited excerpt from an article that is placed in a larger typeface on the same page, serving to lead readers into an article and to highlight a key topic.
<footer> tag is used for defining the footer of an HTML document or section.
Contact information within a
<footer> tag should be marked up using the
Although footers are typically located at the bottom of a document, this is not required (although it cannot be placed within a
<header> or another
<footer> element, and it cannot contain a
A document/section can have more than one footer.
詳情請看英文 CSS Flexbox 說明示範。