Page with Only One h1 on Top of the Page
If a page contains only one h1 tag at the top of the page, it indicates that the page is focused on a single main topic or idea. The h1 tag is used to indicate the main heading or title of the page, so having only one h1 at the top of the page suggests that the page is organized around a central concept.
The content of the page may be structured using headings and subheadings to help users navigate and understand the page’s content. Depending on the purpose of the page, the h1 tag may be used to provide a brief summary or overview of the page’s content, or to highlight the most important information that the page presents.
My Hobbies
Header
John Doe’s Web Presence
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
<h1 class="visually-hidden">
My Hobbies
</h1>
<header>
<h2 class="visually-hidden">
Header
</h2>
<p>
John Doe's Web Presence
</p>
</header>
<nav>
<h2 class="visually-hidden">
Navigation
</h2>
<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>
</nav>
<main>
<h2>
My Hobbies
</h2>
<p>
These all are activities I love to do on a regular basis.
</p>
<h3>
Physical Activities
</h3>
<h4>
Playing Soccer
</h4>
<p>
Soccer is a team sport played between two teams of eleven players with a spherical ball.
</p>
<h4>
Dancing
</h4>
<p>
Dance is a performing art form consisting of purposefully selected sequences of human movement.
</p>
<h3>
Relaxing Activities
</h3>
<h4>
Watching Movies
</h4>
<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>
</main>
<footer>
<h2 class="visually-hidden">
Footer
</h2>
<p>
Copyright 2057 John Doe
</p>
</footer>
.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;
border-bottom: 1px solid black;
}
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