"UX Design Patterns (2018 Version)" was retired on March 8, 2022. You are now viewing the recommended replacement.

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 Dean Conway
Dean Conway
3,301 Points

Heading Tags

Hi All,

I wanted to ask about heading tags not the <header> tag I mean h1,h2,h3 etc.

I am in the middle of designing my first portfolio website, I have my content all drafted up, but I am unsure what to determine as my H1 my h2 h3 etc.

I guess it would be easier if I only had 1 sentence headings that gradually got smaller as you went down the page then it would be just a case of going in and saying that massive heading in your hero area that will be the H1 and then that tiny heading in your footer at the bottom that would be my h6.

But my content headings do not necessarily get gradually smaller in a logical top to bottom fashion as you go down the page. To paint a better picture of how my content does flow down the page, please see below.

In my big hero area, I have a big photo of me with the following content overlayed on top of the image set out like this.

Dean Conway WEB DESIGNER

^ Should both of these be inside my H1 even though presentationally the word web designer will appear much bigger on the front cover than my name?

Followed by the tagline directly underneath the word web designer: "Specialised in Branding and UX design"

^ Would this be considered a h2 heading or should it be wrapped in a standard paragraph?

.....

This is then followed by a portfolio section directly underneath with the content

my favourite FEATURED PROJECTS thumbnail image thumbnail image ... ...

Its worth pointing out at this stage, that the style of the headings above is a consistent theme running througout the website, with a smaller heading on top followed by a larger heading underneath, much like this website does it: www.push10.com

....

Then I have an about me section

A little more ABOUT ME

<p>...</p> <p>...</p>

Which would act as a shortcut window into a seperate about me page link.

Then I finish off this and all other pages with the final of the double headed sections

get in touch CONTACT ME

What Im saying is even though each heading comes as a pair with a little heading sitting on top of a big heading for each of my sections, I'm unsure if these should be marked up as my h3 and h4s or should they both be wrapped inside of a h3 tag?

Thanks for reading.

Dean

8 Answers

Martin Pennock
Martin Pennock
3,651 Points

Don't worry about the size of the heading elements, those are just default stylings put there by the browser. What heading you use should correspond to the hierarchy of your HTML document. Your h1 should be your top level heading, likely the title of your page. Use an h2 to title a subsection within that page. Then if there is a subsection within THAT section, use an h3 element to title it. Again, this conveys the hierarchy of your page content.

Don't use heading tags for subheadings or taglines. Use a paragraph element instead. So if your name is the main heading or title of the overall page, that would be your h1. All other subheadings or taglines within that section would use a paragraph element because they are not starting a new section in your document.

Your featured projects section would use an h2 because it is a subsection of the main page. Then, if you listed each project within that section you would use an h3.

Again, your about me section would have an h2 heading because it is a subsection of the main page. Any new sections within that would have an h3 heading.

Same with your contact section, its a subsection of the main page, so it would have an h2 tag.

I'm not really sure what you mean by "double headed sections". If you mean that you want one part of your heading to be larger or styled differently than another part, it's still only one heading so it would all be within the same heading tag. To style one section differently, you could wrap one part in a set of span elements to change the CSS for that part of the heading.

Again, the choice of which heading tag to use has nothing to do with the size or style of the heading. You do all that with CSS later. The heading tags reflect the hierarchy of your page, or the importance of each section within it.

Dean Conway
Dean Conway
3,301 Points

Hi Martin

