The <h5> element is used to create a smaller sub-heading beneath an <h4>. It helps to break down information into more detailed sections, especially when content is very structured.
While <h4> introduces a deeper topic inside a section, <h5> can be used to give extra detail or highlight a specific point under that topic. Think of <h5> as a fine-detail heading — useful when explaining steps, features, or lists within a subsection. You can use multiple <h5> headings on a page when breaking content into smaller, clearer parts.
Understaning the layout of the <h5> Element
| Start tag | Element content | End tag |
|---|---|---|
| <h5> | Famous Landmarks | </h5> |
📘 Example Code
Below is an HTML example showing headings from <h1> down to <h5>:
💡 This is what the code looks like inside an editor
🖥️ What This Will Look Like in a Browser
✅ Example output you would see on a webpage:
🧪 Time to Practise!
Now it’s your turn to create your own <h5> heading.
Try this example first:
<h5>Beautiful Hidden Spots</h5>
What To Do
✅ Type the code above into the editor below
✅ Click Test Code to check your answer
✅ You can change the text and try different ideas
✅ Add a <p> under your <h5> to describe your sub-section
Tip 💡
Use <h5> when you need to organise detailed information inside a subsection.
It keeps your content structured and professional, especially on long pages and tutorials.
Keep practising — every heading level helps you think like a real web developer! 🚀
