HTML 版面範例
下方是版面規劃範例之一，版面包括頁首、左側導覽選單、主要內容區、頁尾。
基本 HTML5 版面元素
HTML5使用新的標籤(Tags)來定義網頁內容，遵循這些規則，可容易判讀網頁各部份內容。
下方範例是使用最新的 HTNL5 標記語言來定義網頁內容版面。
上圖網頁版面的HTML原始碼，如下所示。
<!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>
頁首版面區塊，可包含網站logo、橫幅廣告圖片、搜尋、上方連結、重要資訊...等，版面區塊通常會出現在網站的每一頁中。
The 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:
The<header>element is intended to usually contain the section's heading (an<h1>-<h6>element or an<hgroup>element), but this is not required. The<header>element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
The <header> tag cannot be placed within a <footer>, <address> or another <header> element.
<nav>
網站導覽選單的版面區塊，此版面區塊通常會出現在網站的每一頁中。
The HTML <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 <nav> tag.
<main>
網頁主要內容的容器，一個網頁只能使用一個 main 標籤。
The HTML <main> tag is used to represent the main content area within an HTML document.
The <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).
An HTML document can have a maximum of one <main> element. It must not appear within the <article>, <aside>, <footer>, <header> or <nav> tags.
<section>
將網頁內容分成不同區段的標籤
The HTML <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>
一篇文章的版面區塊
The HTML <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>
側邊版面區塊，通常使用於文章內容的側邊攔版面區塊，例如：放置文章列表版面、廣告、QR Code...等寬度比較小的版面區塊。
The HTML <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>
使用於網頁的頁尾，或一篇文章的尾端。網頁中通常用於放置網站版權宣告、頁尾選單連結...等。 版面區塊通常會出現在網站的每一頁中。
The HTML <footer> tag is used for defining the footer of an HTML document or section.
Footers usually contain information such as the author of the document, copyright information, links to terms of use, privacy policy, etc.
Contact information within a <footer> tag should be marked up using the <address> tag
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 <header> element).
A document/section can have more than one footer.
參考連結：
CSS Flexbox
Flexbox 是一個優化版面配置的盒子模型，用以取代過去複雜的版面配置方法，並適應不同螢幕尺寸的各類裝置。
詳情請看英文 CSS Flexbox 說明示範。