Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by John Levy
John Levy
1,451 Points

Can you use more than 7 headers?

I am trying to use more than 7 <h>. Is this possible as right now the most I can do is 6? Thanks

John Levy
John Levy
1,451 Points

I just realized the maximum amount if <h> is 6. If I want to do more than this what is the best way to do this? Thanks

7 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi! I feel like you might be misunderstanding what the numbers mean. <h1> is a top priority heading. The number denotes the importance not anything else. In fact, you can have multiple h1 headings or multiple of any headings on any page.

Here's a link to the MDN documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

Hope this helps! :sparkles:

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for your reply. Right now I can go up to <h6> but if I try <h7> it dopes not work. Is that usual? Thanks

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Yes. Again, the number denotes the importance of the heading. Not the position or amount. For example this is perfectly valid:

<h1>Important</h1>
<h2>Less important #1</h2>
<h1>Important #2</h1>
<h2>Less important #2</h2>
<h3>Even less important #1</h3>
<h3>Even less important #2</h3>
<h3>Even less important #3</h3>

These continue downwards in terms of importance starting at 1 as most important down to 6 as least important. There is no h7 in HTML (at least not currently).

Hope this helps! :sparkles:

Matthew Francis
Matthew Francis
6,967 Points
Matthew Francis
Matthew Francis
6,967 Points

<h1> represents the biggest font heading, <h6> represents the smallest font heading.

Example:

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_headers

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for your response . My problem is I want 7 different headers so if I repeat <h3> twice the same text in <h3> will appear twice. What is the best way to get around this? Thanks

Matthew Francis
Matthew Francis
6,967 Points

The numbers in the header is not the maximum amount of how many headers you can have. It indicates how big you want your header to be. From 1 being the biggest, 6 being the smallest. Check the w3 link I posted, if you add another header, it will still work (eg; <h1> HELLO WORLD </h1>)

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

You just need to change your text in between the h3 like this:

<h3>Item One</h3>
<h3>Item Two</h3>
<h3>Item Three</h3>

Give it a try :smiley:

Alternatively, you can review the documentation previously linked or my first example :sparkles:

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks both of your for your help. I figured out how to do <h6>-<h8> but now h7 and h8 are on the same line not on separate lines. I attached my code below. What am I doing wrong? http://codepen.io/Johned22/pen/vKzAyd

Mark Casavantes
PLUS
Mark Casavantes
Courses Plus Student 13,401 Points
Mark Casavantes
Mark Casavantes
Courses Plus Student 13,401 Points

Are you trying to have 7 different sized text items? Consider using CSS. You could set the sizes for <h1> to <h6> and also use <p>. That would give you 7 items to size which is your goal. h1 { font-size: 250%; }

h2 { font-size: 200%; } etc... p { font-size: 100%; }

You could also use an inline CSS style like this. <h1 style="color:blue;margin-left:70px;">This is a heading.</h1> <h1 style="color:blue;margin-left:60px;">This is a heading.</h1> <h2 style="color:blue;margin-left:50px;">This is a heading.</h2> <h2 style="color:blue;margin-left:40px;">This is a heading.</h2> <h3 style="color:blue;margin-left:30px;">This is a heading.</h2> <h3 style="color:blue;margin-left:20px;">This is a heading.</h2> etc...

John Nixon
John Nixon
17,690 Points
John Nixon
John Nixon
17,690 Points

There is no such thing as an <h7>, <h8> etc. The highest it goes is <h6>. The numbers represent importance no necessarily size even though they are usually styled that way. So for example, if you have a web page named blog, with several articles, and sub articles it would be something like this on the page <h1>Blog (page title)</h1> -<h2>Article 1</h2> --<h3>Article 1 Sub Article 1</h3> --<h3>Article 1 Sub Article 2</h3> --<h2>Article 2</h2>

Its rare you would ever make it to an <h6> if correctly using the headings, sounds more like you need classes on your headings like

<h2 class="big-heading"></h2> <h2 class="small-heading"></h2>

http://www.w3schools.com/tags/tag_hn.asp