Search code examples
htmlsemantic-markup

Should i use <header> or <main> for first page critical content?

I'm making a website using HTML5 and don't know which semantic element to use for the first page content the user sees first (full viewport height and width). I've read that the <header> element should be used for introductory stuff like website title and navigation. I don't even have that in my site, instead I have something like this, basically the first part of the website where you can see what it is about and links to some contact stuff.

It is a single page site, but if I had more pages, they would not have that content and I would probably make a navbar and put it in a <header>. With <main> I'd like to cover more stuff than only this. Maybe an even different element? I don't know, it's like the combination of a <header>, a <section> and a <main>.

What do you think would be best?

Edit: This is not the entire page I have shown on the image. It is just the part that shows up first when you open the website, there is also content under it. I wanted to know what element to wrap over the thing in the image.

Here is the code (deleted classes and changed text to dummy text):

<header>
    
    <address>
        <a href="tel:+48123456789">123 456 789</a>
    </address>

    <div>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nibh nibh, egestas eget justo maximus, consectetur ultricies ante. Quisque facilisis pellentesque sagittis. Donec iaculis tellus nisl, vitae sodales ipsum ornare id. Suspendisse potenti. Curabitur eu ornare quam. Fusce laoreet vitae quam at ornare. Etiam quis malesuada magna.</p>
        <a href="#contact">Button</a>
    </div>

</header>

Is this OK?

(the phone icon on the bottom right has position: fixed and is outside the header)

Solution

  • This is honestly a matter of opinion.

    Personally I wouldn't bother at all with sectional elements on such a small site, since it really just adds noise. It won't be helping, say, a blind person or a search engine crawler to understand better, because there's just not that much to understand.

    However I admire your effort. I would put "heading" in header, the phone stuff in "footer" (even though it's at the top) and the rest in main.

    Edit: Considering that this is just the top of your page, I believe considering it the header is reasonable. The code you posted is certainly valid html.