2
\$\begingroup\$

For a project I need to replicate a website and I was wondering if any of you could take a quick look to see if I made any obvious mistakes. Right now it's just the HTML part, but I would like to make sure everything is correct in the HTML part before I move on to the CSS. Picture added below. Thanks in advance!

This is the site I need to replicate

<!DOCTYPE html>
<html lang="nl">
<head>
    <title> IKEA </title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/style.css" />
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
   <div id="wrapper">
        <header>
        <h1>Ikea</h1>
        <p>Welkom bij IKEA België! <a href="#">Log in</a> of <a href="#">maak een profiel aan</a></p>

        <p><a href="#"><img src="images/page1/small_anna.gif" alt="Vraag het aan Anna" /></a></p>
        <p>Vraag het aan Anna</p>

        <ul>
            <li><a href="#">NL</a></li>
            <li><a href="#">FR</a></li>
        </ul>

        <ul>
            <li><a href="#">Winkel informatie</a></li>
            <li><a href="#">IKEA FAMILY</a></li>
            <li><a href="#">Mijn boodschappenlijst</a></li>
        </ul>

        <ul>
            <li><a href="#">Startpagina</a></li>
            <li><a href="#">Mijn profiel</a></li>
            <li><a href="#">Jobs@IKEA</a></li>
        </ul>

        <nav>
            <ul>
                <li><a href="#">Alle producten</a></li>
                <li><a href="#">Nieuw</a></li>
                <li><a href="#">Promoties</a></li>
                <li><a href="#">Inspiratie</a></li>
                <li><a href="#">Plannen</a></li>
                <li><a href="#">Praktische info</a></li>
                <li><a href="#">3D Keukenplanner</a></li>
                <li><a href="#">Alle afdelingen</a></li>
            </ul>
        </nav>
    </header>

    <div id="content">

        <div id="reclameImg">
            <a href="#"><img src="images/page1/__ikea_besta_hp_900x518_nl.jpg" alt="BESTÅ opbergsysteem"></a>
        </div>

        <aside>
            <h1>Handige links</h1>
            <div id="linksAside">   
                <ul>
                    <li><a href="#">Bereid je aankoop voor</a></li>
                    <li><a href="#">Openingstijden</a></li>
                    <li><a href="#">Voorraadinformatie</a></li>
                    <li><a href="#">Dienst na verkoop</a></li>
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">Contacteer ons</a></li>
                    <li><a href="#">IKEA restaurant</a></li>
                    <li><a href="#">Jobs bij ikea</a></li>
                </ul>
            </div>
            <div id="inDeBuurt">
                <h1>IKEA bij jou in de buurt</h1>
                <p>Kies hieronder een vestiging voor routebeschrijvingen, openingstijden, aanbiedingen en activiteiten.</p>
            </div>
        </aside>

        <div id="midden">
            <div id="boodschappenlijst">
                <p>Wil je makkelijker winkelen? <a href="#">Maak dan gebruik van de boodschappenlijst</a></p>
                <p>Volg ons op: <a href="#"><img src="images/page1/fb.jpg"></a></p>
            </div>

            <div id="reclameMidden">
                <section id="reclame1">
                    <a href="#"><img src="images/page1/fr1.jpg"></a>
                    <a href="#"><img src="images/page1/w11-13_nl_172x255.jpg"></a>
                </section>

                <section id="reclame2">
                    <a href="#"><img src="images/page1/fr2.jpg"></a>
                    <a href="#"><img src="images/page1/w11-13_nl_172x255.jpg"></a>
                </section>
            </div>
        </div>  

    </div>

    <footer>
        <div id="footerLinks">
            <h2>Catalogus en brochures 2012</h2>
            <ul>
                <li><a href="#">Catalogus 2012 bestellen</a></li>
                <li><a href="#">Keukenbrochure bestellen</a></li>
                <li><a href="#">Catalogus 2012 online</a></li>
                <li><a href="#">Keukenbrochure online</a></li>
                <li><a href="#">Matrassenbrochure</a></li>
                <li><a href="#">Garderobekastenbrochure</a></li>
                <li><a href="#">BESTÅ brochure</a></li>
            </ul>

            <h2>Informatie over IKEA</h2>
            <ul>
                <li><a href="#">Het IKEA woonwarenhuis</a></li>
                <li><a href="#">IKEA voor kinderen</a></li>
                <li><a href="#">Onze verantwoordelijkheid</a></li>
                <li><a href="#">IKEA Social Initiative</a></li>
                <li><a href="#">Ons bedrijfsconcept</a></li>
                <li><a href="#">Onze geschiedenis</a></li>
            </ul>

            <h2>Praktische info</h2>
            <ul>
                <li><a href="#">Contacteer ons</a></li>
                <li><a href="#">Hulp bij het plannen</a></li>
                <li><a href="#">IKEA cadeaupas</a></li>
                <li><a href="#">Dienst naverkoop</a></li>
                <li><a href="#">Onze garanties</a></li>
            </ul>

            <h2>IKEA Home Planner</h2>

            <h2>Onze Services</h2>
            <ul>
                <li><a href="#">Leveringsservice</a></li>
                <li><a href="#">Installatieservice voor keukens</a></li>
                <li><a href="#">Montageservice</a></li>
                <li><a href="#">Financieringsservice</a></li>
                <li><a href="#">Recyclingservice matrassen</a></li>
            </ul>

            <h2>Jobs bij IKEA</h2>
            <ul>
                <li><a href="#">Beschikbare jobs</a></li>
            </ul>

            <h2>IKEA en het milieu</h2>
            <ul>
                <li><a href="#">Mens en milieu</a></li>
                <li><a href="#">Het verhaal zonder einde</a></li>
                <li><a href="#">Klimaatverandering</a></li>
                <li><a href="#">Producten en materialen</a></li>
                <li><a href="#">Onze gedragscode</a></li>
                <li><a href="#">Voedselveiligheid</a></li>
                <li><a href="#">Katoen</a></li>
                <li><a href="#">Partnerships</a></li>
            </ul>
        </div>

        <div id="footerCopyright">
            <p>© Inter IKEA Systems B.V. 1999-2012 | <a href="#">Privacy</a> | <a href="#">Alg. voorwaarden</a> | <a href="#">Sitemap</a> | <a href="#">IKEA FAMILY lid worden</a></p>
        </div>

    </footer>
