Understanding the Proper Way to Lay Out a Page with HTML5

 

Introduction

A web page being rendered in the browser consists of many things - logo, informative text, pictures, hyperlinks, navigational structure and more. HTML5offers a set of markup elements that allow you to create a structured layout for web pages. These elements are often termed as Semantic Markup because they convey their meaning and purpose clearly to the developer and to the browser. This article discusses some of the important HTML5 elements that can contribute to the layout of a web page.

Semantic Markup

Semantic markup expresses its meaning and purpose clearly to the developers and to the browser. Web developers frequently use the <div> element to layout their web pages. However, a <div> element by itself doesn't convey what it is representing in a web page. A <div> element may wrap a navigational menu or it may house a list of blog posts, but merely using <div> doesn't convey much information to the developers or to the browsers. Usually CSS classes applied to <div> elements reveal some information about their intended purpose. For example consider the following markup:

<div class="header">...</div>

In the above markup it is the header CSS class that gives you an idea as to what the <div> might be doing. In the absence of this CSS class, however, there is no way to easily identify what the <div> might be doing. This is because <div> is a general purpose element. It has no specific documented responsibility. It simply marks a division or section of the web page but doesn't dictate what can go inside that section.

  • <section>
  • <article>
  • <aside>
  • <nav>

As you can see, these elements are quite expressive and you can immediately get an idea of the intended purpose. The following figure shows a sample page layout designed using these elements:

Figure01

The above figure shows a typical arrangement of various elements. Note that their exact location on a page is purely dependent on the layout. For example, the <aside> element can be placed on the left hand side of the <section> or even above or below it.

The following figure shows an actual web page making use of these elements:

Figure02

 

Now that you have some idea about the semantic elements, let's discuss each of the elements in more detail. For the sake of our discussion we will use the above sample web page as an example.

Header Element

The <header> element represents the header of the whole page or a section of it. The W3C specifications define the <header> element like this:

The <header> element represents a group of introductory or navigational aids. A header element is intended to usually contain the section's heading, 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 above explanation tells us that the <header> element can contain headings, logo images, supporting text and optionally a navigation structure. Most of the web pages have page headings in the form of logo, slogan and/or supportive text. The header element acts as a container for all these. Note that the header element can be used not only for the whole page but also for individual sections of a web page. For example, in addition to the page level header you may use the header element in the contact information section of the page.

The following markup shows how the <header> element has been used in our example web page:

<header>
  <h1>This is page heading</h1>
</header>

Nav Element

The <nav> element is intended to house navigation menus or any kind of navigational structure such as hyperlinks. The W3C specifications define the <nav> element like this:

The <nav> element represents a section with navigation links.

The <nav> section can contain links to the other pages from the website or to other parts of the same web page. It is recommended that you use <nav> only for the main navigational structures and not for minor set of hyperlinks (such as the ones that usually go in the footer of a web page).

The following markup shows how the <nav> element has been used in the example web page:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

Section Element

As per W3C specifications the <section> element represents a generic section of a document or application. The <section> element should not be confused with the <div> element. The <section> element is a thematic grouping of content whereas the <div> doesn't have any such restriction. The W3C specifications further clarifies - The section element is appropriate only if the contents would be listed explicitly in the document's outline. Some examples where a <section> element can be used include contact information section of a web page, announcement section of a web page and tabbed pages of a tabbed user interface. A section usually has some heading.

The following markup shows how the <section> element looks:

<section>
  <h1>This is a section heading</h1>
  <p>
    Hello world! Hello world! Hello world!
    Hello world! Hello world! Hello world!
    Hello world! Hello world! Hello world!
  </p>
</section>

A section can also have its own <header> elements as well as a <footer> element. The section element is analogous to a section of a printed book that contains chapters or a section of a newspaper that contains news items. 

Article Element

The <article> element represents an independent item section of content such as a blog post, forum post or a comment. It is expected that the content in the article element should be independently distributable or reusable as in the case of content syndication.

 The following markup shows how the <article> element looks:

<article>
  <h1>This is article heading</h1>
  <p>
    Hello world! Hello world! Hello world!
    Hello world! Hello world! Hello world!
    Hello world! Hello world! Hello world!
  </p>
</article>

You will find that people sometimes use <section> and <article> together or use nested <article> elements. Currently there are no rigid and precise rules dictating their nesting. Whenever you use them together try to ensure that the resultant structure meets the intended purpose of the respective element as given in the W3C specifications. 

Aside Element

The <aside> element is intended to house content that is related to the surrounding content but at the same time is a standalone piece of content in itself. If you take out the <aside> from the page it shouldn't change or alter the meaning or clarity of the main page content. Think of it as a sidebar that gives some extra, related yet standalone information about the topic being discussed. Some examples of <aside> include - extra information, related links and contextual advertisements. The <aside> element can house any type of content including textual information and images. For example, the <aside> used in the example web page looks like this:

