Html 简明教程

HTML - Layout Elements

HTML 布局元素各式各样的 semantic 元素，用于定义网页的不同部分，使其在视觉上具有吸引力且对用户友好。

HTML layout elements are various semantic elements that are used to define different parts of a web page for making it visually appealing and user-friendly.

Visual Representation of a Layout Structure

下图说明了一个典型的网页布局是如何设计的。大多数网页都有标题部分、导航栏、索引部分、内容部分和页脚部分，可以使用 <header>、<nav>、<section>、<article> 和 <footer> 标签分别定义。

The below figure illustrates how a typical web page layout is designed. Most of the web pages have title section, a nav bar, index section, content section and a footer section which can be defined using the <header>, <nav>, <section>, <article> and <footer> tags respectively.

layout structure

每个元素都有一个特定的含义和功能，并且可以通过属性和样式进行自定义。它们描述了它们包含的内容，而不仅仅是网页的外观。

Each element has a specific meaning and function, and can be customized with attributes and styles. They describe the content they contain, not just the appearance of a web page.

List of HTML Layout Elements

  1. Header Element

  2. Nav Element

  3. Section Element

  4. Footer Element

  5. Article Element

  6. Aside Element

Header Element of HTML Layout

  • <header>* 元素用于在 HTML 网页中添加页眉部分。它用作页面介绍和导航部分的容器。此标签内的所有内容都将位于网页顶部。为您的网页提供页眉部分有助于搜索引擎轻松理解您的内容并相应地对页面进行排名。

The <header> element is used to add a header section in HTML web page. It serves as container for introductory and navigational part of a page. All the content inside this tag will be on top of the webpage. Providing a header section to your webpage helps search engines to understand your contents easily and rank the page accordingly.

以下是一个简单的代码，演示如何在你的网页中使用页眉元素。

Here is a simple code that shows how to use header element in your webpages.

<!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>

Nav Element of HTML Layout

HTML * <nav>* 元素表示网页中的页面的一个部分，它具有指向页面中其他页面或部分的超链接（就像菜单栏一样）。它通常包含在 <header> 元素或 <section> 元素中。以下代码在页眉标签中定义一个导航部分。

The HTML <nav> element represents a section of a page within the webpage, where it has hyperlinks to other pages or parts within the page (just like the menu bar). It is usually included inside <header> element or <section> element. Following code defines a nav section inside header tag.

<!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>

Section Element of HTML Layout

HTML * <section>* 定义了网页的主要部分，其中将显示所有重要内容。一个页面中可以有多个部分。

The HTML <section> defines a major part of the web page where all the important content will be displayed. There can be multiple section in a single page.

<!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>

Footer Element of HTML Layout

  • <footer>* 标签定义了网页的页脚部分。此部分包含版权信息、社交媒体链接和其他重要详细信息。它将始终位于网页的底部。

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.

<!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>

Article Element of HTML Layout

HTML * <article>* 标签指定独立的自包含内容，例如论坛帖子、杂志、任何博客帖子等等。当 HTML article 元素嵌套时，内部元素表示与外部元素相关的文章。例如，社交媒体帖子的评论可以是 article 元素，嵌套在表示社交媒体帖子的 article 中。它主要用于论坛帖子、杂志或报纸文章、博客条目、产品卡等。

HTML <article> tag specifies an independent self-containing content such as a forum post, magazine, any blog post and so on. When an HTML article element is nested, the inner element represents the article related to the outer element. For example, comments on social media posts can be an article element nested in the article representing the social media post. It is mostly used for forum posts, magazine or newspaper articles, blog entries, product cards, etc

<!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>

Aside Element in HTML Layout

HTML * <aside>* 标签指定与主要内容直接或间接相关的内容部分（如侧边栏）。如果你从网页中删除旁白内容，主要内容不会受到影响，因为旁白内容是页面的一个独立的可选组件。此标签通常用于广告。

HTML <aside> tag specifies a section of content that is directly or indirectly related to the main content (like a sidebar). If you remove aside content from a web page, the main content will not be impacted because aside content is a separate, optional component of the page. This tag is often used for Advertisements.

<!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>

Create HTML Layout - Using layout Elements

语义元素有助于提高网页的可读性和可访问性，以及它的 SEO（搜索引擎优化）性能。在以下 HTML 代码中，我们将使用上述语义元素创建一个简单的网页布局。

The semantic elements help to improve the readability and accessibility of the web page, as well as its SEO (search engine optimization) performance. In the following HTML code, we are going to create a simple layout of a web page with the help of above mentioned semantic elements.

<!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>