1

So I started writing HTML code for a school assignment. I wanted to use HTML5 semantics such as <section>, <article> and so on. But I encountered something peculiar about heading sizes when placed in these tags (see below). I then proceeded to change the semantics back to only HTML that being only <div> and the headings worked fine. I'll post some screen shots to help clarify the situation.

First the Code with <div> tags only 

<!DOCTYPE html>
<html>
<head>
    <title>
        Curriculum Vitae
    </title>
</head>
<body>
<div>
    <h1>Curriculum Vitae</h1>
</div>
<div>
    <h2>Personal Information</h2>
    <ul>
        <ol><strong>Name: </strong>Haroon Rasheed Ramay</ol>
    </ul>
</div>
</body>
</html>

The heading sizes appear to work properly within in the div tags

Next is the code using HTML5 semantics

<!DOCTYPE html>
<html>
<header>
    <title>
        Curriculum Vitae
    </title>
</header>
<body>
<article>
    <section>
        <h1>Curriculum Vitae</h1>
    </section>
    <section>
        <h2>Personal Information</h2>
        <ul>
            <ol><strong>Name: </strong>Haroon Rasheed Ramay</ol>
        </ul>
    </section>
</article>
</body>
</html>

Note here in this picture I have used the same heading tags for Curriculum Vitae and Personal Information but the heading sizes seemed to have switched?!

Could someone else please verify whether this appears to be a problem only with me or am I using HTML5 semantic tags in a completely wrong manner which is causing the peculiar behavior of the headings?

P.S. Any links for HTML documentation or tutorials would be awesome (currently I'm learning the course online on udacity & w33schools and in school as a subject)

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Haroon Ramay
  • 95
  • 9

1 Answers1

4

You're mixing up head and header tags. They are very different.

Every HTML page must have a head tag (although browsers usually insert one if it's missing).

The header tag is used as a heading for the content of the page, as a title or something similar. It's optional and will be inside the body tag; potentially before a article, or some other "main content tag".

Carcigenicate
  • 43,494
  • 9
  • 68
  • 117
  • Thanks for the clarification on the
    and didn't realize I was doing that. However, it still doesn't change the peculiar behavior of the heading tag back to the way it should.
     – Haroon Ramay Oct 19 '16 at 18:21
  • @HaroonRamay take a look at this answer, it seems to be the browser setting it's own style http://stackoverflow.com/a/22898717/3711733 – mguida Oct 19 '16 at 19:07
  • @mguida Aye it seems to be the case you linked. Now I feel extremely stupid for not properly searching before posting. Though there are still a few kinks I want to straighten out that I still haven't completely gotten, I'll hit the documentation (http://w3c.github.io/html/rendering.html#sections-and-headings) provided by Benio in your link to fully understand whats going on. Thanks once again. – Haroon Ramay Oct 19 '16 at 19:43