[HTML] semantischer aufbau in HTML5

Dieses Thema im Forum "Webdesign" wurde erstellt von onip, 16. November 2012 .

Schlagworte:
  1. 16. November 2012
    Zuletzt bearbeitet: 16. November 2012
    semantischer aufbau in HTML5

    hi zusammen,

    ich beschäftige mich gerade mit einem semantischen aufbau einer HTML5 seite,
    das mir als tut dienen soll.

    stand der dinge:
    HTML:
    <!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
 <title>{sitetitle}</title>
 <link rel="stylesheet" type="text/css" href="css/normalize_min.css" />
 <link rel="stylesheet" type="text/css" href="css/style.css" />
 <link rel="SHORTCUT ICON" href="favicon.ico" />
</head>
<body>
 <div id="site">
 <header>
 <img src="img/logo.png" width="316" height="102" alt="{sitetitle}" title="{sitetitle}" />
 <h1>Slogan des Tages<br />RR4ever</h1>
 </header>
 
 <nav id="nav" class="floatl">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#" class="aktiv">Leistungen</a>
 <ul>
 <li><a href="#" class="aktiv">Leistung 01</a></li>
 <li><a href="#">Leistung 02</a></li>
 </ul>
 </li>
 <li><a href="#">Kontakt</a></li>
 <li><a href="#">Impressum</a></li>
 </ul>
 </nav>
 
 <article class="floatl">
 <section>
 <h2>Leistungen</h2>
 <p>Praesent condimentum eros vitae sem dignissim vitae vehicula massa fermentum. Nullam dignissim est sed libero bibendum egestas faucibus dolor vehicula. Proin commodo ipsum eu ligula accumsan vulputate. Ut sem arcu, cursus ac tincidunt vel, pulvinar eget justo. Vivamus quis neque sit amet velit ornare euismod. Ut a mauris sed magna interdum vulputate ut quis tellus. Donec egestas arcu nec magna lacinia vitae lacinia tortor porta. Donec elementum consequat metus, condimentum lobortis nisl pulvinar id. Donec mattis tempus sagittis. Vestibulum congue semper est a ultricies. Sed dui velit, rutrum et viverra sit amet, ullamcorper vel velit. Proin euismod leo et turpis varius auctor. Praesent ac rutrum nisi.</p>
 </section> 
 </article>
 
 <div id="marginal" class="floatl">
 <section>
 <h3>Referenzen</h3>
 <p>Praesent condimentum eros vitae sem dignissim vitae vehicula massa fermentum.</p>
 </section>
 </div>
 <footer class="floatc">
 &copy;2012 myCompany GmbH, Germany
 </footer>
 </div>
</body>
</html>
    was mich etwas beschäftigt ist dieser teil:
    HTML:
    <div id="marginal" class="floatl">
 <section>
 <h3>Referenzen</h3>
 <p>Praesent condimentum eros vitae sem dignissim vitae vehicula massa fermentum.</p>
 </section>
</div>
    gibt es einen tag der die 3. spalte beschreibt?
    oder ist es ok diesen als <div> zu definieren?
     
    + Multi-Zitat Zitieren
  3. 16. November 2012
    AW: semantischer aufbau in HTML5

    Ich würde es in aside hauen. Aber nur dann, wenn es nicht zum Inhaltskern der Seite zählt (also weitere Informationen).

    Der Slash in einfachen Tags (ohne Gegenstück wie in diesem Fall br) sind obsolet und können weggelassen werden. Also <br>
     
    1 Person gefällt das.
    + Multi-Zitat Zitieren
  4. 16. November 2012
    AW: semantischer aufbau in HTML5

    Statt Section Aside. btw Section innerhalb von Article ist auch ein bisschen komisch. Schau dir bitte nochmal die Bedeutungen dazu an.
     
    1 Person gefällt das.
    + Multi-Zitat Zitieren
  5. 16. November 2012
    AW: semantischer aufbau in HTML5

    danke euch beiden.
    hab einiges umgestellt und hoffe, dass ich richtiger liege.
    mein ziel ist, zu versuchen unnötige div's zu elemenieren.
    HTML:
    <!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
 <title>{sitetitle}</title>
 <link rel="stylesheet" type="text/css" href="css/normalize_min.css" />
 <link rel="stylesheet" type="text/css" href="css/style.css" />
 <link rel="SHORTCUT ICON" href="favicon.ico" />
