• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Semantisch korrekt?

Gimli

Gimli

Mitglied
Ist folgender Html Code semantisch richtig?

HTML: 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Admin Panel | Index</title>
<style type="text/css">
@import url("style/style.css");
</style>
</head>

<body>

    <div id="wrapper">
        <div id="header">
            <h1 class="header"><a href=""><img alt="Encarnium Admin Panel" src=""></a></h1>
        </div>
        
        <div id="nav">
            <ul class="nav">
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
            </ul>
        </div>
        
        <div id="content">
        
            <div id="sub_nav">
                <ul class="sub_nav">
                    <li><a href="">Link</a></li>
                    <li><a href="">Link</a></li>
                    <li><a href="">Link</a></li>
                    <li><a href="">Link</a></li>
                </ul>
            </div>
            
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
                accusam et justo duo dolores et ea                 rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
                consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore                 magna aliquyam erat, sed diam voluptua. At vero eos et accusam
                et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
        </div>
        
        <div id="footer">
            <p>
            Footer
            </p>
        </div>
    </div>


</body>
</html>


Hier noch die CSS ;)

Code: 
@charset "utf-8";

* {
    border: none;
    margin:0px;
}

a:visited {
    color:#00F;
}

#wrapper {
    margin:0px auto;
    width:1000px;
    margin-top:50px;
    min-height:500px;
    position:relative;
    border:1px solid black;
}

#header {
    width:100%;
    height:120px;
    background-color:#CCC;
    position:relative;
    top:0px;
}

#nav {
    width:100%;
    height:30px;
    background-color:#FFC;
    position:relative;
    top:0px;
}

#sub_nav {
    width:100px;
    left:0px;
    position:absolute;
    height:100%;
    background-color:#0FF;
    top:0px;
}

#content {
    min-height:400px;
    height:100%;
    background-color:#0F0;
    padding-left:120px;
    padding-right:20px;
    padding-top:20px;
    padding-bottom:20px;
    position:relative;
}

#footer {
    width:100%;
    height:20px;
    position:relative;
    background-color:#69F;
}

.nav {
    list-style-type:none;
    position:relative;
    margin:0px;
    padding:0px;
}

.nav li {
    float:left;
    min-width:30px;
    background-color:#CF0;
}

.nav li a {
    min-width:30px;
    height:20px;
    float:left;
    font-size:1.2em;
    text-decoration:none;
    padding:5px;
    padding-left:10px;
    padding-right:10px;
    border-right:1px solid black;
    color:#060;
}

.nav li:hover {
    background-color:#3F9;
}

.sub_nav {
    list-style-type:none;
    margin:0px;
    margin-top:10px;
    padding:0px;
}

.sub_nav li {
    margin-bottom:10px;
    width:100px;
    float:left;
    background-color:#0CF;
}

.sub_nav li a {
    width:80px;
    height:20px;
    float:left;
    text-decoration:none;
    padding-left:10px;
    padding-right:10px;
    font-size:1.1em;
    color:#060;
}

.sub_nav li:hover {
    background-color:#0FC;
}

.header {
    width:100%;
    height:100%;
}

.header a {
    background-color:#999;
    width:100%;
    height:100%;
    position:absolute;
    text-decoration:none;
}

.header a:hover {
    background-color:#CCC;
}
 
Semantisch sieht das schon gut aus, allerdings hast du noch zuviele divs die garnichts gruppieren.

Die <h1> muss nicht in einem div stehen, die Navigation ebenfalls nicht, die Subnavigation auch nicht und der Footer auch nicht.

Schmeiß die divs noch raus, dann sieht es auch nicht mehr nach Div-Suppe aus.
 
Also oben im Header kommt noch mehr als das h1 rein und im Footer auch. Bei den Navis weiß ich net so recht. Ich finde es sieht so besser aus
 
Gimli schrieb:
Bei den Navis weiß ich net so recht. Ich finde es sieht so besser aus
Zum Vergrößern anklicken....
Abgesehen davon, dass es nicht um das Aussehen des Codes geht, sieht es auch nicht besser aus. Da ist ein zusätzliches Tag, über das man sich beim Lesen Gedanken machen muss, daher ist der Code so schwieriger zu lesen und somit ist es alles andere als "besser aussehend".
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben