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

首頁 >

Web Developer's Reference Guide

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>
主站蜘蛛池模板： 嘉黎县| 贵德县| 桐城市| 五常市| 甘孜县| 永嘉县| 旺苍县| 宜兰县| 苏州市| 台州市| 江北区| 自贡市| 黄平县| 沙湾县| 通渭县| 阜康市| 嵩明县| 建昌县| 安平县| 天峻县| 久治县| 信宜市| 寿光市| 兰溪市| 元朗区| 凭祥市| 沁阳市| 临猗县| 定安县| 偏关县| 衡山县| 昆山市| 宣化县| 井冈山市| 北辰区| 贵溪市| 雷山县| 公主岭市| 文山县| 特克斯县| 武冈市|