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 div
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.
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>
The section
element describes the content section of a document. For example, this can be a chapter of a book:
<section></section>
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>
The nav
element is the navigation element:
<nav></nav>
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>
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>
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>
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>
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>
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>
The footer
element provides a footer of a particular group of content, its syntax is as follows:
<footer></footer>
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>
The address
element is used for the contact address of the author or organization, its syntax is as follows:
<address></address>
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 div
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>
The aside
element is for supplemental content:
<aside></aside>
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>
The p
element is known as the paragraph element. This is a block element, its syntax is as follows:
<p></p>
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 div
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>
3.137.223.190