FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/html5.jpg


@harish 817

Sectioning Elements in HTML


2021-11-17 21:15 · 8 min read

HTML Sectioning Elements It is important to understand that many HTML sectioning (e.g. main, nav, aside ...) elements by default define ARIA landmarks. If HTML sectioning elements are used without understanding the associated landmark structure, assistive technology users will most likely be confused and less efficient in accessing content and interacting with web pages.

Nav Element

The <nav> element is primarily intended to be used for sections that contain main navigation blocks for the website, this can include links to other parts of the web page (e.g. anchors for a table of contents) or other pages entirely.

Inline items

The following will display an inline set of hyperlinks

<nav>
<a href="https://google.com">Google</a>
<a href="https://www.yahoo.com">Yahoo!</a>
<a href="https://www.bing.com">Bing</a>
<a href="https://blog.theprodevelopers.com">The Pro Developer</a>
</nav>

Use list items when needed

If the content represents a list of items, use a list item to show this and enhance the user experience. Note the role="navigation", more on this below.

<nav role="navigation">
<ul>
<li><a href="https://google.com">Google</a></li>
<li><a href="https://www.yahoo.com">Yahoo!</a></li>
<li><a href="https://www.bing.com">Bing</a></li>
<li><a href="https://blog.theprodevelopers.com">The Pro Developer</a></li>
</ul>
</nav>

Avoid unnecessary usage

<footer> elements may have a list of links to other parts of the site (FAQ, T&C, etc.). The footer element alone is sufficient in this case, you don't need to further wrap your links with a <nav> element in the <footer>.

<!-- the <nav> is not required in the <footer> -->
<footer>
<nav>
<a href="#">...</a>
</nav>
</footer>
<!-- The footer alone is sufficient -->
<footer>
<a href="#">...</a>
</footer>

Avoid unnecessary usage

When the main content of the page (excluding headers, footers, navigation bars, etc.) is simply one group of elements. You can omit the <article> in favour of the <main> element.

<article>
<p>This doesn't make sense, this article has no real `context`.</p>
</article>

Instead, replace the article with a <main> element to indicate this is the main content for this page

<main>
<p>I'm the main content, I don't need to belong to an article.</p>
</main>

If you use another element, ensure you specify the <main> ARIA role for correct interpretation and rendering across multiple devices and non HTML5 browsers

<section role="main">
<p>This section is the main content of this page.</p>
</section>

Header Element

The <header> element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A <header> typically contains a group of introductory or navigational aids.

note:-Note: The header element is not sectioning content; it doesn’t introduce a new section.

Examples:

<header>
<p>Welcome to...</p>
<h1>Voidwars!</h1>
</header>

In this example, the <article> has a <header>.

<article>
<header>
<h1>Flexbox: The definitive guide</h1>
</header>
<p>The guide about Flexbox was supposed to be here, but it turned out Wes wasn’t a Flexbox expert either.</p>
</article>

Header Element

The <footer> element contains the footer part of the page.

Here is an example for <footer> element that contain p paragraph tag

<footer>
<p>All rights reserved</p>
</footer>

Section Element

The <section> element represents a generic section to thematically group content. Every section, typically, should be able to be identified with a heading element as a child of the section.

  • You can use the <section> element within an <article> and vice-versa
  • Every section should have a theme (a heading element identifying this region)
  • Don't use the <section> element as a general styling 'container'.
    If you need a container to apply styling, use a <div> instead.

In the following example, we're displaying a single blog post with multiple chapters each chapter is a section (a set of thematically grouped content, which can be identified by the heading elements in each section).

<article>
<header>
<h2>Blog Post</h2>
</header>
<p>An introduction for the post.</p>
<section>
<h3>Chapter 1</h3>
<p>...</p>
</section>
<section>
<h3>Chapter 2</h3>
<p>...</p>
</section>
<section>
<h3>Comments</h3> ...
</section>

 

Note: Developers should use the article element when it makes sense to syndicate the contents of the element.

 

TAGS:






POST COMMENTS
No Comment

Please login to post comment




POPULAR POSTS

best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
How to host a web page in 10 minutes....
CSS3 RESPONSIVE UI...
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...


RECENT COMMENTS

2022-03-05 11:05
By coder on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke on do you want to make money online?
2021-10-12 12:34
By abnongoke on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed on best free web hosting services
2021-10-12 12:34
By amos tanui on free website ssl security using cloudflare


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© www.prodevskill.com 2023. All Rights Reserved. Powered by Pro Developer