</div>

\$\endgroup\$
  • \$\begingroup\$ Are you asking whether your HTML could be a faithful replica of the site (given the right CSS)? Or are you asking for general review of your code? \$\endgroup\$ – svick Aug 30 '13 at 12:31
  • 1
    \$\begingroup\$ Also, be aware that replicating an existing site exactly is most likely illegal and it makes me wonder whether you're creating a scam site. \$\endgroup\$ – svick Aug 30 '13 at 12:33
  • \$\begingroup\$ @svick This is actually a project for a class I'm taking to learn html and css. This is an old version of what the IKEA website used to look like and literally just a random site taken from the web. I guess I'm asking if it could be a faithful replica of the site given the right css. I'm really not that good with the whole html css thing yet so I'm wondering if i'm using the correct attributes etc. Thanks for your response! :) \$\endgroup\$ – jvh Aug 30 '13 at 12:54
  • \$\begingroup\$ If you are on a unix/linux system, use wget here a link: Create a mirror of a website with Wget \$\endgroup\$ – MrSmith42 Aug 30 '13 at 13:56
1
\$\begingroup\$

Not important in this case, but it’s a good practice in general:meta-charset should be the first element in head.

You shouldn’t duplicate the information "Vraag het aan Anna" in the alt attribute. But anyway, to me this image doesn’t look like content, it’s probably more decoration resp. a navigational hint. If this is true (to check, you could ask yourself: Would the page convey the same meaning without this image?), you could use CSS to include this image instead.

"Vraag het aan Anna" should probably be part of the link.

You could use the abbr element for "NL" and "FR".

Use rel-alternate + hreflang for the language switching links.

In the aside I’d use section elements explicitly.

<img src="images/page1/fb.jpg"> is missing an alt attribute. It should describe the target of the link (i.e. "Facebook"), not the graphic itself.

The images in .reclameMidden are missing alt attributes.

Use small for "© Inter IKEA Systems B.V. 1999-2012". You could also use time for "1999-2012",

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ images need those alt attributes. depending on who you are writing the page for it could be a really, really big deal if you don't have them. just get into the habit of always putting the alt attribute in with something very meaningful. it helps with screen readers for people with disabilities. good catch unor. \$\endgroup\$ – Malachi Sep 4 '13 at 17:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.