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)  编辑  收藏  举报