Stefan Alpers: Was bedeutet "Sinnvolle Nutzung von HTML und CSS"?

Hallo,

Vor einigen Tagen wurde folgendes geschrieben:
([ref:suche;Sven Rautenberg Grundlegender Aufbau] )

"Moin!

Ist es besser wenn ich das Template aus einer großen Tabelle bastele, in denen die einzelnen Grafiken als Background sind, oder wenn ich alles mit div-Containern bastel und diese positioniere?
Beides wäre ohne Probleme möglich, ich weiß bloß nicht, welches der bessere Stil wäre.

Beide Ansätze sind nicht wirklich "schön".

Erstelle deine Inhalte. Nutze die verfügbaren HTML-Elemente, um die Inhalte passend auszuzeichnen. Formatiere mit CSS.

Tabellenlayouts sind out. Positionierte DIVs sind out. Sinnvolle Nutzung von HTML und CSS ist in.

- Sven Rautenberg"

Was bedeutet "Positionierte DIVs sind out" bzw. "Sinnvolle Nutzung von HTML und CSS ist in" bezüglich des Layouts im Detail?

div-Container können im Style-Sheet positioniert werden. Ist das jetzt schön oder unschön? Ich bin verwirrt.

Viele Grüße,

Stefan

  1. Tach,

    div-Container können im Style-Sheet positioniert werden. Ist das jetzt schön oder unschön? Ich bin verwirrt.

    naja, früher bestanden die Seiten größtenteils aus Duzenden ineinander verschachtelten Tabellen, mit denen die restlichen Elemente positioniert wurden. Als dann CSS aufkam, wurde zumeist damit begonnen, diese Tabellen durch eine noch größere Anzahl von Divs zu ersetzen; beides ist aber nicht wirklich sinnvoll.
    Unter sinnvoller Nutzung von HTML verstehe ich: Ist etwa eine Liste, dann nutze ol und ul, ist etwas eine Überschrift nutze hx, bildet etwas einen Abschnitt nutze div, sind es tabellarische Daten dann ab in eine Tabelle, ist es wichtig, dann zeichne es mit strong aus, etc. Wenn ich mit dem Kram durch bin schaue ich mir an, was da ist und überlege, ob es Dinge gibt, die zu klassifizieren (durch ein class-Attribut) oder eindeutig zu identifizieren (durch id) sind. Danach schaue ich mir dann an, wie das ganze aussehen soll, indem ich ein passendes CSS schreibe.

    mfg
    Woodfighter

  2. Lieber Stefan,

    ich glaube verstanden zu haben, worauf Sven Rautenberg hinaus wollte:

    Tabellenlayouts sind out. Positionierte DIVs sind out. Sinnvolle Nutzung von HTML und CSS ist in.

    Wenn ich ein DIV in meinen Quelltext setzen muss (z.B. <div class="ueberschrift">), weil ich es nicht geschafft habe, meine Überschrift als solche auszuzeichnen (z.B. mit <h2>), dann ist dieses DIV eindeutig schlechter Stil, denn es ist unnötigerweise verwendet worden. Semantisches HTML, oder "sinnvolle Nutzung" wäre gewesen, den Überschriftentext in ein passendes Element zu setzen, welches dann mit CSS auf herkömmliche Art gestyled würde.

    Es ist etwas anderes, wenn man komplette Bereiche (also nicht nur eine Überschrift, sondern vielleicht gar eine Überschrift samt folgendem Textabsatz oder Absätzen) mit einem DIV zusammen gruppiert, um dieser Gruppe dann style-technisch zu Leibe zu rücken.

    Was bedeutet "Positionierte DIVs sind out" bzw. "Sinnvolle Nutzung von HTML und CSS ist in" bezüglich des Layouts im Detail?

    Ich gebe Dir jetzt zwei stereotypische (daher z.T. übertriebene) Code-Beispiele, um im HTML zu veranschaulichen, was ich meine:

    <body>  
    <div class="ueberschrift">Mieser Stil</div>  
    <div class="fliesstext">Dieser Code ist nicht semantisch.</div>  
    <div class="rechte-spalte-ueberschrift">Neuigkeiten</div>  
    <div class="rechte-spalte-fliesstext">Neues Layout für meine Seite</div>  
    <div class="navigation-ueberschrift">Links:</div>  
    <div class="navigation-link"><span class="aktuell">Startseite</span></div>  
    <div class="navigation-link"><a href="gb.html">Gästebuch</div>  
    <div class="navigation-link"><a href="imp.html">Impressum</div>  
    <div class="footer">Copyright by the Oberchef</div>  
    </body>
    
    <body>  
    <h1 class="verziert">Guter Stil</h1>  
    <p>Dieser Code ist semantisch, da die verwendeten HTML-Tags (also die Elemente) der Natur ihres Inhaltes entsprechen.</p>  
    <div id="rechte-spalte">  
       <h2>Neuigkeiten</h2>  
       <p>Neues Layout für meine Seite</p>  
    </div>  
    <div id="navigation">  
       <h2>Links</h2>  
       <ul>  
          <li class="aktuell">Startseite</li>  
          <li><a href="gb.html">Gästebuch</a></li>  
          <li><a href="imp.html">Impressum</a></li>  
       </ul>  
    </div>  
    </body>
    

    div-Container können im Style-Sheet positioniert werden. Ist das jetzt schön oder unschön? Ich bin verwirrt.

    Das ist generell neutral. Wenn es die einzige verwendete Möglichkeit zur Seitengestaltung ist, dann ist es unschön. Im zweiten Beispiel oben werden auch positionierte DIVs verwendet. Im Unterschied zum ersten Beispiel sind diese aber tatsächlich zum Gruppieren von Elementen eingesetzt worden (sie umfassen eine <h2> und ein <p>, bzw. eine <h2> und eine <ul>), um als "komplettes Paket" ausgerichtet zu werden. Dazu haben sie dann auch eine ID bekommen, denn diese DIVs gibt es auf dieser Seite einmalig.

    Wer semantisches HTML verwendet (siehe zweites Beispiel), hat in der Regel genügend HTML-Elemente, die er per CSS erreichen kann und muss nicht noch extra mit DIVs hantieren. Dabei sei auch der Einsatz von IDs und Classes empfohlen!

    Hoffentlich konnte ich Svens Statements etwas verständlicher machen.

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    1. Hallo Felix.

      <div id="rechte-spalte">

      <h2>Neuigkeiten</h2>
         <p>Neues Layout für meine Seite</p>
      </div>

        
      Eine ID wie „neuigkeiten“ wäre hier besser, da „rechte-spalte“ nichts über den Inhalt aussagt, sondern sich eher an die derzeitig gewünschte Darstellung anlehnt.  
        
        
      Einen schönen Donnerstag noch.  
        
      Gruß, Ashura  
      
      -- 
      sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|  
      „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“  
      [[HTML Design Constraints: Logical Markup](http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/HTMLConstraints.html)]
      
      1. Hell-O!

        <div id="rechte-spalte">

        <h2>Neuigkeiten</h2>
           <p>Neues Layout für meine Seite</p>
        </div>

        
        > Eine ID wie „neuigkeiten“ wäre hier besser, da „rechte-spalte“ nichts über den Inhalt aussagt, sondern sich eher an die derzeitig gewünschte Darstellung anlehnt.  
          
        Muss eine ID denn zwingend einen Bezug zum Inhalt haben? Man könnte sie doch auch "husseldiguggeldu" nennen, der Effekt bleibt gleich. Und ja, diese Frage ist durchaus ernst gemeint.  
          
        Siechfred
        
        -- 
        Hier könnte Ihre Werbung stehen.  
        [Musikgeschmack](http://siechfred.kennt-wayne.de/2006/7/musikgeschmack) || [Das Steuerblog](http://www.steuerwerkstatt.de/blog/)  || [RT 221 Erfurt-Altstadt i.V.](http://rt221.anaboe.net/) 
        
        1. hi,

          Eine ID wie „neuigkeiten“ wäre hier besser, da „rechte-spalte“ nichts über den Inhalt aussagt, sondern sich eher an die derzeitig gewünschte Darstellung anlehnt.

          Muss eine ID denn zwingend einen Bezug zum Inhalt haben?

          Muss ein Textabsatz denn _unbedingt_ mit P und eine Überschrift mit Hx ausgezeichnet werden ...?

          Man könnte sie doch auch "husseldiguggeldu" nennen, der Effekt bleibt gleich.

          Geht es nur um "Effekte" - oder darum, die Daten möglichst passend auszuzeichnen?

          Dass es für die "Semantik" von Klassennamen und IDs keine Spezifikation oder einen Standard gibt, bedeutet ja noch nicht, dass man sie vollkommen beliebig wählen sollte.

          Du kannst auch in (fast) jeder Programmiersprache "husseldiguggeldu" als Variablennamen verwenden - würdest du aber vermutlich trotzdem kaum machen, oder? Weil du da nach nicht mal fünf Minuten nicht mehr wüsstest, welche Variable denn nun welchen Wert enthalten soll.

          gruß,
          wahsaga

          --
          /voodoo.css:
          #GeorgeWBush { position:absolute; bottom:-6ft; }
          1. Hell-O!

            Muss eine ID denn zwingend einen Bezug zum Inhalt haben?
            Muss ein Textabsatz denn _unbedingt_ mit P und eine Überschrift mit Hx ausgezeichnet werden ...?

            Nee, das ist für mich eine andere Baustelle, denn es ist klar definiert, welchen Zweck die Elemente in HTML haben. Ich kann nicht einfach eine Überschrift in ein <span> packen, dem ich mit CSS vielleicht noch "display:block" aufzwänge, denn genau dafür ist Hx gedacht. Bei IDs sehe ich das ein bisschen anders. Man kann das Kind "rechte_spalte" nennen, weil es die rechte Spalte ist. Man kann das Kind auch "neuigkeiten" nennen, weil es die Neuigkeiten beinhaltet. Oder man nennt es "geordnete_liste", weil es halt eine ist.

            Dass es für die "Semantik" von Klassennamen und IDs keine Spezifikation oder einen Standard gibt, bedeutet ja noch nicht, dass man sie vollkommen beliebig wählen sollte.

            Es geht mir nicht um die Beliebigkeit, da habe ich mich vielleicht falsch ausgedrückt. Es ging mir um die Auffassung von Ashura, dass "neuigkeiten" als ID besser wäre als "rechte_spalte", die ich so nicht teile.

            Du kannst auch in (fast) jeder Programmiersprache "husseldiguggeldu" als Variablennamen verwenden - würdest du aber vermutlich trotzdem kaum machen, oder? Weil du da nach nicht mal fünf Minuten nicht mehr wüsstest, welche Variable denn nun welchen Wert enthalten soll.

            Aah, dass ich *dir* das sagen muss: Weder HTML noch CSS sind Programmiersprachen ;-))

            Siechfred

            --
            Hier könnte Ihre Werbung stehen.
            Musikgeschmack || Das Steuerblog  || RT 221 Erfurt-Altstadt i.V.
            1. habe d'ehre Siechfred

              Du kannst auch in (fast) jeder Programmiersprache "husseldiguggeldu" als Variablennamen verwenden - würdest du aber vermutlich trotzdem kaum machen, oder? Weil du da nach nicht mal fünf Minuten nicht mehr wüsstest, welche Variable denn nun welchen Wert enthalten soll.

              Aah, dass ich *dir* das sagen muss: Weder HTML noch CSS sind Programmiersprachen ;-))

              <cite>Du kannst auch in (fast) jeder Programmiersprache</cite> behauptet dies auch nicht. HTML und CSS hast Du eingefuehrt. :-)

              man liest sich
              Wilhelm

              1. hi,

                <cite>Du kannst auch in (fast) jeder Programmiersprache</cite> behauptet dies auch nicht.

                Du hast den Vergleich bzw. die Analogie als solche erkannt.

                gruß,
                wahsaga

                --
                /voodoo.css:
                #GeorgeWBush { position:absolute; bottom:-6ft; }
                1. Hell-O!

                  <cite>Du kannst auch in (fast) jeder Programmiersprache</cite> behauptet dies auch nicht.
                  Du hast den Vergleich bzw. die Analogie als solche erkannt.

                  Und ich hoffe, du hast den Smilie als solchen erkannt.

                  Siechfred

                  --
                  Hier könnte Ihre Werbung stehen.
                  Musikgeschmack || Das Steuerblog  || RT 221 Erfurt-Altstadt i.V.
            2. hi,

              Man kann das Kind "rechte_spalte" nennen, weil es die rechte Spalte ist.

              Die ist es vielleicht nur temporär.
              Und vom HTML her ist sie es _gar nicht_, weil erst CSS sie nach rechts bringt, oder eben auch nicht.

              Du kannst einen kleinen Jungen auch "Bubi" nennen. Der wird aber nicht ewig ein kleiner Junge bleiben, sondern vielleicht mal ein Schrank von zwei Metern Größe ...

              Man kann das Kind auch "neuigkeiten" nennen, weil es die Neuigkeiten beinhaltet.

              Ja - bezeichnet das das Kind in diesem Falle nicht am besten?

              Oder man nennt es "geordnete_liste", weil es halt eine ist.

              Man kann das Kind auch "Junge" nennen, weil es ein Junge ist. Und sein Brüderchen wird dann "Junge2" gerufen ...

              gruß,
              wahsaga

              --
              /voodoo.css:
              #GeorgeWBush { position:absolute; bottom:-6ft; }
              1. Hell-O!

                Man kann das Kind "rechte_spalte" nennen, weil es die rechte Spalte ist.
                Die ist es vielleicht nur temporär.

                Diese Möglichkeit besteht immer, auch bei inhaltsbezogenen IDs.

                Man kann das Kind auch "neuigkeiten" nennen, weil es die Neuigkeiten beinhaltet.
                Ja - bezeichnet das das Kind in diesem Falle nicht am besten?

                Um bei deinem Vergleich zu bleiben: Nenne das Kind "Blondie", was tust du, wenn es schwarzhaarig wird?

                Siechfred

                --
                Hier könnte Ihre Werbung stehen.
                Musikgeschmack || Das Steuerblog  || RT 221 Erfurt-Altstadt i.V.
                1. hi,

                  Die ist es vielleicht nur temporär.

                  Diese Möglichkeit besteht immer, auch bei inhaltsbezogenen IDs.

                  Nein, das würde ich nicht sagen.

                  Wenn ich keine Neuigkeiten mehr auf der Seite darstellen möchte, dann entfällt das Element mit der ID "neuigkeiten", und wird ggf. durch ein anderes ersetzt.

                  Inhalt soll von der Darstellung getrennt werden - aber nicht Inhalt von der Struktur.

                  Um bei deinem Vergleich zu bleiben: Nenne das Kind "Blondie", was tust du, wenn es schwarzhaarig wird?

                  Das kommt nicht vor, weil das genauso unsinnig wäre, wie ein Klassenname "roteSchrift".

                  gruß,
                  wahsaga

                  --
                  /voodoo.css:
                  #GeorgeWBush { position:absolute; bottom:-6ft; }
              2. Hi,

                Man kann das Kind auch "Junge" nennen, weil es ein Junge ist ...

                und wenn er sich später mal dazu entscheidet sich zur Frau umoperieren zu lassen was dann?

              3. Hi,

                Du kannst einen kleinen Jungen auch "Bubi" nennen. Der wird aber nicht ewig ein kleiner Junge bleiben, sondern vielleicht mal ein Schrank von zwei Metern Größe ...

                und wenn Bubi auch noch Scholz heißt? ;-)

                cu,
                Andreas

                --
                Warum nennt sich Andreas hier MudGuard?
                Schreinerei Waechter
                O o ostern ...
                Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
              4. Hallo.

                Du kannst einen kleinen Jungen auch "Bubi" nennen. Der wird aber nicht ewig ein kleiner Junge bleiben, sondern vielleicht mal ein Schrank von zwei Metern Größe ...

                In Schweden werden die "Billy" getauft.
                MfG, at

            3. Hi Siechfred.

              Oder man nennt es "geordnete_liste", weil es halt eine ist.

              Das erledigt in meinen Augen schon die Wahl des HTML-Elements, in diesem Fall OL.

              --
              Once is a mistake, twice is jazz.
        2. habe d'ehre Siechfred

          Muss eine ID denn zwingend einen Bezug zum Inhalt haben? Man könnte sie doch auch "husseldiguggeldu" nennen, der Effekt bleibt gleich. Und ja, diese Frage ist durchaus ernst gemeint.

          "§ 23 Ausübung der Hilfeleistung in Steuersachen im Rahmen der Befugnis nach § 4 Nr. 11, Beratungsstellen" koennte also in "§ 23 Was Siechfred so in seiner Mittagspause treibt" umbenannt werden? *g*

          man liest sich
          Wilhelm

          1. Hell-O!

            "§ 23 Ausübung der Hilfeleistung in Steuersachen im Rahmen der Befugnis nach § 4 Nr. 11, Beratungsstellen" koennte also in "§ 23 Was Siechfred so in seiner Mittagspause treibt" umbenannt werden? *g*

            Ähm, jetzt bin ich aber schon ein bisschen beleidigt ;-)

            Siechfred

            --
            Hier könnte Ihre Werbung stehen.
            Musikgeschmack || Das Steuerblog  || RT 221 Erfurt-Altstadt i.V.
            1. habe d'ehre Siechfred

              "§ 23 Ausübung der Hilfeleistung in Steuersachen im Rahmen der Befugnis nach § 4 Nr. 11, Beratungsstellen" koennte also in "§ 23 Was Siechfred so in seiner Mittagspause treibt" umbenannt werden? *g*

              Ähm, jetzt bin ich aber schon ein bisschen beleidigt ;-)

              Och, das wollte ich jetzt aber gar nicht. Kriegst ein "EiEi" und den NinaRuge-Spruch. :-)

              man liest sich
              Wilhelm

              1. Hallo.

                Och, das wollte ich jetzt aber gar nicht. Kriegst ein "EiEi" und den NinaRuge-Spruch. :-)

                Jaja, alles wird gut, nur Nina Ruge nicht.
                MfG, at

                1. habe d'ehre at

                  Hallo.

                  Och, das wollte ich jetzt aber gar nicht. Kriegst ein "EiEi" und den NinaRuge-Spruch. :-)

                  Jaja, alles wird gut, nur Nina Ruge nicht.

                  Wolferl wird das anders sehen.

                  man liest sich
                  Wilhelm

                  1. Hallo.

                    Jaja, alles wird gut, nur Nina Ruge nicht.

                    Wolferl wird das anders sehen.

                    An manchen Aufgaben verzweifeln auch die besten Sanierer.
                    MfG, at

        3. Hallo Siechfred.

          Muss eine ID denn zwingend einen Bezug zum Inhalt haben?

          Meiner Meinung nach: absolut!

          Man könnte sie doch auch "husseldiguggeldu" nennen, der Effekt bleibt gleich.

          Nö. Eine ID mit dem Namen „husseldiguggeldu“ hat keinerlei praktischen Nutzen in Bezug auf die Verarbeitung und Lesbarkeit der ausgezeichneten Struktur. (Außer vielleicht, du kennzeichnest damit das berühmte Cheatah–Zitat.)

          Einen schönen Donnerstag noch.

          Gruß, Ashura

          --
          sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
          „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
          [HTML Design Constraints: Logical Markup]
          1. Hell-O!

            Muss eine ID denn zwingend einen Bezug zum Inhalt haben?
            Meiner Meinung nach: absolut!

            Meiner Meinung nach nicht zwingend, siehe meine Antwort auf wahsagas Posting.

            Man könnte sie doch auch "husseldiguggeldu" nennen, der Effekt bleibt gleich.
            Nö. Eine ID mit dem Namen „husseldiguggeldu“ hat keinerlei praktischen Nutzen in Bezug auf die Verarbeitung und Lesbarkeit der ausgezeichneten Struktur. (Außer vielleicht, du kennzeichnest damit das berühmte Cheatah–Zitat.)

            Ja, ich gebe zu, dass "husseldiguggeldu" ein unglückliches Beispiel war :-)

            Siechfred

            --
            Hier könnte Ihre Werbung stehen.
            Musikgeschmack || Das Steuerblog  || RT 221 Erfurt-Altstadt i.V.
      2. Hallo,

        Eine ID wie „neuigkeiten“ wäre hier besser, da „rechte-spalte“ nichts über den Inhalt aussagt, sondern sich eher an die derzeitig gewünschte Darstellung anlehnt.

        kann ich ncith nachvollziehen. Inhalte können sich auch ändern und schon stimmt der name nicht mehr bzw. der Bezug und es führt zu Verwirrung. Und was ist mit einer allgemeinen template- Erstellung, bei der die Inhalte höchst variabel sein können?

        Ich verstehe nicht was ein einem

        <div id="right"></div> und / oder
        <div id="left"></div>

        eher nachteilig wäre.

        vg Mel

        1. Hallo Mel.

          Inhalte können sich auch ändern und schon stimmt der name nicht mehr bzw. der Bezug und es führt zu Verwirrung.

          Inhalte ändern sich, ständig sogar. Das stimmt. Doch die Struktur ändert sich im Idealfall nie. Ein Bereich, der Neuigkeiten kennzeichnet wird immer die Neuigkeiten enthalten. Ob er irgendwann einmal seine Position im Dokument oder in der Site ändert, ist nicht relevant.

          Und was ist mit einer allgemeinen template- Erstellung, bei der die Inhalte höchst variabel sein können?

          Was soll damit sein?

          Ich verstehe nicht was ein einem

          <div id="right"></div> und / oder
          <div id="left"></div>

          eher nachteilig wäre.

          Nichts, wenn ersteres irgendetwas Korrektes und letzteres irgendetwas Überlebendes auszeichnet. Dass eine Aussage über die Darstellung im HTML nichts zu suchen hat, versteht sich hoffentlich von selbst.

          Einen schönen Donnerstag noch.

          Gruß, Ashura

          --
          sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
          „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
          [HTML Design Constraints: Logical Markup]
          1. Hallo Gunnar™.

            Ich verstehe nicht was ein einem

            <div id="right"></div> und / oder
            <div id="left"></div>

            eher nachteilig wäre.

            Nichts, wenn ersteres irgendetwas Korrektes und letzteres irgendetwas Überlebendes auszeichnet.

            <del>Überlebendes</del><ins>Zurückgebliebenes</ins>

            Einen schönen Donnerstag noch.

            Gruß, Ashura

            --
            sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
            „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
            [HTML Design Constraints: Logical Markup]
      3. Hallo,

        Hallo Felix.

        <div id="rechte-spalte">

        <h2>Neuigkeiten</h2>
           <p>Neues Layout für meine Seite</p>
        </div>

        
        >   
        > Eine ID wie „neuigkeiten“ wäre hier besser, da „rechte-spalte“ nichts über den Inhalt aussagt, sondern sich eher an die derzeitig gewünschte Darstellung anlehnt.  
          
        Problematisch wird es, wenn #rechte-spalte irgendwann noch etwas anderes als Neuigkeiten enthält. Wenn ich dann diese Inhalte mit einem div gruppiere, dann nicht unbedingt, weil sie inhaltlich zusammengehören - sondern weil ich sie lediglich als visuellen Block mit einer ähnlichen Formatierung versehen will, z.B. beide in der »rechten Spalte« anordnen will. Solche div-Elemente ohne wirkliche strukturelle Bedeutung nenne ich Präsentationsgliederungen.  
          
        Dann kommt die Frage auf, wie ich diese »Divisions« bezeichne. Manchmal gibt es losen Zusammenhang zwischen den Inhalten wie etwa bei id="sidebar", wobei der Bezeichner dann bewusst nichts konkretes über den Inhalt sagt. Andernfalls ist man ziemlich aufgeschmissen. id="rechte-spalte" ist natürlich Käse, weil es eine mögliche Präsentation durch die Bezeichner im Markup festschreibt. Wenn ich irgendwann über das ausgelagerte Stylesheets die Präsentation ändern will, so kann die rechte Spalte schnell zur linken Spalte werden. Das Markup müsste man dann auch ändern. Genau das sollte durch eine kluge Auszeichnung und Benennung vermieden werden, aber einfach ist das selten.  
          
        Mathias
        
        -- 
        [Visitenkarte](http://community.de.selfhtml.org/visitenkarten/view.php?key=17) · [SELFHTML Weblog](http://aktuell.de.selfhtml.org/weblog/)
        
  3. Tabellenlayouts sind out. Positionierte DIVs sind out. Sinnvolle Nutzung von HTML und CSS ist in.

    • Sven Rautenberg"

    Was bedeutet "Positionierte DIVs sind out" bzw. "Sinnvolle Nutzung von HTML und CSS ist in" bezüglich des Layouts im Detail?

    div-Container können im Style-Sheet positioniert werden. Ist das jetzt schön oder unschön? Ich bin verwirrt.

    Sinnvolles HTML bedeutet, daß man mit HTML die logische Struktur einer Seite auszeichnet, und das (erstmal) unabhängig vom späteren Layout. Überschriften sollten mit h1 - h6 ausgezeichnet werden, Absätze mit p, Listen mit ul oder ol, Hervorhebungen im Text je nach Wichtigkeit mit em oder gar strong usw. Das ganze nennt man auch semantisches Markup.

    Wer z.B. ein Tabellenlayout à la
    <table>
     <tr>
      <td>
     </tr>
    </table>

    in eine Div-Suppe
    <div class="tabelle" style="...">
     <div class="zeile">
      <div class="tabzelle" style="...">
      </div>
     </div>
    </div>

    überführt, hat nichts gewonnen, da keine weiteren Informationen über die Struktur der Seite hinzugefügt wurden. Abgesehen von prinzipiellen oder ästhetischen Gründen, sind semantische Informationen auch für Suchmaschinen wichtig, da diese z.B. Überschriften stärker gewichten usw. Zudem können Vorlesegeräte für Blinde gut strukturierte Seiten besser vorlesen.

    Für das Aussehen der Seite sollte allein CSS verantwortlich sein. Nun ist die ganz strikte Trennung von Inhalt und Form aus verschiedenen Gründen nicht immer hundertprozentig einzuhalten (der Hauptgrund ist m.E. zur Zeit ein weitverbreitetes Stück Software, daß sich fälschlicherweise als Browser ausgibt). Man muß gelegentlich im
    HTML-Quellcode mal das ein oder andere Element einfügen, meist div oder span einfügt, das zwar keine Bedeutung für die logische Struktur der Seite hat, jedoch für das Layout unabdingbar ist.

    Zur Positionierung möchte ich noch folgendes anführen: was noch häufig gemacht wird, ist pixelgenaues Positionieren. Also beispielsweise: linke Navigationsleiste 250px breit, Inhalt 500px breit, Schriftgröße 14px usw. Dies hat den Nachteil, daß die Schriftgröße vom Benutzer entweder nicht geändert werden kann, oder daß bei größerer Schriftgröße die Navigationselemente nicht mehr in den 250px breit gebliebenen Navigationscontainer passen. Deshalb ist die Verwendung relativer Größenangaben meist besser: wer der Navigationsleiste eine Breite von 15em gibt, hat einen Bereich, in den immer 15 mal der Buchstabe m reinpaßt, mit der Konsequenz, daß wenn der Benutzer die Schriftgröße verdoppelt, sich auch die Breite der Navigationsleiste verdoppelt.

  4. Hallo,

    Vielen Dank für die ausführlichen Erläuterungen. Verwirrung beseitigt, vorheriges Verständnis wieder hergestellt.

    Viele Grüße,

    Stefan

  5. Hallo,

    Was bedeutet "Positionierte DIVs sind out" bzw. "Sinnvolle Nutzung
    von HTML und CSS ist in" bezüglich des Layouts im Detail?

    es bedeutet nichts, da in und out, auch wenn es noch so gut gemeint ist, keine qualitativ gesehen sinnvollen Kriterien für das Erstellen von "irgendwas" ist.

    Chräcker

    --
    Erinnerungen?
    zu:]
    1. Hallo.

      Was bedeutet "Positionierte DIVs sind out" bzw. "Sinnvolle Nutzung
      von HTML und CSS ist in" bezüglich des Layouts im Detail?

      es bedeutet nichts, da in und out, auch wenn es noch so gut gemeint ist, keine qualitativ gesehen sinnvollen Kriterien für das Erstellen von "irgendwas" ist.

      Von "irgendwas" vielleicht nicht, aber ganz sicher von sehr vielen konkreten Dingen.
      MfG, at

  6. Hallo Stefan,

    Was bedeutet "Positionierte DIVs sind out"

    Siehe meine Antwort auf die Frage Was spricht eigentlich gegen absolute Positionierung?

    "Sinnvolle Nutzung von HTML und CSS"

    Ein Dokument, das aus fehlerfreiem (X)HTML strict besteht, dessen Stylesheet ebenfalls fehlerfrei ist und das vom PDA bis zum Riesendisplay bei beliebiger Schriftgröße gut benutzbar ist, erfüllt diese Kriterien.

    div-Container können im Style-Sheet positioniert werden. Ist das jetzt schön oder unschön?

    Weder noch. Die Frage ist nicht spezifisch genug.

    Grüße
     Roland

    1. Hallo Orlando.

      div-Container können im Style-Sheet positioniert werden. Ist das jetzt schön oder unschön?

      Weder noch. Die Frage ist nicht spezifisch genug.

      Also gibt es nur eine Antwort: 42.

      Einen schönen Donnerstag noch.

      Gruß, Ashura

      --
      sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
      „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
      [HTML Design Constraints: Logical Markup]
    2. Hallo.

      "Sinnvolle Nutzung von HTML und CSS"

      Ein Dokument, das aus fehlerfreiem (X)HTML strict besteht, dessen Stylesheet ebenfalls fehlerfrei ist und das vom PDA bis zum Riesendisplay bei beliebiger Schriftgröße gut benutzbar ist, erfüllt diese Kriterien.

      Ja, es erfüllt genau die von dir aufgezählten Kriterien. Sinnvoll muss das alles aber nicht sein.
      MfG, at