How to use the aside tag in HTML5? Do you know how to use the HTML5aside sidebar?-H5 Tutorial-php.cn

How to use the aside tag in HTML5? Do you know how to use the HTML5aside sidebar?

寻∝梦

Release： 2018-08-15 17:39:23

Original

11067 people have browsed it

How to use the aside tag in HTML5? Do you know how to use the HTML5aside sidebar? This article mainly explains the definition and usage of the aside tag in HTML5, as well as the detailed explanation and precautions of the aside element in HTML5.

HTML 5

tag definition and usage:

tag defines content other than article. The content of aside should be related to the content of article.

Here are examples:

<p>This summer, I finally came to PHP Chinese net.</p>
<aside>
<h4>Online programming</h4>
PHP Chinese network is a great platform for online learning programming in China.
</aside>

Copy after login

Detailed explanation of the

element in HTML5:

The HTML

element represents a part of a page, Its content is not closely related to other content on this page, or is not related and exists alone. The

element is usually displayed as a sidebar or some inserted supplementary content. It is usually used to display some definitions in the sidebar, such as catalogs, indexes, glossaries, etc.; it can also be used to display related advertising, author introductions, web applications, related links, a brief introduction to the current page content, etc.

Notes on using the

element:

Do not use the

element to mark text in brackets, because this type of text is considered the main part of the content.

Two ways to use the aside tag in HTML5:

1. It is included in the article element as ancillary information part of the main content. The content can be related information related to the current article. , ranking explanation, etc.

<article>
  <h1>…</h1>
  <p>…</p>
  <aside>…</aside>
</article>

Copy after login

2. Use it outside the article element as a global subsidiary information part of the page or site. The most typical one is the sidebar, which contains friendly links, lists of other articles in the blog, advertising units, etc.

<aside>
  <h2>…</h2>
  <ul>
    <li>…</li>
    <li>…</li>
  </ul>
  <h2>…</h2>
  <ul>
    <li>…</li>
    <li>…</li>
  </ul>
</aside>

Copy after login

Tips and Notes:

Tip: The content of