So for my name and job title could I do this?

        <!--START OF THE INTRO SECTION-->
        <section id="intro">

            <h1 title="Dean Conway - Web Designer">
                <span class="name">Dean Conway</span>
                <span class="job-title">Web Designer</span>
            </h1>

            <p class="slogan">Specialized in User Experience & Branding</p>
            <a href="work.html" title="View my work" class="btn btn-lg btn-primary">View my work</a>

        </section>
        <!--END OF THE INTRO SECTION-->

       <!--THIS IS HOW I HAVE ADJUSTED MY OTHER REMAINING HEADINGS BASED ON YOUR RECOMMENDATIONS - IS THIS CORRECT? -->

       <h2 title="Featured Projects"><span class="small">My Favourite</span>Featured Projects</h2>
       <h2 title="About Me"><span class="small">A Little Info</span>About Me</h2>
       <h2 title="Get in Touch"><span class="small">Go Ahead</span>Get In Touch</h2>

      <!--END COMMENT -->

I have seen someone else add the 'title' element inside the h1, but not entirely sure what this means? Is this necessary?

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,862 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,862 Points

Hey Dean,

I'm far from being a designer, but there really is no set rule as to what you use. Ideally, you should only have one <h1> on each page (this has to do with search engines and SEO). Also, you don't need to use each header tag. Often, I see an <h1> and and few <h2>s and occasionally an <h3>, but that's about it. Headings are just that... Headings. So you're main heading of the page... <h1>. If you have sub-headings... <h2>, and that's as far as most sites I've seen have gone.

Hopefully, someone with more "design" experience can give you a more detailed answer, but I hope this helps a bit. :) :dizzy:

Dean Conway
Dean Conway
3,301 Points
Dean Conway
Dean Conway
3,301 Points

Hi Jason

Ok thanks for your insight, appreciate that man, but I would like to see how your answer would translate into my content to get a better understanding.

Dean Conway
Dean Conway
3,301 Points
Dean Conway
Dean Conway
3,301 Points

Hi Martin,

Thank you so much for your response, the way you worded it really helped to get a better understanding of how heading tags should be used.

Great Explanation!

Dean

Martin Pennock
Martin Pennock
3,651 Points
Martin Pennock
Martin Pennock
3,651 Points

Hi Dean, no problem. Sorry for the late reply but to answer your questions about your code:

It looks good. I'm assuming you just haven't added in the content that goes under your <h2> headings yet.

As for the title attribute in your heading elements, they are completely unnecessary. In my experience, you would add a title attribute to show some additional information about a link or image. Usually, these would show up as a "tooltip" in your browser when the element is hovered over.

So for a heading element, there is no point in adding any additional info, because it's pretty self explanatory.

More about the title attribute here.

Dean Conway
Dean Conway
3,301 Points
Dean Conway
Dean Conway
3,301 Points

Hi Martin

Ok understood, here is the completed full page html code for the home page, if you don't mind could you just give it a once over, if you notice any other dodgy code that should not be in there or you think could be more semantic could you call it out? but I've amended to the best of my current knowledge and from everything that you have taught me in this thread about heading hierarchy.

<!doctype html>
<html class="no-js" lang="">