</head>
<body>
<div id="site">
 <header>
 <figure>
 <img src="img/logo.png" width="316" height="102" alt="{sitetitle}" title="{sitetitle}" />
 <figcaption>Slogan des Tages<br />RR4ever</figcaption>
 </figure>
 </header>
 
 <nav id="nav" class="floatl">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#" class="aktiv">Leistungen</a>
 <ul>
 <li><a href="#" class="aktiv">Leistung 01</a></li>
 <li><a href="#">Leistung 02</a></li>
 </ul>
 </li>
 <li><a href="#">Kontakt</a></li>
 <li><a href="#">Impressum</a></li>
 </ul>
 </nav>
 
 <div id="content" class="floatl">
 <section>
 <article>
 <h1>Leistungen</h1>
 <p>Praesent condimentum eros vitae sem dignissim vitae vehicula massa fermentum. Nullam dignissim est sed libero bibendum egestas faucibus dolor vehicula. Proin commodo ipsum eu ligula accumsan vulputate. Ut sem arcu, cursus ac tincidunt vel, pulvinar eget justo. Vivamus quis neque sit amet velit ornare euismod. Ut a mauris sed magna interdum vulputate ut quis tellus. Donec egestas arcu nec magna lacinia vitae lacinia tortor porta. Donec elementum consequat metus, condimentum lobortis nisl pulvinar id. Donec mattis tempus sagittis. Vestibulum congue semper est a ultricies. Sed dui velit, rutrum et viverra sit amet, ullamcorper vel velit. Proin euismod leo et turpis varius auctor. Praesent ac rutrum nisi.</p>
 </article>
 </section>
 <section>
 <article class="teaser floatl">
 <h2>teaserHead</h2>
 <figure class="teaserimg floatl"><img class="scale" src="img/teaser.jpg" alt="" /></figure>
 <p class="teasertext">Praesent condimentum eros vitae sem dignissim</p>
 <div class="floatc overflow"></div>
 </article>
 <article class="teaser floatl">
 <h2>teaserHead</h2>
 <figure class="teaserimg floatl"><img class="scale" src="img/teaser.jpg" alt="" /></figure>
 <p class="teasertext">Praesent condimentum eros vitae sem dignissim</p>
 <div class="floatc overflow"></div>
 </article>
 <article class="teaser floatl">
 <h2>teaserHead</h2>
 <figure class="teaserimg floatl"><img class="scale" src="img/teaser.jpg" alt="" /></figure>
 <p class="teasertext">Praesent condimentum eros vitae sem dignissim</p>
 <div class="floatc overflow"></div>
 </article>
 </section>
 </div>
 
 <aside id="marginal" class="floatl">
 <div>
 <h3>Referenzen</h3>
 <p>Praesent condimentum eros vitae sem dignissim vitae vehicula massa fermentum.</p>
 </div>
 <div>
 <h3>News</h3>
 <p>Praesent condimentum eros vitae sem dignissim vitae vehicula massa fermentum.</p>
 </div>
 </aside>
 
 <footer class="floatc">
 &copy;2012 myCompany GmbH, Germany
 </footer>
</div>
</body>
</html>
     
    + Multi-Zitat Zitieren
  6. 16. November 2012
    Zuletzt bearbeitet: 16. November 2012
    AW: semantischer aufbau in HTML5

    Article innerhalb von Section machts nicht besser.

    Section:
    Ein bestimmter Bereich deiner Seite (mit Überschrift)

    Article:
    Ein geschriebener Text (z.b. Kommentar, Blogeintrag, News)
     
    + Multi-Zitat Zitieren
  7. 16. November 2012
    Zuletzt bearbeitet: 16. November 2012
    AW: semantischer aufbau in HTML5

    du meinst eher so:
    HTML:
    <div id="content" class="floatl">
 <article>
 <h1>Leistungen</h1>
 <p>Praesent condimentum eros vitae sem dignissim vitae vehicula massa fermentum. Nullam dignissim est sed libero bibendum egestas faucibus dolor vehicula. Proin commodo ipsum eu ligula accumsan vulputate. Ut sem arcu, cursus ac tincidunt vel, pulvinar eget justo. Vivamus quis neque sit amet velit ornare euismod. Ut a mauris sed magna interdum vulputate ut quis tellus. Donec egestas arcu nec magna lacinia vitae lacinia tortor porta. Donec elementum consequat metus, condimentum lobortis nisl pulvinar id. Donec mattis tempus sagittis. Vestibulum congue semper est a ultricies. Sed dui velit, rutrum et viverra sit amet, ullamcorper vel velit. Proin euismod leo et turpis varius auctor. Praesent ac rutrum nisi.</p>
 </article>
 <section class="teaser floatl">
 <h2>teaserHead</h2>
 <figure class="teaserimg floatl"><img class="scale" src="img/teaser.jpg" alt="" /></figure>
 <p class="teasertext">Praesent condimentum eros vitae sem dignissim</p>
 <div class="floatc overflow"></div>
 </section>
 <section class="teaser floatl">
 <h2>teaserHead</h2>
 <figure class="teaserimg floatl"><img class="scale" src="img/teaser.jpg" alt="" /></figure>
 <p class="teasertext">Praesent condimentum eros vitae sem dignissim</p>
 <div class="floatc overflow"></div>
 </section>
 <section class="teaser floatl">
 <h2>teaserHead</h2>
 <figure class="teaserimg floatl"><img class="scale" src="img/teaser.jpg" alt="" /></figure>
 <p class="teasertext">Praesent condimentum eros vitae sem dignissim</p>
 <div class="floatc overflow"></div>
 </section>
