Question about <h2> and </h2>

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

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.

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?