5
\$\begingroup\$

I have taken the following design from a tutorial done in 2006, and have decided to markup it up in HTML5. The design is as follows:

enlighten desings

My markup is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Enlighten Designs - About</title>
    <link rel="stylesheet" href="style.css">
</head>
<body id="about">
    <div id="page-wrapper">
        <nav id="site-nav" role="navigation">
            <h2 class="visually-hidden">Site Navigation</h2>
            <ul>
                <li id="about-nav"><a href="#">About</a></li>
                <li id="services-nav"><a href="#">Services</a></li>
                <li id="portfolio-nav"><a href="#">Portfolio</a></li>
                <li id="contact-nav"><a href="#">Contact Us</a></li>
            </ul>
        </nav>
        <header id="page-header" role="banner">
            <h1>Enlighten Designs</h1>
        </header>
        <main id="content" class="container" role="main">
            <div id="primary">
                <section>
                    <h2>About</h2>
                    <p><strong>Enlighten Designs</strong> is an internet solutions provider that specialises in front and back end development. To view some of the websites we have created view our <a href="#">portfolio</a>.</p>
                    <p>We are currently undergoing a &quot;face lift&quot;, so if you have any questions or would like more information about the sevices we provide please feel free to contact us.</p>
                </section>
                <section>
                    <h2>Contact Us</h2>
                    <address>
                        Phone: <span>(07) 853 6060</span><br>
                        Fax: <span>(07) 853 6060</span><br>
                        Email: <a href="mailto:[email protected]"><span>[email protected]</span></a><br>
                        P.O. Box: <span>14159, Hamilton, New Zealand</span>
                    </address>
                    <p><a href="#">More contact information</a>...</p>
                </section>
            </div><!-- end primary -->  
            <aside id="secondary" role="complementary">
                <h2>Featured Projects</h2>
                <h3>The New Zealand National Party</h3>
                <p>We recently launched the <a href="#" rel="external">New Zealand National Party</a> website - Lorem ipsem dolor sit amet. Pita ala pesama borak na falanuisen</p>
                <h3>Greensets</h3>
                <p>We recently launched the <a href="#" rel="external">Greensets</a> website - Lorem ipsem dolor sit amet. Pita ala pesama borak na falanuisen</p>
                <h3>Nutrition Care</h3>
                <p>We recently launched the <a href="#" rel="external">Nutrition Care</a> website - Lorem ipsem dolor sit amet. Pita ala pesama borak na falanuisen</p>
            </aside>
        </main>
        <footer id="page-footer" role="contentinfo">
            <div class="fl">
                <p>Copyright &copy; Enlighten Designs</p>
                <p>Powered by Enlighten Hosting and Vadmin 3.0 CMS</p>
            </div>
            <ul class="fr">
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Terms of Trade</a></li>
            </ul>
        </footer>
    </div>
</body>
</html>
\$\endgroup\$
2
  • \$\begingroup\$ I ran it through this validator and got the following results. "The document is valid HTML5 + ARIA + SVG 1.1 + MathML 2.0" I'd say that's a nice start. =) \$\endgroup\$ Commented Jan 6, 2015 at 15:10
  • \$\begingroup\$ Are you using those ids for css hooks? \$\endgroup\$ Commented Mar 8, 2015 at 0:22

1 Answer 1

Reset to default
1
\$\begingroup\$

If possible with your CSS, I’d put the header (with the site title) before the nav. It would produce a nicer document outline.

Your use of strong doesn’t seem to be appropriate. It must only be used for "strong importance, seriousness, or urgency". Use span (+ CSS) or maybe b instead.

If the sidebar with "featured projects" exists on every page of the site, you should not include it in the main element. But if it’s only on the homepage, it’s fine.

You could use URIs for the telephone and the fax number, too: tel URI scheme (see example below, but note that I did not verify that it’s the best/correct URI syntax for this kind of number).

Your use of br (in address) is not appropriate, because the line breaks don’t seem to be part of the content here. Instead, you should use a so-called "block level" element for each "line" so that even text-browser users can easily understand this content.
In your case, the dl element seems to be appropriate (while it was defined as definition list in HTML 4.01, its meaning in HTML5 was changed to description list):

<address>
  <dl>
    <dt>Phone:</dt> <dd><a href="tel:078536060">(07) 853 6060</a></dd>
    <dt>Fax:</dt> <dd><a href="tel:078536060">(07) 853 6060</a></dd>
    <dt>Email:</dt> <dd><a href="mailto:[email protected]">[email protected]</a></dd>
    <dt>P.O. Box:</dt> <dd>14159, Hamilton, New Zealand</dd>
  </dl>
</address>

You could use the small element for the copyright notice.

\$\endgroup\$

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.