Headings Example with ARIA labeled Page Regions

My Hobbies

These all are activities I love to do on a regular basis.

Physical Activities

Playing Soccer

Soccer is a team sport played between two teams of eleven players with a spherical ball.

Dancing

Dance is a performing art form consisting of purposefully selected sequences of human movement.

Relaxing Activities

Watching Movies

A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon.

Code

<div aria-label="Header" id="header">
  <p>
    John Doe's Web Presence
  </p>
</div>
<div aria-label="Navigation" id="nav">
  <ul>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Hobbies</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Etc.</a>
    </li>
  </ul>
</div>
<div aria-label="Main" id="main">
  <h1>
    My Hobbies
  </h1>
  <p>
    These all are activities I love to do on a regular basis.
  </p>
  <h2>
    Physical Activities
  </h2>
  <h3>
    Playing Soccer
  </h3>
  <p>
    Soccer is a team sport played between two teams of eleven players with a spherical ball.
  </p>
  <h3>
    Dancing
  </h3>
  <p>
    Dance is a performing art form consisting of purposefully selected sequences of human movement.
  </p>
  <h2>
    Relaxing Activities
  </h2>
  <h3>
    Watching Movies
  </h3>
  <p>
    A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon.
  </p>
</div>
<div aria-label="Footer" id="footer">
  <p>
    Copyright 2057 John Doe
  </p>
</div>
.visually-hidden {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

body {
  margin: 0;
}

#header {
  background-color: lightpink;
  overflow: hidden;
  border-bottom: 1px solid black;
  padding-left: 20px;
  padding-right: 20px;
}

#nav {
  background-color: lightgreen;
  float: left;
  width: 200px;
}

#main {
  margin-left: 200px;
  overflow: hidden;
  border-left: 1px solid black;
  padding-left: 20px;
  padding-right: 20px;
}

#footer {
  background-color: lightsteelblue;
  overflow: hidden;
  padding-left: 20px;
  padding-right: 20px;
  border-top: 1px solid black;
}
NIL