Creating a Table of Contents with H3 Headers on Medium
What are H3 Headers, why are they important, and how do I use them to improve my audience experience on Medium
H3 Headers on Medium caused a big headache for me last week.
How are we supposed to write them anyway? Bold face ? Large Font? Italicized?
When I attempted to create a Table of Contents using this short cut last week, none of the “headers” in the story generated.
They were all large font, separated by appropriate spacing and bold face.
What went wrong and how is this affecting other authors ability to optimize their stories for sharing?
Here is a T.O.C for this story, in case you don’t want to read through it’s entirety. If you do…please proceed.
Table of Contents
- Why Headers are Important
- The Power of Sharing Digestible Content with H3 Headers
- How to Test if you have H3 Headers
- How do I fix my headers?
Why Headers are Important
Headers are a lot like Nesting dolls. The biggest one, H1, is the Title of your story while the smallest one, H6, is a title inside a title inside a title… (etc).
Every single header in between your largest and smallest, form important roles in structuring your story.
For this post, I focus on H3 headers, the “chapters” of your story.
H3 headers play a crucial role in a reader’s experience and ability to share your story with other social platforms through hyperlinks.
Did you know 80% of the people reading your article do not read through the entire article?
This makes the case for hyperlinking with a Table of Contents even stronger. The world is full of skim readers.
The Power of Sharing Digestible Content with H3 Headers
Generating a table of contents is important for social sharing through platforms like Twitter, Facebook and LinkedIn because it breaks down a piece of pillar content into micro-content.
Here’s an example.
I write a story tailored for dog owners titled, “Which Dog is your Spirit Animal?” highlighting the following breeds: Dachshunds, German Shepherds and Golden Retrievers.
Generating a table of contents allows special interest groups to link to a particular section of my post that highlights the breed that is “their spirit animal”.
This might be relevant to:
- A non-profit organizations like German Shepherd Safe Haven
- A special interest group like Dachshunds are Awesome
- Animal owners with a favorite dog breed (like this random woman I found on Facebook )
These “digestible pieces” of content are shared through the organized linking of H3 headers that allow special interest groups to share the specific content that caters to their audience.
How to Test if you have H3 Headers
You might think you have headers but do you know for sure? A quick way to test if you have headers is to generate a Table of Contents. Use this tool to check by copy/pasting your article url.
This simple T.O.C generator is easy to use and allows you to organize your articles in a more digestible fashion.
Here is a successful test from a post with proper H3 headings. Notice that each H3 Heading is hyperlinked to a specific section of the overall story.
Here is a failed test from a story with improper H3 headings.
To test an article while it is in draft, use the “Share draft link” button under the three dots at the top of your draft.
How do I fix my headers?
Use large font and the text will usually format as an H3 header. Italicizing or bold facing your header in combination with the use of large font causes issues. Don’t get fancy.
If you used large font without any alterations and are still unable to generate a Table of Contents, try inspecting the Elements.
- Highlight the header in question
- Right click and hit “Inspect” or “Inspect Elements”
- View the HTML code on the side of your browser to check your formatting. Make sure you are looking under “Elements”. See below highlighted in blue.
The way I troubleshoot H3 headers is to compare the HTML between a working H3 Header (copy paste the html to a note card) and a non-working one. I am NOT a developer and keep changes minimal.
Once you’ve identified the issue, double click, make your edits and make sure your work is saved.
Hopefully this article will help a few Medium authors in their journey to share their stories in more digestible pieces. Comment below if you have questions and please share.
Other great resources related to headers: How Header Text Impacts SEO by The Manifest and How to Create the Perfect H1 Tag for SEO on the Neil Patel blog