<head>

   <!--This HTML file started out as a copy of the html5 boilerplate-->
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title></title>

    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>

    <!--START OF HEADER SECTION-->
    <header>

        <!--LOGO PLACEMENT-->
        <a href="index.html">
            <img src="img/logo.png" alt="logo">
        </a>
        <!--END OF LOGO PLACEMENT-->

        <!--NAVIGATION LINKS-->
        <nav>
            <ul>
                <li><a href="work.html">WORK</a></li>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="contact.html">CONTACT</a></li>
                <li><a href="">DOWNLOAD RESUME</a></li>
            </ul>
        </nav>
        <!--END OF NAVIGATION LINKS-->

    </header>
    <!--END OF HEADER SECTION-->


    <!--START OF MAIN-->
    <main>

        <!--START OF THE STAGE SECTION-->
        <section id="intro">
            <h1>
                <span class="small-title">Joe Blogs</span>
                <span class="job-title">Web Designer</span>
            </h1>
            <p class="slogan">Specialized in User Experience & Branding</p>
            <a href="work.html" title="View my work" class="btn btn-lg btn-primary">View my work</a>
        </section>
        <!--END OF THE STAGE SECTION-->

        <!--START OF PROJECTS SECTION-->
        <section id="portfolio">
            <hr>
            <h2><span class="small">My Favourite</span>Featured Projects</h2>
            <a href="jetpack.html"><img src="img/jetpack.png" alt="jetpack"></a>
            <a href="tylers-tickets.html"><img src="img/tylers-tickets.png" alt="tylers-tickets"></a>
            <a href="amelias-adventures.html"><img src="img/amelias-adventures.png" alt="amelias-adventures"></a>
            <a href="soni-consultants.html"><img src="img/soni-consultants.png" alt="soni-consultants"></a>
            <a href="work.html" title="View all my work" class="btn btn-lg btn-primary">View all my work</a>
        </section>
        <!--END OF PROJECTS SECTION-->

        <!--START OF ABOUT SECTION-->
        <section id="about">
            <hr>
            <h2><span class="small">A Little Info</span>About Me</h2>
            <img src="img/avatar.png" alt="avatar">
            <p class="lead">Hi, I'm Joe Blogs, A passionate Web Designer with a focus on UX and Brand creation. My focus is on delivering websites designs that look great across all devices, that visitors enjoy using, and which deliver the results clients want</p>
            <a href="about.html" title="More about me" class="btn btn-lg btn-primary">More about me</a>
        </section>
        <!--END OF ABOUT SECTION-->

        <!--START OF CONTACT SECTION-->
        <section id="contact">
            <hr>
            <h2><span class="small">Go Ahead</span>Get In Touch</h2>
            <p>I'm currently seeking a full time position for a digital design agency, if you feel I would be a good fit for your team, I would love to hear from you</p>
            <a href="mailto:joeblogsxxx@xxx.com" title="Contact" class="btn btn-lg btn-primary">Contact Me</a>
        </section>
        <!--END OF CONTACT SECTION-->

    </main>
    <!--END OF MAIN-->

    <!--START OF FOOTER-->
    <footer>
        <a href="http://www.facebook.com" target="_blank">Facebook<i class="fa fa-facebook"></i></a>
        <a href="http://www.twitter.com" target="_blank">Twitter<i class="fa fa-twitter"></i></a>
        <a href="#">Download CV<i class="fa fa-resume"></i></a>
        <a href="https://www.behance.net" target="_blank">Behance<i class="fa fa-behance"></i></a> 
        <a href="https://www.linkedin.com" target="_blank">LinkedIn<i class="fa fa-linkedin"></i></a>
        <p>&copy; 2016 Joe Blogs. All rights reserved.</p>
    </footer>
    <!--END OF FOOTER-->
</body>

</html>

Dean

Martin Pennock
Martin Pennock
3,651 Points
Martin Pennock
Martin Pennock
3,651 Points

Hi Dean,

The document structure, use of elements and heading hierarchy all look semantically correct to me. Nicely done!

A few minor errors I found: Your <html> tag has the language attribute set to nothing. You can set it to english like this: <html lang="en">. You have a title element in your head section but you forgot to put your title between the tags. You have a meta description in your head section, but the content attribute is left blank. You should use this to provide a short description of your site, which is often used by search engines. More on that here.

One tool for spotting these kind of errors I found helpful when starting out is the w3c validator. You can use a live link to your site or upload your html code to it and it will analyze it for errors based on w3c standards.

Also, the Mozilla Developer Network is an amazing resource for looking up info on html elements and attributes. They also have extensive documentation on CSS and JavaScript.

Cheers!

Dean Conway
Dean Conway
3,301 Points
Dean Conway
Dean Conway
3,301 Points

Ok cool, thanks for pointing those out Martin, I will take those suggestion and update in my my next revision of the code.

Would you mind if I posted up my other 4 pages for you to review? I don't want to think I'm taking the pi** here but your wisdom is golden and I'm learning so much much from your feedback.

This would be more to do with my use of my macro tags so things like my use of section vs div tags.