CODEWITHSUNDEEP
htmlsemanticshtml-heading
Haroon Ramay
Haroon Ramay

Reputation: 95

HTML5 Headings not acting as they should

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)

Upvotes: 1

Views: 70

Answers (1)

Carcigenicate
Carcigenicate

Reputation: 45736

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".

Upvotes: 4

Related Questions