<aside>
  <figure>
    <img src="/images/laptop.png" height="100px" width="100px" />
    <figcaption>Figure caption goes here</figcaption>
  </figure>
  <p>
    Hello world! Hello world! Hello world!
    Hello world! Hello world! Hello world!
  </p>
</aside>

As you can see the <aside> element shown above contains a <figure> element and some text in the form of a <p> element. The <figure> element is intended to represent a figure and in turn contains <img> and <figcaption> element. The <img> tag points to the actual image to be displayed and the <figcaption> element holds the figure caption.

Footer Element

The <footer> element represents the footer of the whole page or a <section> element. It is intended to contain footer information such as copyright notice. The <footer> element of the example web page looks like this:

<footer>
  <hr />
  Copyright (C) 2013. All rights reserved.
</footer>

The Complete Markup of the Example Web Page

The complete HTML markup of the example web page is given below for your quick reference:

<!DOCTYPE html>
<html>
<head>
    <title>Sample HTML5 Layout</title>
    <link href="/StyleSheet.css" rel="stylesheet" />
</head>
<body>
    <header>
        <h1>This is page heading</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>
    <article>
        <h1>This is article heading</h1>
        <p>
            Hello world! Hello world! Hello world!
            Hello world! Hello world! Hello world!
            Hello world! Hello world! Hello world!
        </p>
    </article>
    <aside>
        <figure>
            <img src="/images/laptop.png" height="100px" width="100px" />
            <figcaption>Figure caption goes here</figcaption>
        </figure>
        <p>
            Hello world! Hello world! Hello world!
            Hello world! Hello world! Hello world!
        </p>
    </aside>
    <section>
        <h1>This is a section heading</h1>
        <p>
            Hello world! Hello world! Hello world!
            Hello world! Hello world! Hello world!
            Hello world! Hello world! Hello world!
        </p>
    </section>
    <footer>
        <hr />
        Copyright (C) 2013. All rights reserved.
    </footer>
</body>
</html>

Creating CSS for the Example Web Page

The example web page that you created in the preceding section has StyleSheet.css linked with it. This style sheet contains a few CSS rules that govern the look and feel of various semantic elements. In a more real-world situation you may create CSS classes and then attach them to the respective elements. In this example, however, styles are defined for the elements as shown below:

article
{
    padding:5px;
    border:dotted 3px #ff006e;
    margin-top:5px;
}

header
{
    padding:0px;
    text-align:center;
}

aside
{
    margin-top:5px;
    background-color:#f0eaea;
    padding:5px;
    text-align:center;
    font-style:italic;
    border:double 3px #b200ff;
}

section
{
    padding:5px;
    border:dashed 3px #0026ff;
    margin-top:5px;
}

footer
{
    padding:5px;
    text-align:center;
    font-weight:bold;
}

nav
{
    text-align:center;
}
ul li
{
    display:inline;
    padding-left:5px;
    padding-right:5px;
    text-align:left;
    font-size:16px;
    font-weight:bold;
}

The CSS rules defined above are quite straightforward and need no explanation. Simply add these rules to a new style sheet file and link that style sheet with the example web page you developed earlier. 

Summary

This article covered semantic markup elements of HTML5 that can be used in the proper layout of the web pages. Unlike the <div> element, the semantic elements are intended to be used for a specific purpose. The elements we covered in this article include <header>, <nav>, <footer>, <section>, <article> and <aside>.

 

網頁設計入門知識

 html5 css js

建立個人網站需要很多功夫。如果你才剛開始接觸網頁設計,我們建議大家可以先從小地方著手。不是要你立刻就寫出跟「Facebook」一樣規模的網站,但自己架一個上線的網站一點都不難,現在就開始吧!

只要依序看過以下的系列文章,你將初學者蛻變成會架設自己的第一個上線網頁,Let's go!

安裝基本軟體

現有許多工具可建構網站。如果你剛起步,你可能不知從何選擇程式碼編輯器、框架、測試工具等等。我們將透過〈安裝基本軟體〉逐步引領你安裝基本的網頁開發軟體。

你的網站看起來會是什麼樣子?

在開始為自己的網站寫程式碼之前,你應該先規劃要呈現哪些資訊?要採用哪種字體與顏色?你可依照〈你的網站看起來會是什麼樣子?〉所提供的簡易方法,照著來規劃網站的內容與設計。

與各式各樣檔案打交道

一個網站包含許多檔案:文字內容、程式碼、樣式表、多媒體內容等等。當建立網站時,你需要將這些檔案組合成清晰的架構,並確保它們能彼此互動溝通。〈與各式各樣檔案打交道〉將引領你安排合理的檔案架構,以及你應該注意的問題。

