HTML - 佈局元素

HTML 佈局元素是用於定義網頁不同部分的各種**語義**元素，用於使其視覺上更具吸引力且使用者友好。

佈局結構的視覺表示

下圖說明了典型網頁佈局的設計方式。大多數網頁都有標題部分、導航欄、索引部分、內容部分和頁尾部分，可以使用<header>、<nav>、<section>、<article>和<footer>標籤分別定義。

Visual Representation of a Layout Structure

每個元素都有特定的含義和功能，並且可以使用屬性和樣式進行自定義。它們描述了它們包含的內容，而不僅僅是網頁的外觀。

HTML 佈局元素列表

Header 元素
Nav 元素
Section 元素
Footer 元素
Article 元素
Aside 元素

HTML 佈局的 Header 元素

<header> 元素用於在 HTML 網頁中新增頁首部分。它用作頁面介紹和導航部分的容器。此標籤內的所有內容都將位於網頁頂部。為您的網頁提供頁首部分有助於搜尋引擎輕鬆理解您的內容並相應地對頁面進行排名。

以下是一個簡單的程式碼，展示瞭如何在網頁中使用頁首元素。

<!DOCTYPE html>
<html lang="en">

<head>
      <title>Tutorialspoint</title>
</head>

<body>
   <header>
   <div>
      <h1>Tutorialspoint</h1>
      <h3>Simply easy learning!</h3>
   </div>
   </header>
</body>

</html>

HTML 佈局的 Nav 元素

HTML <nav> 元素表示網頁內頁面的一部分，其中包含指向頁面內其他頁面或部分的超連結（就像選單欄一樣）。它通常包含在 <header> 元素或 <section> 元素內。以下程式碼在頁首標籤內定義了一個導航部分。

<!DOCTYPE html>
<html lang="en">

<head>
      <title>Tutorialspoint</title>
</head>

<body>
   <header>
   <div>
      <h1>Tutorialspoint</h1>
      <h3>Simply easy learning!</h3>
   </div>
   <div>
      <nav>
         <ul>
            <li>
               <a href="#">
                  Home
               </a>
            </li>
            <li>
               <a href="#">
                  HTML
               </a>
            </li>
            <li>
               <a href="#">
                  CSS
               </a>
            </li>
            <li>
               <a href="#">
                  Python
               </a></li>
            <li>
               <a href="#">
                  JavaScript
               </a>
            </li>
         </ul>
      </nav>
   </div>
</header>
</body>

</html>

HTML 佈局的 Section 元素

HTML <section> 定義網頁的主要部分，其中將顯示所有重要內容。一個頁面可以有多個部分。

<!DOCTYPE html>
<html lang="en">

<head>
      <title>Tutorialspoint</title>
</head>

<body>
      <header>
         <h1>Tutorialspoint</h1>
         <h3>Simply easy learning!</h3>
         <nav>navigation bar</nav>
      </header>
      <section>Section 1</section>
      <section>Section 2</section>
      <section>Section 2</section>
</body>

</html>

HTML 佈局的 Footer 元素

<footer> 標籤定義網頁的頁尾部分。此部分包含版權資訊、社交媒體連結和其他重要詳細資訊。它將始終位於網頁底部。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Footer Example</title>
   <style>
      body {
         display: flex;
         flex-direction: column;
         min-height: 100vh;
         margin: 0;
      }
      .content {
         flex: 1;
      }
      footer {
         background-color: #333;
         color: #fff;
         text-align: center;
         padding: 20px 0;
      }
      footer .social-media a {
         color: #fff;
         margin: 0 10px;
         text-decoration: none;
      }
      footer .social-media a:hover {
         color: #ddd;
      }
   </style>
</head>

<body>
   <div class="content">
      <h2>Footer Element of HTML Layout</h2>
      <p>
         The footer tag defines the footer section of 
         the webpage. This section contains copyright 
         information, social media links, and other 
         important details. It will be always at the 
         bottom of the webpage.
      </p>
   </div>
   <footer>
      <p>© 
         2024 Tutorialspoint. All rights reserved.
      </p>
      <div class="social-media">
         <a href="#">Facebook</a>
         <a href="#">Twitter</a>
         <a href="#">Instagram</a>
         <a href="#">LinkedIn</a>
      </div>
   </footer>
</body>

</html>

HTML 佈局的 Article 元素

HTML <article> 標籤指定一個獨立的自包含內容，例如論壇帖子、雜誌、任何部落格文章等等。當 HTML article 元素巢狀時，內部元素表示與外部元素相關的文章。例如，社交媒體帖子上的評論可以是巢狀在表示社交媒體帖子的文章中的文章元素。它主要用於論壇帖子、雜誌或報紙文章、部落格文章、產品卡片等。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Article Example</title>
   <style>
      article {
         background: #fff;
         margin: 20px 0;
         padding: 20px;
      }
   </style>
