Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript Basics (Retired) Storing and Tracking Information with Variables The Variable Challenge Solution

Graham Shure
Graham Shure
3,295 Points

Question about <h2> and </h2>

I didn't use '<h2>' and '</h2>' in my code. Instead I just concatenated the strings as they would appear in the completed story. What is the benefit of using " <h1> " and "</h2>"? is this just to keep the programmer organized? Also, what are these called?

3 Answers

Alex Koumparos
seal-mask
.a{fill-rule:evenodd;}techdegree
Alex Koumparos
Python Development Techdegree Student 36,861 Points

Hi Graham,

Modern HTML is a language that describes the semantics of a document. As such, HTML elements are used to describe the substance, not the appearance, of the document.

One set of elements are the 'Section Heading' elements, <h1> to <h6>. These are numbered because they describe a hierarchy inside the document.

Let's look at the example from MDN:

<h1>Beetles</h1>
    <h2>External morphology</h2>
        <h3>Head</h3>
            <h4>Mouthparts</h4>
        <h3>Thorax</h3>
            <h4>Prothorax</h4>
            <h4>Pterothorax</h4>

Observe that the thing described in <h2>, 'External morphology', is subordinate to the thing in <h1>. In turn, the things in <h3> are subordinate to the things in <h2> (and peers to each other).

While it might coincidentally keep the document author organized, the elements are used to describe properties that are already existing in the object. In the above example, we see that 'Prothorax' and 'Pterothorax' are constituent parts of the thorax. This relationship is being described, not created, by the HTML markup.

By convention, web browsers display different heading sizes differently (for example, <h1> is usually shown bigger and/or bolder than headings lower in the hierarchy, such as <h4>), but we should understand that this is convention. It is the job of CSS to dictate how different elements should be displayed. HTML's job is to describe the semantics of the page, not just for human eyeballs, but also for assistive devices (for example, screen readers, which can modify their behaviour based on the page's semantics, without regard for how the page appears) or search engines (that can understand that an item with an <h2> tag is conceptually the parent of the <h3> tags inside it), and so on.

Note that this strict separation of semantics (HTML) and appearance (CSS) is relatively recent (coinciding with CSS becoming usable) and so you'll often see, especially from us older folks, web content that blurs this distinction. You'll also see that as both HTML and CSS evolve, more and more semantic elements get introduced into HTML (like <article>, <aside>, and <section> that were all introduced in HTML 5).

Hope that clears things up for you

Cheers

Alex

Julio Sanchez
Julio Sanchez
14,289 Points

Using HTML markup ( the <h1></h1>) allows you to add sizing and bolding to your text. h1 is the largest and h6 is the smallest. Using the mark up also helps Google understand what text is important in your file.

Hope this clears it up a bit.

tyler borg
tyler borg
9,424 Points

So why does it still work if you don't use <h1> or any "<h>" ?? why is he using it in the lesson if he hasn't explained anything about it?