Semantic structure of the page

The names of HTML tags have semantics. When using them, they should conform to the semantics of the tags as much as possible, and do not use tags with wrong semantics. Web pages with good semantics naturally have a good structure, are easy to read, write, and maintain for developers, and can also help computers better process the content of the web pages.

Meaning

An important function of HTML tags is to declare the nature of webpage elements, so that users can understand the meaning of this element only by looking at the tags, and can understand the general structure of the webpage by reading the HTML source code. This is called the semantic principle of HTML.

The following is a typical semantic web page.

<body>
  <header>Header</header>
  <main>
    <article>
      <h1>Article title</h1>
      <p>Article content</p>
    </article>
  </main>
  <footer>Footer</footer>
</body>

Just looking at the above code, you can know that the page is divided into three parts: header (<header>), main body (<main>), and footer (<footer>).

To write an HTML page, the first step is to write the skeleton of the semantic structure of the page.

Commonly used tags

The <header> tag can be used in multiple scenarios. It can represent the head of the entire web page, or the head of an article or a block.

If used at the head of a web page, it is called a "header". Website navigation and search bar are usually placed in <header>.

<header>
  <h1>Company name</h1>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
  <form target="/search">
    <input name="q" type="search" />
    <input type="submit" />
  </form>
</header>

If <header> is used in the head of the article, you can put the article title, author and other information in it.

<article>
  <header>
    <h2>Article title</h2>
    <p>Zhang San, published on January 1, 2010</p>
  </header>
</article>

Since <header> can be used in multiple scenarios, a page may contain multiple <header>, but a specific scenario can only contain one, for example, there can only be one header for a web page. In addition, <header> cannot contain another <header> or <footer>.

The <footer> tag represents the end of a web page, article or chapter. If it is used at the end of the entire web page, it is called a "page footer" and usually contains copyright information or other related information.

<body>
  <footer>
    <p>© 2018 xxx company</p>
  </footer>
</body>

In the above code, the copyright information is placed in <footer>.

<footer> can also be placed in the article.

<article>
  <header>
    <h1>Article title</h1>
  </header>
  <footer>
    <p>© Reposting is prohibited</p>
  </footer>
</article>

<footer> cannot be nested, that is, another <footer> or <header> cannot be placed inside.

<main>

The <main> tag represents the main content of the page, and a page can only have one <main>.

<body>
  <header>Header</header>
  <main>
    <article>Article</article>
  </main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</body>

The above code is the most typical page structure.

Note that <main> is the top-level tag and cannot be placed in tags such as <header>, <footer>, <article>, <aside>, <nav>, etc.

In addition, functional blocks (such as the search bar) are not suitable to be placed in <main> unless the current page is the search page.

<article>

The <article> tag represents a complete piece of content on the page. Even if the other parts of the page do not exist, it has the meaning of independent use. It is usually used to represent an article or a forum post. It can have its own title (<h1> to <h6>).

<article>
  <h2>Article title</h2>
  <p>Article content</p>
</article>

A webpage can contain one or more <article>, such as multiple articles.

<aside>

The <aside> tag is used to place parts that are indirectly related to the main content of a web page or article. The <aside> at the page level can be used to place the sidebar, but not necessarily on the side of the page; the <aside> at the article level can be used to place comments or notes.

The following is an example of <aside> at the page level.

<body>
  <main>Main content</main>
  <aside>Sidebar</aside>
</body>

Below is an example of article commentary.

<p>First paragraph</p>

<aside>
  <p>This paragraph is the focus of the article.</p>
</aside>

<section>

The <section> tag represents an independent section containing a topic, and is usually used in a document to indicate a section. For example, <article> can contain multiple <section>. <section> is always used together, and a page cannot have only one <section>.

<article>
  <h1>Article title</h1>
  <section>
    <h2>Chapter One</h2>
    <p>...</p>
  </section>
  <section>
    <h2>Chapter Two</h2>
    <p>...</p>
  </section>
</article>

In the above code, <article> contains two <section>, representing two chapters.

<section> is very suitable for slide show pages, each <section> represents a slide.

Generally speaking, <section> should have a title, that is, include <h1>~<h6> tags. Multiple <section> can be placed in the same <article>, and a <section> may also contain multiple <article>, depending on <section> and <article> The meaning of the current page.

The <nav> tag is used to place the navigation information of a page or document.

<nav>
  <ol>
    <li><a href="item-a">Product A</a></li>
    <li><a href="item-b">Product B</a></li>
    <li>Product C</li>
  </ol>
</nav>

Generally speaking, <nav> is often placed in <header> and is not suitable for <footer>. In addition, a page can have multiple <nav>s, such as one for site navigation and the other for article navigation.

<h1> ~ <h6>

HTML provides 6 tags to indicate the title of the article. According to the level of the title, it is divided into six levels.

-<h1>: Level 1 heading -<h2>: Level 2 heading -<h3>: Level 3 heading -<h4>: Level 4 heading -<h5>: Level 5 heading -<h6>: Level 6 heading

<h1> is the highest-level heading, and <h6> is the lowest-level heading. The next-level headings are all sub-headings of the upper-level heading. For example, one <h1> can have multiple <h2>s, and each <h2> can have multiple <h3>s. .

<body>
  <h1>Introduction to JavaScript language</h1>
  <h2>Overview</h2>
  <h2>Basic concepts</h2>
  <h3>Webpage</h3>
  <h3>Link</h3>
  <h2>Main usage</h2>
</body>

The above code clearly shows the main structure of the article through the chapter title. The specific content can be written below the chapter title.

The title should not be skipped, for example, write h3 directly below h1. Although this will not report an error, it will cause the article to lose its clear chapter structure.

By default, the browser displays the title in bold. The font size of h1 is larger than h2, h2 is larger than h3, and so on.

<hgroup>

If the main heading contains multi-level headings (for example, with sub-headings), you can use the <hgroup> tag to put the multi-level headings in it.

<hgroup>
  <h1>Heading 1</h1>
  <h2>Subheading 1</h2>
  <h2>Subheading 2</h2>
</hgroup>

Note that <hgroup> can only contain <h1>~<h6> and cannot contain other tags.