</head>

<body>
   <header>
      <h1>My Blog</h1>
   </header>

   <main>
      <article>
         <h2>Understanding the HTML Article Tag</h2>
         <p>
            Posted on <time datetime="2024-06-20">
            June 20, 2024</time> by Farhan
         </p>
         <p>
            The article tag is commonly used for content 
            such as blog posts, news articles, and user 
            comments.
         </p>
         <p>
            Lorem ipsum dolor sit amet, consectetuer a
            cing elit. Aenean commodo ligula eget dolor. 
            Aenean massa. Cum sociis natoque penatib
            magnis dis parturient montes, nascet
            mus. Donec quam felis, ultric
      </article>
   </main>
   
</body>
</html>

HTML 佈局中的 Aside 元素

HTML <aside> 標籤指定與主要內容直接或間接相關的內容部分（如側邊欄）。如果您從網頁中刪除 aside 內容，則主要內容不會受到影響，因為 aside 內容是頁面中一個獨立的、可選的元件。此標籤通常用於廣告。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Aside Tag Example</title>
   <style>
      body {
         display: flex;
         flex-direction: column;
         background-color: #f4f4f4;
      }

      main {
         display: flex;
         flex: 1;
         padding: 20px;
      }
      article {
         flex: 3;
         background: #fff;
         padding: 20px;
         margin-right: 20px;
      }
      aside {
         flex: 1;
         background: #fff;
         padding: 20px;
         border-radius: 8px;
      }

   </style>
</head>

<body>
   <header>
      <h1>My Blog</h1>
   </header>
   <main>
      <article>
         <h3>Articles...</h3>
      </article>

      <aside>
         <h2>Related Articles</h2>
         <ul>
            <li>
               <a href="/html/index.htm">
                  HTML Tutorial
               </a></li>
            <li>
               <a href="/css/index.htm">
                  CSS Tutorial
               </a></li>
            <li>
               <a href="/python/index.htm">
                  Python Tutorial
               </a></li>
         </ul>
      </aside>
   </main>
</body>

</html>

建立 HTML 佈局 - 使用佈局元素

語義元素有助於提高網頁的可讀性和可訪問性，以及其 SEO（搜尋引擎最佳化）效能。在以下 HTML 程式碼中，我們將藉助上述語義元素建立一個簡單的網頁佈局。

<!DOCTYPE html>
<html>

<head>
   <title>Layout structure of HTML</title>
   <style>
      * {
         box-sizing: border-box;
      }
      header {
         font-size: 25px;
         color: whitesmoke;
         padding: 1px;
         text-align: center;
         background-color: lightslategray;
      }
      nav {
         float: left;
         width: 20%;
         height: 350px;
         background: lightgray;
         padding: 20px;
      }
      nav ul {
         padding: 1px;
      }
      article {
         float: left;
         padding: 20px;
         width: 80%;
         background-color: lightyellow;
         height: 350px;
      }
      footer {
         background-color: lightslategray;
         padding: 10px;
         text-align: center;
         color: white;
         padding-top: 20px;
         padding-bottom: 10px;
      }
      footer a {
         margin: 10px;
      }
      footer p {
         margin-top: 30px;
      }
   </style>
</head>

<body>
   <!--header segment-->
   <header>
      <div>
         <p>Tutorialspoint</p>
         <p>Simply easy learning!</p>
      </div>
   </header>
   <section>
      <!--Menu Navigation segment-->
      <nav>
         <ul>
            <li>
               <a href="#">Home</a>
            </li>
            <li>
               <a href="#">Jobs</a>
            </li>
            <li>
               <a href="#">Library</a>
            </li>
            <li>
               <a href="#">Articles</a>
            </li>
            <li>
               <a href="#">Certification</a>
            </li>
         </ul>
      </nav>
      <!--Content segment-->
      <article>
         <h1>Welcome to Tutorials point</h1>
         <p> 
            Tutorialspoint.com is a dedicated page 
            to provide quality online education in 
            domains of Computer Science and other
            Technology, Programming Languages, and 
            other Engineering subjects. 
         </p>
      </article>
   </section>
   <!--Footer segment-->
   <footer>
      <h2>Tutorialspoint</h2>
      <div>
         <a href="#"> About us </a>
         <a href="#"> Refund policy </a>
         <a href="#"> Terms of use </a>
         <a href="#"> Privacy policy </a>
         <a href="#"> FAQ's </a>
         <a href="#"> Affiliates </a>
         <a href="#"> Contact </a>
      </div>
      <div>
         <p>
            Copyrights © TUTORIALS POINT (INDIA) 
            PRIVATE LIMITED. All rights reserved.
         </p>
      </div>
   </footer>
</body>

</html>

要了解有關HTML 佈局 的更多資訊，請參閱附加的連結文章。

列印頁面