HTML 基本概念

超文字標籤語言 (Hypertext Markup Language;HTML) 可用以建構網頁內容,並賦予其含意和用途。例如某段內容要分為多個段落,或是用項目符號列成幾個重點?要在網頁插入圖片?這裡需要以資料表格整理嗎?如果這些沒有嚇到你,〈HTML 基本概念〉將提供足夠的資訊。

CSS 基本概念

串接樣式表 (Cascading Stylesheets;CSS) 可用以塑造網站的特殊風格。例如這段文字要用一般的黑色,或是改用紅色標明重點?某段重要內容應該置於畫面的何處?想用什麼背景圖片及顏色裝飾你的網站?〈CSS 基本概念〉帶你入門。

JavaScript 基本概念

程式設計語言 JavaScript 可為你的網站增加互動功能,例如動畫、遊戲、按下按鈕的後續動作、將資料輸入表單、動態套用樣式的效果等等。〈JavaScript 基本概念〉將帶你瞭解此一有趣的程式語言及其能耐,並讓你快速入門。

將你的網站發佈上線

在寫完程式碼並整理好檔案之後,接著就是將網站發佈上線,讓其他人可以瀏覽、欣賞內容。〈將你的網站發佈上線〉將帶領你以最輕鬆的方法發佈你的範例程式碼。

網站的運作方式

在瀏覽喜愛的網站時,你可能未意識到瀏覽器正於背景中運作著許多複雜事情。〈網站的運作方式〉將簡略說明網頁瀏覽時所發生的大小事。

 

本文來自:MDN Web docs https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web

 

HTML5 版面元素介紹

HTML 版面範例

下方是版面規劃範例之一,版面包括頁首、左側導覽選單、主要內容區、頁尾。

html layout 1

 

基本 HTML5 版面元素

HTML5使用新的標籤(Tags)來定義網頁內容,遵循這些規則,可容易判讀網頁各部份內容。

下方範例是使用最新的 HTNL5 標記語言來定義網頁內容版面。

 

HTML5 Semantic Elements

 上圖網頁版面的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 說明示範。

CSS Flexbox 中文介紹文章

常用 html 標籤

標題

標題標籤可以將文字格式化為標題文字,文字會加上粗體,文字大小可以從最大的 h1 至最小的 h6。

註:標籤英文字母,不分大小寫,皆是可以。

語法:

<h1>標題1:最大標題文字</h1>

<h2>標題2:標題文字</h2>

<h3>標題3:標題文字</h3>

<h4>標題4:標題文字</h4>

<h5>標題5:標題文字</h5>
<h6>標題6:最小標題文字</h6>

 

段落

將文字格式化為段落樣式。

語法:<p>這是一個文字段落 html 標籤的範例。</p>

 

插入圖片

將一個圖片檔案插入網頁中。

語法:<img src="/images\logo.png">

說明:

  • 圖片標籤不需要</img>
  • images 是資料夾名稱
  • logo.png 是圖片檔案名稱

 

超連結

將文字或圖片加入超連結

語法:

內部連結:<a href="/about.html">關於我們</a>

外部連結:<a href="/http://www.chimeimuseum.org">奇美博物館</a>

 

表格

下方範例語法是插入一個二欄三列的表格

語法:

 <table width="100%" border="1">

<tbody>

<tr>

<td>第1列第1欄儲存格</td>

<td>第1列第2欄儲存格</td>

</tr>

<tr>

<td>第2列第1欄儲存格</td>

<td>第2列第2欄儲存格</td>

</tr>

<tr>

<td>第3列第1欄儲存格</td>

<td>第3列第2欄儲存格</td>

</tr>

</tbody>

</table>

 上方表格語法產生的表格:

 第1列第1欄儲存格  第1列第2欄儲存格
 第2列第1欄儲存格  第2列第2欄儲存格
 第3列第1欄儲存格  第3列第2欄儲存格

 

 表單

 

下方是登入表單範例

語法:

<form id="form1" name="login" method="post">

<label for="textfield">帳號:</label>

<input type="text" name="id" id="id">

<label for="密碼">密碼:</label>

<input type="text" name="password" id="password">

<input type="submit" name="submit" id="submit" value="登入">

</form>



 

 

HTML文件的基本語法


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>My test page</title>

</head>

<body>

網頁圖文內容,就是製作在這裡。

下方的插入圖片的HTML語法:

<img src="/images/firefox-icon.png" alt="My test image">

</body>

</html>

 

html

 

 HTML學習資源

HTML 基礎

W3School 簡體中文 HTML 教學

W3Schools Online Web Tutorials 網頁設計線上教學(英文)

W3Schools HTML5 Tutorial 線上 HTML5 教學(英文)