The <h4> element is used to create a smaller sub-heading beneath an <h3> heading. It helps you organise details, topics, or sections even further inside your webpage.
While <h3> adds a sub-topic under a section, <h4> allows you to break that information down even more clearly. Think of <h4> as a sub-topic under a sub-topic — useful when your content has multiple layers. You can use multiple <h4> headings on a page when you want to structure information in smaller, easier-to-read parts.
Understaning the layout of the <h4> Element
| Start tag | Element content | End tag |
|---|---|---|
| <h4> | Best Cities in Europe | </h4> |
📘 Example Code
Below is an HTML example showing headings from <h1> to <h4>:
💡 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 <h4> heading.
Try this example first:
<h4>Delicious Meals in Italy</h4>
What To Do
✅ Type the code above in the editor below
✅ Click Test Code to see the result
✅ Change the text and try new topics
✅ Try adding a <p> under your <h4> to describe your heading
Tip 💡
Use <h4> headings when you need to organise content inside smaller sections or highlight specific details.
They make your writing clear, structured, and professional — especially in long or detailed pages.
Keep practising — each heading level builds your understanding and improves your web-building skills! 🚀
