“Verdwaalde starttag-voettekst” in html-validator?

Ik kan er niet achter komen waarom ik deze foutmelding krijg:

Verdwaalde starttag-voettekst.

Dit is de code (ik heb de inhoud eruit gehaald, dit zijn alleen de tags)

<!doctype html>
<head>
    <title>title</title>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
    <img src="heading.jpg" width="840" alt="pic">
    <!--<div id="container"></div> used ot set width of page -->
    <nav>
        <div id="columns">
            <a href="index.html">Home</a>
            <a href="products.html">Products</a>
            <a href="gift_ideas.html">Gift Ideas</a>
        </div>
        <br>
        <div id="link">
            <a href="link1.html">link1</a>|<a href="link2.html">link2</a>|<a href="link3.html">link 3</a>
        </div>
    </nav>
    <section>
        <br>
        <div id="homePage">
            <h1>Welcome</h1>
            <br>
            <div id="cart">
                <img src>
            </div>
        </div>
    </section>
</body>
<footer>
    <br>
    <h2>Contact Us</h2>
    Email: <a href="[email protected]">[email protected]</a>
    <img src>
</footer>

Ik weet zeker dat ik elke tag heb gesloten, dus wat is het probleem met de footer?


Antwoord 1, autoriteit 100%

U moet de </body>-eindtag helemaal aan het einde verplaatsen, omdat er geen footer-element mag verschijnen na de bodyelement maar daarbinnen. Dit volgt uit de syntaxis van het root-element, het htmlelement : het bevat een headelement en een bodyelement, meer niet.

De validator zegt “Verdwaalde starttag footer” omdat de starttag verschijnt in een context waarin geen elementen kunnen worden gestart – na de </body>tag, waar alleen de optionele </html>-tag kan verschijnen.


Antwoord 2

Ontbrekende <html>-tags toegevoegd, <footer>toegevoegd aan <body>-tag. Hoewel dit niet direct verband houdt met uw vraag, lijkt het er ook op dat u <br>-tags gebruikt om ruimte te maken tussen verschillende elementen. Ik raad je aan daarmee te stoppen en CSS te gebruiken om in plaats daarvan de margin-eigenschappen van die elementen aan te passen.

Volledige code hieronder:

<!doctype html>
<html>
<head>
    <title>title</title>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
    <img src="heading.jpg" width="840" alt="pic">
    <!--<div id="container"></div> used ot set width of page -->
    <nav>
        <div id="columns">
            <a href="index.html">Home</a>
            <a href="products.html">Products</a>
            <a href="gift_ideas.html">Gift Ideas</a>
        </div>
        <br>
        <div id="link">
            <a href="link1.html">link1</a>|<a href="link2.html">link2</a>|<a href="link3.html">link 3</a>
        </div>
    </nav>
    <section>
        <br>
        <div id="homePage">
            <h1>Welcome</h1>
            <br>
            <div id="cart">
                <img src>
            </div>
        </div>
    </section>
    <footer>
        <br>
        <h2>Contact Us</h2>
        Email: <a href="[email protected]">[email protected]</a>
        <img src>
    </footer>
</body>
</html>

Other episodes