</div>
    kann ich die rechte spalte (aside) mit section verschachteln?
    HTML:
    <aside id="marginal" class="floatl">
 <section>
 <h3>Referenzen</h3>
 <p>Praesent condimentum eros vitae sem dignissim vitae vehicula massa fermentum.</p>
 </section>
 <section>
 <h3>News</h3>
 <p>Praesent condimentum eros vitae sem dignissim vitae vehicula massa fermentum.</p>
 </section>
</aside>
    // edit
    endlich hab ich was gefunden.
    folgender aufbau wird da vorgeschlagen:
    HTML:
    <!doctype html>
<html>
<head>
 <title></title>
</head>
<body>
 <header></header>
 <nav></nav>
 <section>
 <article class="blogPost"></article>
 </section>
 <section id="comments">
 <article></article>
 <article></article>
 </section>
 <aside>
 <section></section>
 <section></section>
 </aside>
 <footer></footer>
</body>
</html>
    da lag ich mit meinem ersten aufbau garnicht daneben.
     
    + Multi-Zitat Zitieren
  8. 16. November 2012
    Zuletzt bearbeitet: 16. November 2012
    AW: semantischer aufbau in HTML5

    HTML:
    <article> 
 <h1>Leistungen</h1> 
 
 <p>Praesent condimentum eros vitae sem dignissim vitae vehicula massa 
 fermentum. Nullam dignissim est sed libero bibendum egestas faucibus 
 dolor vehicula. Proin commodo ipsum eu ligula accumsan vulputate.</p>
</article> 

<aside>
 <h2>teaserHead</h2> 
 
 <figure class="teaserimg floatl">
 <img class="scale" src="img/teaser.jpg" alt="" />
 </figure> 
 
 <p class="teasertext">Praesent condimentum eros vitae sem dignissim</p> 
</aside>

<aside>
 <h2>teaserHead</h2> 
 
 <figure class="teaserimg floatl">
 <img class="scale" src="img/teaser.jpg" alt="" />
 </figure> 
 
 <p class="teasertext">Praesent condimentum eros vitae sem dignissim</p> 
</aside>

<aside>
 <h2>teaserHead</h2> 
 
 <figure class="teaserimg floatl">
 <img class="scale" src="img/teaser.jpg" alt="" />
 </figure> 
 
 <p class="teasertext">Praesent condimentum eros vitae sem dignissim</p> 
</aside>
    // Zu deinem Fund:
    Der Aufbau ist falsch. Vermutlich, weil die Seite veraltet ist.


    • <aside> ist nicht in erster Linie für sidebars gedacht.
    • <header> ist nicht ausschließlich für den Seitenkopf zu nutzen, auch
      <section> / <article> können einen <header> UND <footer> haben.

    <section> macht z.b. bei einer Tab-Ansicht Sinn (jeder Tab-Inhalt ist eine <section>)
    Oder für Kommentare:
    HTML:
    <section id="comments">
 <h2>Kommentare</h2>

 <article></article>
 <article></article>
