<!--
PROPER HEADING SEQUENCING
The following provides an overview and explanation of how/why to nest headings correctly in HTML.
-->
<!-- Headings define the structure of our content for search engines and accessibility tools. The following example has headings with short snippets of content to help illustrate the different heading levels and how we may move between them. --->
<h1>Kittens</h1> <!-- We should only ever have one 'first-level' heading; this defines a title for the content -->
<p>They are fuzzy and cuddly and cute. <strong>Take a look at the HTML code for this page to see the comments that explain the heading structure.</strong></p>
<h2>Pawsitive aspects of getting a kitten</h2> <!-- Our 'second-level' headings define subtitles for content that falls under our 'first-level' heading. In this case, 'Pawsitive aspects of getting a kitten' is a subtitle for content related to our 'first-level' heading of 'Kittens' -->
<p>A couple of good reasons for getting a kitten (if you are interested)...</p>
<h3>They are neat animals</h3> <!-- A 'third-level' heading exists as a subtitle of our 'second-level' heading. This means that 'They are neat animals' is a subtitle for content under 'Pawsitive aspects of getting a kitten' -->
<p>Kittens tend to be fairly clean and neat animals, they don't tend to make as big of a mess as other animals do.</p>
<h3>They are fuzzy!</h3> <!-- We can have the same heading level appear one after another. In this case 'They are fuzzy!' is a subtitle for content under 'Pawsitive aspects of getting a kitten' -->
<p>Who doesn't love petting a lovable bundle of fur! Soooo relaxing!</p>
<h2>Negative aspects of getting a kitten</h2> <!-- Here we have stepped 'back' to a 'second-level' heading, as we are done with content related to 'Pawsitive aspects of getting a kitten' and now moving onto another section of content -->
<p>Some of the bad things that happen from getting a kitten...</p>
<h3>Kittens are like ninjas</h3>
<p>You may not know when a kitten will appear and pounce on you. This may sometimes be okay but occassionally this can cause serious injury.</p>
<h3>Kittens claw at everything</h3>
<p>You may not have a sofa after you welcome a new kitten home.</p>
<h4>Things your kitten will destroy</h4>
<ul>
<li>Your sofa</li>
<li>Your bed</li>
<li>Your stuffies</li>
</ul>
<h2>Kitten facts</h2> <!-- Here we have stepped 'back' to a 'second-level' heading again, as we are done with content related to 'Negative aspects of getting a kitten' and now moving onto another section of content -->
<ul>
<li>Kittens grow up into cats</li>
<li>Kittens have claws</li>
<li>Kittens like jumping and running</li>
</ul>
xxxxxxxxxx
/* Some styling specifically for these additional explanations */
body {
margin: 0 auto;
max-width: 40rem;
font-family: sans-serif;
}
h2 {
margin-top: 4rem;
}
h3, h4 {
margin-top: 2rem;
}
ul {
margin-left: 0;
padding-left: 1rem;
}
ul+p {
margin-top: 2rem;
}
li {
margin-bottom: 0.5rem;
}
.further-reading {
margin-top: 4rem;
padding-bottom: 2rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.