CODEWITHSUNDEEP
html
Inigo
Inigo

Reputation: 8685

Should I use the address element in the header?

I can't find any definitive answer on this... please take a look at this fairly generic HTML page for example; Header with logo on the left, Company name and address on the right. I would like to know if it's appropriate to use the address element in this way?

<body>
<header>
    <img src="/logo.jpg" alt="Bobby's Bits">
    <address>
        <h1>Bobby's Bits</h1>
        14 Milkyway cresent,<br>
        The Moon
    </address>
</header>
<main>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae dignissimos doloremque iusto tempore quae quisquam dicta nobis. Vitae officiis sequi pariatur amet odit possimus, necessitatibus dolore consectetur quas at, alias.</p>
</main>
<footer>Lorem ipsum dolor sit.</footer>
</body>

Edit

The most semantic way to do this - I think - is to also combine the vCard as follows:

<body>
<header>
    <img src="/logo.jpg" alt="Bobby's Bits">
    <address class="vcard">
        <h1 class="fn org">Bobby's Bits</h1>
        <span class="adr">
            <span class="street-address">14 Milkyway cresent,</span>
            <span class="locality">Mare Serenitatis</span>,  
            <span class="postal-code">M00 N11</span>
        </span>
    </address>    
</header>
<main>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae dignissimos doloremque iusto tempore quae quisquam dicta nobis. Vitae officiis sequi pariatur amet odit possimus, necessitatibus dolore consectetur quas at, alias.</p>
</main>
<footer>Lorem ipsum dolor sit.</footer>
</body>

Not entirely sure if putting the h1 inside the vCard is 'allowed' but I can't see why not. If anyone wants to wade in with further advice please feel free. I wish there were more clearly defined guidelines on this.

Upvotes: 0

Views: 140

Answers (1)

Rhumborl
Rhumborl

Reputation: 16609

The W3 spec does not set any restrictions on which tags it can appear in, and in fact their example and typical usage is that it would appear in the <footer>. The <header> tag is in the same semantic category as <footer> so there is no reason why you cannot put it there.

There is however a restriction that it should not technically contain any "heading content", i.e. <h1>...<h6>, only describe the contact information. So you should not put the site name in <h1> tags inside the address element. You can still style that line in larger text tho.

Upvotes: 1

Related Questions