</section>
    http://html5doctor.com/downloads/h5d-sectioning-flowchart.png

    Aber jetzt mal unter uns:
    Diesen ganzen Mist hätte sich die WHATWG auch sparen können.

    Ich selbst komme mit den Elementen auch nicht wirklich klar und steh immer wieder vor der Entscheidung "section" oder "article" - genau so was sollte bei einer sinnvollen Spezifikation eben nicht passieren.
     
    + Multi-Zitat Zitieren
  9. 16. November 2012
    AW: semantischer aufbau in HTML5

    danke.
    ein sinvoller aufbau würde wohl so aussehen, wenn ich dich richtig verstehe:
    HTML:
    <!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
 <title></title>
</head>
<body>
<div>
 <!-- logo -->
 <header></header>
 <!-- nav -->
 <nav></nav>
 <!-- content -->
 <section>
 <!-- inhalt -->
 <article></article>
 <!-- teaserlist -->
 <aside></aside>
 <aside></aside>
 <aside></aside>
 </section>
 <!-- sidebar -->
 <aside></aside>
 <!-- footer -->
 <footer></footer>
</div>
</body>
</html>
    ein fundstück hab ich noch
     
    + Multi-Zitat Zitieren
  10. 16. November 2012
    AW: semantischer aufbau in HTML5

    Nein, <section> braucht eine Überschrift.

    HTML:
    <!-- header / nav etc. -->
<div id="main" role="main">
 <!-- Inhalt / sidebar etc. -->
</div>
<!-- footer -->
    so sollte man es machen.
     
    + Multi-Zitat Zitieren
  11. 16. November 2012
    AW: semantischer aufbau in HTML5

    wenn die section ne überschrift benötigt, dann könnte man dieser doch so eine verpassen?
    HTML:
    <section>
 <h1></h1>
 <!-- inhalt -->
 <article></article>
 <!-- teaserlist -->
 <aside></aside>
 <aside></aside>
 <aside></aside>
</section>
    nimm's mir nicht übel, will es einfach verstehen und richtig machen, danke.
     
    + Multi-Zitat Zitieren
  12. 16. November 2012
    AW: semantischer aufbau in HTML5

    Rein theoretisch ja.

    HTML5-Doctor und HTML5-Boilerplate schlagen aber den anderen Aufbau (siehe oben) vor.
     
    + Multi-Zitat Zitieren
  13. 16. November 2012
    Zuletzt bearbeitet: 16. November 2012
    AW: semantischer aufbau in HTML5

    wenn section nicht wichtig ist,
    dann würde ich mein tut, wie vorgeschlagen, so aufbauen:
    HTML:
    <!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
 <title></title>
</head>
<body>
<div>
 <!-- logo -->
 <header></header>
 <!-- nav -->
 <nav></nav>
 <!-- content -->
 <div>
 <!-- inhalt -->
 <article></article>
 <!-- teaserlist -->
 <aside></aside>
 <aside></aside>
 <aside></aside>
 </div>
 <!-- sidebar -->
 <aside></aside>
 <!-- footer -->
 <footer></footer>
</div>
</body>
</html>
    // edit
    w3c validator meckert nur bei:
    HTML:
    <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
     
    + Multi-Zitat Zitieren
  14. 16. November 2012
    AW: semantischer aufbau in HTML5

    X-UA-Compatible ist kein valides http-equiv.

    Sende den Header einfach mittles htaccess.
     
    + Multi-Zitat Zitieren
  15. 16. November 2012
    AW: semantischer aufbau in HTML5

    nochmals danke für deine hilfe.

    für die die bis hierhin gelesen haben,
    hier noch der header eintrag für die .htaccess
    viele grüße
     
    + Multi-Zitat Zitieren
  16. 20. November 2012
    AW: semantischer aufbau in HTML5

    Kleiner Nachtrag:

    HTML5 bekommt vermutlich sogar ein <main> Element
    main element - an HTML5 extension specification

    Als ob es nicht schon genug ist sich mit <section> und <article> rum zu ärgern.
     
    + Multi-Zitat Zitieren
  17. 21. November 2012
    AW: semantischer aufbau in HTML5

    html5-doctor ist sehr informativ.
    dazu hab ich einen vorgeschlagenen aufbau gefunden.
    es wird auch role=main verwendet.
    denke, dass es den seiten-content beschreiben soll.
    warum soll jetzt noch <main> hinzukommen?
    <section> <article> und <aside> reichen doch völlig.
     
    + Multi-Zitat Zitieren
  18. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.

Auf dieses Thema antworten