h30 HTML Layout Elements

The Layout Elements of HTML

In HTML, there are various semantic elements that are used to define different parts of a web page making it visually appealing and user-friendly. These semantic elements are collectively termed as layout elements.

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. They are as follows −

S.No.	Tag & Description
1	header The header tag is used to add a header section in HTML web page. All the content inside this tag will be on top of the webpage. `<header>` 元素表示介绍性内容或一组导航链接的容器。 `<header>` 元素通常包含：一个或多个标题元素 (<h1> - <h6>) 徽标或图标作者信息提示：`<header>` 标签常被用于定义文档的页眉。注意：一个 HTML 文档中可以有多个 `<header>` 元素。但是，`<header>` 不能放在 <footer>、<address> 或另一个 `<header>` 元素中。
2	nav It 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). `<nav>` 标签定义了一组导航链接。请注意，并非所有链接都应该放在 `<nav>` 元素内。`<nav>` 元素仅用于主要的导航链接块。
3	section It defines a major part of the web page where all the important content will be displayed. `<section>` 标签定义文档中的一个部分。
4	footer The footer tag defines the footer section of the webpage. This section contains copyright information and other important details. It will be always at the bottom of the webpage. `<footer>` 标签定义文档或小节的页脚。 `<footer>` 元素通常包含：作者信息版权信息联系信息站点地图返回顶部链接相关页面您可以在一个文档中包含多个 `<footer>` 元素。
5	article It specifies an independent self-containing content such as a forum post, magazine, any blog post and so on. `<article>` 标签规定独立的、自包含的内容。一篇文章应该能够独立理解，且可以独立于整个站点进行分发。 `<articel>` 元素的潜在来源包括：论坛帖子博客文章新闻报道用户评论注意：在浏览器中，`<article>` 元素本身不会呈现任何特殊的样式。但是，你可以使用 CSS 样式化 `<article>` 元素
6	aside It specifies a section of content that is directly or indirectly related to the main content (like a sidebar). `<aside>` 标签定义了它所在内容之外的一些内容。 aside 的内容应该与周围的内容间接相关。提示：`<aside>` 内容通常作为侧边栏放置在文档中。注意：`<aside>` 元素在浏览器中不会呈现为任何特殊的样式。但是，您可以使用 CSS 来设置 `<aside>` 元素的样式
7	summary It specifies a caption for the <details> element. `<summary>` 标签为 <details> 元素定义了一个可见的标题。点击标题可以查看/隐藏详细信息。注意：`<summary>` 元素应该是 <details> 元素的第一个子元素。
8	details It specifies a tag for additional information. It requires the <summary> element. `<details>` 标签规定用户可以根据需要打开和关闭的其他详细信息。 `<details>` 标签通常用于创建用户可以打开和关闭的交互式小部件。默认情况下，小部件是关闭的。打开时，它会展开并显示其中的内容。任何类型的内容都可以放在 `<details>` 标签中。提示：<summary> 标签与 `<details>` 结合使用，可为详细信息指定可见的标题。用户点击标题时，会显示出 `<details>` 定义的内容。

Visual Representation of a Layout Structure

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.

Adding Favicon

HTML Layout - using layout elements

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 website to provide quality online education in the domains of Computer Science, Information Technology, Programming Languages, and other Engineering as well as Management 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 © https://www.cnblogs.com/emanlee. All rights reserved.</p>
      </div>
   </footer>
</body>
</html>

When we will execute the above code, it will display a layout consisting of a header, a navigation bar with some links, a content part with some information, and a footer with additional details.

Output

In the next chapter, we will learn how to design a layout using the CSS properties like flexbox, grid and float.

posted @ 2024-05-18 20:01 emanlee 阅读(6) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· HTML 04 - Elements

· HTML 01 - Introduction

· HTML 元素与标签

· 初识HTML

· HTML学习笔记

历史上的今天：
2014-05-18 Windows Myeclipse 10 安装 Perl 插件
2010-05-18 14个优化网站性能提高网站访问速度技巧
2009-05-18 如何查看sql server版本号
2009-05-18 BlogEngine.NET Extensions
2009-05-18 BlogEngine.NET Widgets
2008-05-18 C语言程序设计练习题参考答案第八章文件（2）
2008-05-18 C语言程序设计练习题参考答案第八章文件（1）

S.No.	Tag & Description
1	header The header tag is used to add a header section in HTML web page. All the content inside this tag will be on top of the webpage. `<header>` 元素表示介绍性内容或一组导航链接的容器。 `<header>` 元素通常包含：一个或多个标题元素 (<h1> - <h6>) 徽标或图标作者信息提示：`<header>` 标签常被用于定义文档的页眉。注意：一个 HTML 文档中可以有多个 `<header>` 元素。但是，`<header>` 不能放在 <footer>、<address> 或另一个 `<header>` 元素中。
2	nav It 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). `<nav>` 标签定义了一组导航链接。请注意，并非所有链接都应该放在 `<nav>` 元素内。`<nav>` 元素仅用于主要的导航链接块。
3	section It defines a major part of the web page where all the important content will be displayed. `<section>` 标签定义文档中的一个部分。
4	footer The footer tag defines the footer section of the webpage. This section contains copyright information and other important details. It will be always at the bottom of the webpage. `<footer>` 标签定义文档或小节的页脚。 `<footer>` 元素通常包含：作者信息版权信息联系信息站点地图返回顶部链接相关页面您可以在一个文档中包含多个 `<footer>` 元素。
5	article It specifies an independent self-containing content such as a forum post, magazine, any blog post and so on. `<article>` 标签规定独立的、自包含的内容。一篇文章应该能够独立理解，且可以独立于整个站点进行分发。 `<articel>` 元素的潜在来源包括：论坛帖子博客文章新闻报道用户评论注意：在浏览器中，`<article>` 元素本身不会呈现任何特殊的样式。但是，你可以使用 CSS 样式化 `<article>` 元素
6	aside It specifies a section of content that is directly or indirectly related to the main content (like a sidebar). `<aside>` 标签定义了它所在内容之外的一些内容。 aside 的内容应该与周围的内容间接相关。提示：`<aside>` 内容通常作为侧边栏放置在文档中。注意：`<aside>` 元素在浏览器中不会呈现为任何特殊的样式。但是，您可以使用 CSS 来设置 `<aside>` 元素的样式
7	summary It specifies a caption for the <details> element. `<summary>` 标签为 <details> 元素定义了一个可见的标题。点击标题可以查看/隐藏详细信息。注意：`<summary>` 元素应该是 <details> 元素的第一个子元素。
8	details It specifies a tag for additional information. It requires the <summary> element. `<details>` 标签规定用户可以根据需要打开和关闭的其他详细信息。 `<details>` 标签通常用于创建用户可以打开和关闭的交互式小部件。默认情况下，小部件是关闭的。打开时，它会展开并显示其中的内容。任何类型的内容都可以放在 `<details>` 标签中。提示：<summary> 标签与 `<details>` 结合使用，可为详细信息指定可见的标题。用户点击标题时，会显示出 `<details>` 定义的内容。