What are the commonly used structural elements in html?

Commonly used structural elements in HTML are: 1. div, which can define partitions or sections in the document, and is used to provide structure and background for block-level content in the HTML document; 2. section, Represents an area in the document; 3. article, represents an independent structure in a document, page, application or website, which is intended to be an independently assignable or reusable structure; 4. aside, represents an area that is almost the same as the rest of the page content. Irrelevant parts; 5. header, indicating the page header or block header.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

Structural elements, also known as block elements, are elements used to define the content range of blocks. Previously, there was only one

block element. HTML5 added 7 new semantic structural elements, including

,

,

,

,

,

,

htmlCommonly used structural elements

##div elements# The ##div element is an element used to provide structure and background for block-level content within an HTML (an application under Standard Universal Markup Language) document.

can define divisions or sections (division/section) in the document.

tag can divide the document into independent and different parts. It can be used as a strict organizational tool and does not use any formatting associated with it.

If you use id or class to mark

, the tag will become more effective.

Note:

is a block-level element, which means that browsers usually place a line break before and after the div element.

Tip: Use the

element to group block-level elements so they can be formatted using styles.

section element

The Section element (

) represents an area (or section) in the document and is a block-level common element. For example, a topic group in the content will generally include a heading. Generally, each

is identified by whether it contains a title (

-

element) as a child node [Note] If the element content can be divided into several parts, You should use

instead of

; also, don’t use the

element as an ordinary container. This is how

should be used. Generally speaking, a

should appear in the document outline.

article element

The

An independent structure that is intended to be independently assignable or reusable. This may be a forum post, magazine or news article, blog, user-submitted comment, interactive component, or other independent item of content. When the

element is used nested, the element represents the article related to the outer element. For example, an

element representing a blog comment can be nested within an

element representing a blog post.

Author information for the

element can be provided through the

element, but not Applies to nested

elements; the publish date and time of the

element can be represented by the pubdate attribute of the element

[Note] For

and

aside element that must be added with a title

The

element represents a part that has almost nothing to do with the rest of the page content and is considered Parts that are independent of the content and can be separated independently without affecting the whole. Generally used to represent sidebars that are not directly related to content. The content in

is independent of the content it is associated with. The absence of either will not affect the understanding of the meaning of the respective texts. Such as an article's advertisement, related background and quotation content, etc.

nav element

HTML navigation bar (

) depicts an area containing multiple hyperlinks , this area contains a list of links to other pages, or other parts of the page

Not all links must use the

element, it is only used to put some popular links into the navigation bar , for example, the

element is often used to include a rarely used link list at the bottom of the page. There is no need to add

.

A web page may also contain multiple

elements, such as a It is the navigation list within the website, and the other is the navigation list within this page

header element

The

element represents the page header or block header , used to group the introductory content and the auxiliary navigation of the block together, so it may contain the title element of the block and other introductory content (table of contents, logo, etc.)

[Note] Since the

and

elements are not section content, new sections will not be introduced into the outline

footer element

　The

element represents the footer of the latest section content or root node (sectioning root) element. A footer usually contains information such as the author of the chapter, copyright data, or links related to the document

[Note] The author information within the

element should be included in the

element

Case description:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>苹果首页</title>
</head>
<body>
<nav>
  <ul>
    <li><a href="#">Apple</a></li>
    <li><a href="#">Mac</a></li>
    <li><a href="#">iPad</a></li>
    <li><a href="#">iPhone</a></li> 
    <li><a href="#">Watch</a></li> 
    <li><a href="#">Music</a></li> 
    <li><a href="#">技术支持</a></li> 
    <li><a href="#">搜索</a></li> 
    <li><a href="#">购物袋</a></li>           
  </ul>
</nav>
<article>
  <section>展示1</section>
  <section>展示2</section>
  <section>展示3</section>
  <section>展示4</section>
  <nav>
    <ul>
      <li>按钮1</li>
      <li>按钮2</li>
      <li>按钮3</li>
      <li>按钮4</li>
    </ul>
  </nav>
</article>
<aside>
  <ul>
    <li><a href="#">Watch</a></li>
    <li><a href="#">Pencil</a></li>
    <li><a href="#">iPad</a></li>
    <li><a href="#">MacBook</a></li>
  </ul>
</aside>
<footer>
  <nav>
    <div>选购及了解</div>
    <div>商店</div>
    <div>应用</div>
    <div>账户</div>
    <div>关于</div>
  </nav>
  <section>
    <div>其他杂项</div>
  </section>
</footer>
</body>
</html>

## Description: main

is not commonly used, the main reason is IE browsing No browser supports the

The main element (

) renders the document or the main body of the application. The main part consists of content that is directly related to the document or extends to the central theme of the document or the main functional parts of the application. This part of the content should be unique in the document and should not contain any content that is repeated in a series of documents

The

tag cannot be an inheritance of the following elements, including

,

,

,

, or

. More than one

tag cannot appear in a document

So, a normal outermost layout should be as follows

<header></header>
<main>
  <section></section>
  <section></section>
  <section></section>
</main>
<footer></footer>

But now, generally, the layout is as follows

<header></header>
<section></section>
<section></section>
<section></section>
<footer></footer>

(Learning video sharing:

Getting started with web front-end)

The above is the detailed content of What are the commonly used structural elements in html?. For more information, please follow other related articles on the PHP Chinese website!