Encyclopedia article
Use of headings in encyclopedia-style article
The way of kata
Kata is an exercise for muscle memory. It's not intended to fill your brain with information but train your fingers to react. The information is there to give you the why, but your fingers need to learn the how.
The material on this page is presented in a specific order — from least specific to highly technical. You will learn the most by jumping in as soon as you have some idea of what you should do. Once you're done, read the rest of the material and check your solution.
All katas are designed to be doable without using 3rd party libraries (and, in fact, the point is to also learn how to do what these libraries do).
To make the best of katas, observe the following rules.
- Don't rush.
- When stuck, take a break and do something unrelated.
- Do not copy/paste code. Always retype everything.
- Do not use AI tools to generate code.
- Try to do something that wasn't in the instructions, experiment.
- Repeat the kata from time to time, even if you think you've got it.
- You have mastered the kata once you are able to complete it without thinking too much.
Remember, the goal is not to get it done, but to get some practice.
Introduction
In this kata, you will mark up an encyclopedia-style article. This exercise is designed to help you sharpen your content analysis skills.
Skills you will acquire
- Text structure analysis
- Use of headers
- Linking to parts of the page
Materials
Objective
Create a complete unstyled HTML page that contains the following:
- Page title
- Table of contents with hierarchically presented links to headings
- Page content with appropriate headings
Check your solution
- Headings visually form the correct hierarchy
- HeadingsMap does not report any issues with the headings
- Table of content links all lead to the correct heading
- The correct fragment identifier appears in the address bar when ToC link is clicked
- Once the fragment is in the address bar, reloading the page causes the browser to jump to the correct heading when the page loads
- Passes the W3C markup validator
Tools
Keep in mind
Scan the text for what appears to be headings, and then determine the relationship between them. You will probably not be able to determine the exact placement of each heading unless you read the surrounding text.
Headings start when one of the <h1> through <h6> tags are encountered.
Headings with lower number are higher in the hierarchy. For example <h2>
(level 2) is higher level than <h4> (level 4).
A page can only have exactly one non-hidden heading level 1.
The content that follows a heading is the same level as the heading, including any headings that are of a lower level. For example:
<h2>Section 1</h2>
<p>This paragraph is part of the level 2 section.</p>
<h3>Section 1.1</h3>
<p>This paragraph is part of level 2 and level 3 sections.</p>
<!-- end of sections 1 and 1.1 -->
<h2>Section 2</h2>
<p>This paragraph is part of level 2 section.</p>The <main> tag is used to mark the main content of the page. This is the
content without which the page has no reason to exist.
The <nav> tag is used to mark content that represents links to various
parts of the site or the page. Normally, this tag contains a list marked
using the <ul> (unordered list) tag, and each item is a link. For example:
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section4">Section 4</a></li>
</ul>
</nav>The lists can be nested to build hierarchies:
<nav>
<ul>
<li>
<a href="#section1">Section 1</a>
<ul>
<li><a href="#section1-1">Section 1.1</a></li>
<li><a href="#section1-1">Section 1.2</a></li>
</ul>
</li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section4">Section 4</a></li>
</ul>
</nav>The <nav> tag is a sectioning element. This means that some browsers or
accessibility tools can use them as landmark elements and allow the user to jump
to them. In order to identify landmarks, the first heading within the section
can be used as a label. For example:
<nav>
<h2>Page contents</h2>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section4">Section 4</a></li>
</ul>
</nav>The fragment identifiers are pieces of text that look like #section1, and the
part after the hash sign # is an ID of an element on the page. For example,
the fragment mentioned in this paragraph points to an element with
id="section1" attribute.
When a link contains only a fragment identifier, it updates only the fragment identifier in the address bar. Once the fragment identifier is in the address bar, reloading the page will make the browser scroll automatically to the element pointed to by the fragment. (Fragments can be used to share a particular portion of the page with someone or bookmark it.)