Web Development - HTML Headings
HTML Headings
Headings are used to define titles and subtitles on a web page. They help both readers and search engines understand the structure of your content.
HTML includes six levels of headings, from <h1> (the most important) to <h6> (the least important).
HTML Heading Tags
Example
Six levels of headings:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
Try it Yourself »
Browsers automatically add space before and after each heading.
By default, <h1> is the largest and <h6> is the smallest.
Use Headings for Structure, Not Style
You should use headings to create a logical document structure, not just to make text larger or bold.
Think of headings as an outline:
Example
Structured page example:
<h1>My Website</h1>
<h2>About Me</h2>
<p>My name is John, and I love web development.</p>
<h3>Portfolio Website</h3>
<p>A website I built with HTML and CSS.</p>
<h3>JavaScript Quiz App</h3>
<p>An interactive app using JavaScript.</p>
Try it Yourself »
Tip: Use only one <h1> per page
- it represents the main topic or title.
Heading and SEO
Search engines (like Google) use headings to understand the content hierarchy of your page. Good heading structure improves accessibility and makes your content easier to navigate.
- <h1> - Page title
- <h2> - Section titles
- <h3> - Sub-sections
Example
SEO-friendly structure:
<h1>Healthy Recipes</h1>
<h2>Breakfast</h2>
<h3>Smoothies</h3>
<h2>Dinner</h2>
<h3>Pasta Dishes</h3>
Try it Yourself »
Summary
- HTML provides six levels of headings:
<h1>to<h6> <h1>is the most important heading,<h6>is the least- Use headings for page structure, not for styling text
- Headings help search engines and users navigate your content
Next, you'll learn about another fundamental element in HTML - paragraphs, which are used to display text on a page.
