官术网_书友最值得收藏!

首頁 >

Web Developer's Reference Guide

  • Web Developer's Reference Guide
  • Joshua Johanan Talha Khan Ricardo Zea
  • 1053字
  • 2021-07-09 20:18:20

Semantic content sections

The next elements are the main elements to use when adding content to the document. For example, using the article element instead of an arbitrary p element allows the browser to infer that this is the main content of the page. These elements should be used to give structure to a document and not be used for styling purposes. Semantic elements make our HTML document more accessible using an ever-increasing amount of different devices.

body

The body element is the main content section of the document. There must be only one main element, its syntax is as follows:

<body></body>
Attributes

The attributes of the body element include the inline event attributes.

Description

The body element is the main content section of most documents. It must be the second child element of html, and there should only be one body element in a document.

Here is an example of the body element:

<body>
    <span>Example Body</span>
</body>

section

The section element describes the content section of a document. For example, this can be a chapter of a book:

<section></section>
Description

The section element is a new element that was introduced in HTML5. A section element should group the content together. While not a requirement, using a heading element as the first element in the code is a best practice. The section should be viewed as another part of the outline of the document. It groups related items into an easily targeted area. You can use this element multiple times in a document.

Here is an example of the section element:

<section>
    <h2>Section Heading</h2>
    <p>Section content.</p>
</section>

nav

The nav element is the navigation element:

<nav></nav>
Description

The nav element is another semantic element introduced with HTML5. This lets the browser know that the content of this element is the parent and is for navigation. The nav element enhances accessibility by giving screen readers a landmark for navigation. This element should wrap any site navigation or other links that are grouped together for ease of navigation. You can use this multiple times.

Here is an example of using the nav element:

<nav>
    <ul>
        <li><a href="#">Home</a></li>
    </ul>
</nav>
article

The article element is designed to wrap content that can stand on its own:

<article></article>
Description

The article element is a new element introduced in HTML5. The article element is similar to the section element; in that, it denotes that the content in the element is the core part of the page. The article element should be a complete composition that can stand on its own. For example, in a blog, the actual blog post should be wrapped with an article element.

Content can then be further broken down using either an article element or a section element. There is no standard rule for when to use either. However, both should be related to the content in the outer article element.

Here is an example of the article element being used:

<article>
    <header>
        <h1>Blog Post</h1>
    </header>
    <p>This post covers how to use an article element...</p>
    <footer>
        <address>
            Contact the author, Joshua
        </address>
    <footer>
</article>

Headings

The heading elements are the elements that specify different levels of headings according to their importance:

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Description

These should be used to give relative importance to different headings. For example, h1 should be used for the title of the document. The importance of a heading goes down as the heading value goes up, that is, h6 is the least important level of heading in the example that follows.

Here is an example using all the headings:

<h1>Heading Importance 1</h1>
<h2>Heading Importance 2</h2>
<h3>Heading Importance 3</h3>
<h4>Heading Importance 4</h4>
<h5>Heading Importance 5</h5>
<h6>Heading Importance 6</h6>
See also

You can also refer to the global attributes to learn the heading element in more detail.

header

The header element groups the content that is considered to be the header for a particular group of content, its syntax is as follows:

<header></header>
Description

The header element is usually one of the first content elements on the page. It will most likely contain navigation options, a logo, and/or a search box. The header is usually repeated on multiple pages of a website. Each section or article can also contain a header. This is a new element introduced in HTML5.

Here is an example of the header element:

<header>
    <img src="logo.png" />
</header>
See also

You can also refer to the global attributes to find out about the header element in more detail.

footer

The footer element provides a footer of a particular group of content, its syntax is as follows:

<footer></footer>
Description

The footer element wraps all the content that is considered to be the footer of the document. Usually, this will include copyright, author, and/or social media links. Of course, what you decide to put into a footer is arbitrary. Each section or article can also contain a footer.

Here is an example of the footer element:

<footer>
    Written by: Joshua Johanan
</footer>

address

The address element is used for the contact address of the author or organization, its syntax is as follows:

<address></address>
Description

Use the address element when you have the contact information of the user. The address element will add semantic value to the content, contrary to a regular p element.

Usually, this will be placed in the footer, but it can be used in an article or body section. It will apply to the nearest article element or to the entire document. Do not use any of the content section elements in an address element.

Here is the address element in use:

<footer>
    <address>
        Please contact me at my <a href="#">website</a>
    </address>
</footer>

aside

The aside element is for supplemental content:

<aside></aside>
Description

Use the aside element to highlight the content that is tied to the main article. Some examples in the context of the blog would be the author's profile, other posts by this author, or even related advertisements.

Here is an example of aside:

<aside>
    Peyton Manning is a 5-time MVP (2003, 2004, 2008, 2009, 2013)
    
</aside>

p

The p element is known as the paragraph element. This is a block element, its syntax is as follows:

<p></p>
Description

The p element should be used to distinguish between separate paragraphs in a document. This element is associated with the text and inline elements. You will not want to use a p element, for example. If you find yourself wanting to do this, you may want to build your document differently.

Here are a couple of paragraphs:

<p>This is an intro paragraph.</p>
<p>This paragraph will build upon the opening.</p>
主站蜘蛛池模板： 栾川县| 镇安县| 平和县| 聊城市| 嘉善县| 嘉义市| 巴彦县| 浪卡子县| 咸宁市| 滦南县| 潢川县| 北票市| 子长县| 灯塔市| 长沙市| 墨江| 民县| 长垣县| 锡林郭勒盟| 滦平县| 平乐县| 宝山区| 安国市| 屏南县| 兴山县| 鹤壁市| 日照市| 仁化县| 沙坪坝区| 深水埗区| 保德县| 东宁县| 蒙城县| 泗阳县| 普兰店市| 双桥区| 扎鲁特旗| 奉新县| 嵊州市| 沙湾县| 寻乌县|