patternhtmlMinor

Semantically correct html5 markup

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

semanticallyhtml5correctmarkup

Problem

I'm writing the markup for Corpora - A Business Theme:

And started from the header section:

Here is my markup for it:


    
        
            
        
        
            Phone: 1.800.corp
            Email: office@corpora.com
            Follow Us: 
        
     
    
        Homego to start
        Serviceswhat we do
        Galleryour best products
        Our Clientswhat we've done for others
        About Uswho we are
        Contact Uslet's keep in touch
    
    
        
            
            
            
                Awesome business card design
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Curabitur eget metus ac diam laoreet luctus rhoncus non nisi. Aenean at lobortis augue.
                Buy it now or Find Out More
                        
            
            
                Awesome business card design
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Curabitur eget metus ac diam laoreet luctus rhoncus non nisi. Aenean at lobortis augue.
                Buy it now or Find Out More 
                        
            
            
            
                Awesome business card design
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Curabitur eget metus ac diam laoreet luctus rhoncus non nisi. Aenean at lobortis augue.
                Buy it now or Find Out More

Does it semantically correct? Special attention for tags address, em, span, section.
Many thanks to you all.

Solution

address

I'd enclose the ul.primaryContacts in one address element (not every item separately):


  
    Phone: 1.800.corp
    Email: office@corpora.com
    Follow Us:

links without content

Your follow links don't contain any content: `



Screenreader users wouldn't be able to make sense of these links.

Either add the text to it (and visually hide it, and display the icons via CSS), or use

img here (together with the alt

 attribute, of course).

Same problem with the two slideButtons (

).



I don't think the

 element is correct in these cases:

1.800.corp

office@corpora.com




http://www.w3.org/TR/html5/text-level-semantics.html#the-em-element:

The

 element represents stress emphasis of its contents.

And, important:

The placement of stress emphasis changes the meaning of the sentence.

In your cases the

 doesn't change any meaning. You wouldn't stress the phone number or the email address while reading.
contact URIs

You could link your contact details:

1.800.corp (with the tel URI scheme)

office@corpora.com (with the mailto URI scheme)



You use

br in the navigation (Home
go to start

), but this is not a correct use:

 elements must be used only for line breaks that are actually part of the content, as in poems or addresses.

site heading

Your page should probably have a site heading. Currently your outline would be:

Untitled Section
Untitled Section
Awesome business card design
Awesome business card design
Awesome business card design



In your case, the logo (resp. the

alt

 value) is the site/page heading, so you'd have:


  
    
  


slider

It depends on content and context of your page if the slider should be part of

header or not. Is the slider present on all pages? Then it's probably correct to place it in the header. But if it would be part of the main content of a page, it shouldn't be in the header

.

I think you should enclose the whole slider in a

section (resp. aside

); if possible, find a heading for it. As soon as you use such a sectioning element for the slide, you can enclose the two slide buttons in a

nav element (as they are the main navigation for that sectioning element). Also, each slide could be an article (instead of a section

).

Then you'd get the following outline (together with the site heading mentionend before):

Corpora - A Business Theme
Untitled Section (this is your site nav)
Untitled Section (this is the slider heading)
Untitled Section (this is your slider nav)
Awesome business card design
Awesome business card design
Awesome business card design
`

Code Snippets

<address>
  <ul class="primaryContacts">
    <li>Phone: <em class="headerPhone">1.800.corp</em></li>
    <li>Email: <em class="headerEmail">office@corpora.com</em></li>
    <li>Follow Us: <a href="#" class="headerRSS"></a><a href="#" class="headerTwitter"></a><a href="#" class="headerFacebook"></a></li>
  </ul>
</address>

<h1>
  <a href="#" class="logo">
    <img src="images/logo.png" alt="Corpora - A Business Theme">
  </a>
</h1>

Context

StackExchange Code Review Q#22732, answer score: 8

Revisions (0)

No revisions yet.