Artikel beurteilen
0 3 
molily
0 1 0 molily
0 0 0 0
0
Artikel beurteilen
Hallo!
Da ich heute nicht viel zu tun hatte, habe ich mich mal daran versucht, einen Artikel über logische Strukturierung von HTML-Seiten. Also weg von DIV-Suppen und Tabellenlayout. Könntet ihr mir vielleicht sagen, was ich besser oder anders machen könnte? Ich bin dankbar für jede hilfreiche Antwort.
Hier der Artikel:
II. Nachteile von Tabellenlayout und DIV-Suppe
II.I Nachteile von Tabellenlayout
Bevor CSS erfunden wurde, wurde die Darstellung von HTML-Seiten mit Tabellen
umgesetzt. Die Nachteile von Layouttabellen sind zahlreich. Unteranderem sind
folgende Punkte zu nennen:
* Layouttabellen passen sich nicht der Größe des Browserfensters an
* Layouttabellen sind für Screenreader absolut ungeeignet und im wahrsten
Sinne des Wortes unleserlich
* Angenommen Du hast deine Seite mit Tabellen strukturiert. Jetzt
gefällt dir aber nicht, dass das Menü rechts ist. Jetzt kannst du bei
X Unterseiten mühsam das HTML umschreiben. Wenn du dein Layout mit CSS
gestaltet hast, dann genügt es eventuell eine einzige Eigenschaft zu ändern.
Wenn du dann noch idealerweise ein externes Stylesheet benützt, dann hast
du es am einfachsten.
* Tabellenlayouts sind äußerst ungeeignet für die Darstellung von HTML-Seiten
auf PDAs und Handhelds.
All diese Gründe sprechen gegen das Verwenden von Layouttabellen. Allerdings
werden bei relativ vielen Seiten immer noch Tabellen genutzt um das richtige
Layout zu erreichen.
II.II Nachteile von DIV-Suppen
Viele Umsteiger von Tabellenlayouts auf CSS-Layouts produzieren erstmal eine
ordentliche DIV-Suppe. Allerdings sind diese Umsteiger stolz darauf, dass sie
den Umstieg von Tabellenlayouts auf ein CSS-Design geschafft haben. Dabei
setzen sie ein CSS-Layout mit einem semantisch korrektem Design gleich. Aber
nicht jedes Layout, das mit Hilfe von CSS erstellt wurde, ist perfekt. Eine
DIV-Suppe hat folgende Eigenschaften und Nachteile.
* Der Code besteht nur aus DIV-Elementen und verwendet selten Listen,
Überschriften oder sonstige Elemente, die für eine sinnvolle Auszeichnung
von Inhalten steht.
* Der Code ist oft absolut unübersichtlich und für einen Aussenstehenden oft
unverständlich.
* Der Code ist nahezu unwartbar und kann kaum erweitert werden, da (wie in
Punkt 2 genannt) er Code total unübersichtlich ist.
Diese DIV-Suppen sind oft nur geringfügig besser als Tabellenlayouts. Das einzig
wahre, was das Herz eines verwöhnten HTML-Kenners höher schlagen lässt ist:
Semantisches HTML :-) Womit wir schon beim nächsten Punkt wären.
III. Was ist logisch strukturiertes HTML?
Es ist ganz kurz erklärt, was logisch strukturiertes HTML ist: logisch strukturiertes HTML
nutzt alle Möglichkeiten aus, die ihm vom W3C gegeben wurden. Soll heißen: Wenn du
Listen brauchst, dann benütze eine Liste. Wenn du einen Absatz brauchtst, dann benutze
<p>. Wenn du ein Menü rechts haben willst, dann nimm es per float aus dem Fluss.
Dabei ist zu beachten, dass zum Beispiel ein Menü eine Aufzählung bzw. Liste von Links ist.
Das bedeudet, dass es kein semantisch korrektes HTML ist, wenn man dazu dann viele DIVs
nimmt. Sondern vielmehr eine Liste. An dieser Stelle möchte ich auch anmahnen, dass es
durchaus sinnvoll ist über eine Seite den Validator zu schicken. Validiertes HTML trägt
ungemein zur Steigerung der Korrektheit bei ;-)
IV. Logisch strukturiertes HTML in der Praxis
Jetzt kommt etwas Praxis in diesen Artikel. Ich zeige nun, wie man logisch strukturiertes HTML
umsetzt. Wer allerdings noch nie viel mit CSS gemacht hat, der schaut sich bitte das CSS-Kapitel
von SELFHTML an. Das SELFHTML-Kapitel vermittelt die nötigen Grundlagen.
Hier ist ein semantisch absolut sinnloses Codebeispiel dargestellt:
<body>
<div id="headline">Überschrift</div>
<div id="menu">
<div> Menüpunkt 1 </div>
<div> Menüpunkt 2 </div>
<div> Menüpunkt 3 </div>
<div> Menüpunkt 4 </div>
</div>
<div id="content">
<div style="padding-bottom:1em">
Absatz 1
</div>
<div style="padding-bottom:1em">
Absatz 2
</div>
</div>
</body>
Die zugehörige CSS-Datei spielt eine untergeordnete Rolle in diesem Beispiel, da es sich
schließlich um logisch strukturiertes HTML geht. Wenn man diesen HTML-Quelltext in korrektes
HTML umsetzt, dann sieht das in etwa so aus:
<body>
<h1>Überschrift</h1>
<ul>
<li> Menüpunkt 1 </li>
<li> Menüpunkt 2 </li>
<li> Menüpunkt 3 </li>
<li> Menüpunkt 4 </li>
</ul>
<div id="content">
<p>
Absatz 1
</p>
<p>
Absatz 2
</p>
</div>
</body>
Siehst Du den Unterschied? Der Code ist um einiges übersichtlicher und ist weitaus sinnvoller
als die DIV-Suppe von Beispiel 1. Wenn man sich die Beispiele ohne CSS anschaut, dann sieht
man wieder den riesigen Unterschied zwischen den einzelnen Darstellungsformen.
Das war es. Danke schön für eure Mühe und bitte zerreisst mich nicht *g* Bei den Codebeispielen, wird dann auch ein Link zu einem Dokument sein, das dann den Code darstellt. Das zeigt dann IMHO noch besser den Sinn von gutem HTML :-)
ciao, ww
--
Dies ist eine sehr einfache und effektive Sicherheitsstufe, aber nicht perfekt. Denn wenn mehrere User über eine Leitung ins Internet gehen, haben für den Webserver alle User die selbe IP. Und dann wirkt diese Sicherheitsstufe nicht mehr. Aber zumindest könnt ihr demjenigen, der euch die Session-ID geklaut hat, eins in die Fresse hauen.
http://tut.php-q.net/login.html
Dies ist eine sehr einfache und effektive Sicherheitsstufe, aber nicht perfekt. Denn wenn mehrere User über eine Leitung ins Internet gehen, haben für den Webserver alle User die selbe IP. Und dann wirkt diese Sicherheitsstufe nicht mehr. Aber zumindest könnt ihr demjenigen, der euch die Session-ID geklaut hat, eins in die Fresse hauen.
http://tut.php-q.net/login.html
-
Hellihello wichtel,
http://www.thefutureoftheweb.com/blog/2006/2/writing-semantic-html kennst du vielleicht schon?
Gruß,
frankx
-
Hallo!
http://www.thefutureoftheweb.com/blog/2006/2/writing-semantic-html kennst du vielleicht schon?
Nein. Danke für den Link.
ciao, ww
--
Dies ist eine sehr einfache und effektive Sicherheitsstufe, aber nicht perfekt. Denn wenn mehrere User über eine Leitung ins Internet gehen, haben für den Webserver alle User die selbe IP. Und dann wirkt diese Sicherheitsstufe nicht mehr. Aber zumindest könnt ihr demjenigen, der euch die Session-ID geklaut hat, eins in die Fresse hauen.
http://tut.php-q.net/login.html
-
-
Hallo,
* Layouttabellen passen sich nicht der Größe des Browserfensters an
Natürlich können sie das, wenn man sie dazu bringt.
* Layouttabellen sind für Screenreader absolut ungeeignet und im wahrsten
Sinne des Wortes unleserlichAch, das musste kommen. Trotzdem ist es absoluter Unsinn. Bitte, lies dir Diskussionen im hiesigen Archiv von vor vier Jahren durch, da wurde diese Frage diskutiert. Das Thema Layouttabellen vs. CSS-Spaltenlayout ist heute durch und viele, die diese Diskussionen nicht erlebt haben, glauben, längst widerlegte Mythen wären Argumente.
Screenreader können Layouttabellen problemlos vorlesen. Der Punkt ist eher, dass bei Layouttabellen die Spaltenaufteilung die Reihenfolge im Quelltext determiniert, bei CSS-Layout ist das nicht der Fall (siehe http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout).
* Tabellenlayouts sind äußerst ungeeignet für die Darstellung von HTML-Seiten
auf PDAs und Handhelds.Ist auch ziemlich undifferenziert, mittlerweile sind Browser verbreitet, die ohne Probleme Tabellen- und float-Layouts serialisieren bzw. zusammenstauchen können, man denke an Operas Small Screen Rendering.
Viele Umsteiger von Tabellenlayouts auf CSS-Layouts produzieren erstmal eine
ordentliche DIV-Suppe. Allerdings sind diese Umsteiger stolz darauf, dass sie
den Umstieg von Tabellenlayouts auf ein CSS-Design geschafft haben. Dabei
setzen sie ein CSS-Layout mit einem semantisch korrektem Design gleich.»Semantisch korrektes Design« ist semantischer Unsinn. ;) Es geht einfach um bedeutungsreiche (das meint »semantisch«) Textauszeichnung. Das Wort Design würde ich nicht mit diesem Adjektiv belegen.
Diese DIV-Suppen sind oft nur geringfügig besser als Tabellenlayouts.
div-Suppen sind genausowenig semantische Auszeichnung, ja. Dennoch steckt hinter einer div-Suppe meist ein CSS-Layout, das entsprechend auch Vorteile gegenüber einer gleichwertigen Layouttabellen-Lösung hat.
<body>
<div id="headline">Überschrift</div><div id="menu">
<div> Menüpunkt 1 </div>
<div> Menüpunkt 2 </div>
<div> Menüpunkt 3 </div>
<div> Menüpunkt 4 </div>
</div>
<div id="content">
<div style="padding-bottom:1em">
Absatz 1
</div>
<div style="padding-bottom:1em">
Absatz 2
</div>
</div>
</body>Klar, das ist natürlich künstlich zugespitzt. Ich finde, sowas geht am Kern des Problems vorbei. div-Suppe entsteht nicht (nur) bzw. eher selten, wenn jemand die anderen, passenderen, genaueren HTML-Elemente einfach nicht kennt und HTML nur als Markierungssprache sieht, die lediglich der Adressierbarkeit durch das Stylesheet dient. div-Suppe entsteht m.M.n. in der Praxis vor allem, wenn immer mehr Elemente als Angriffspunkte für CSS und JavaScript eingefügt werden - man sehe sich mal große Sites an. Einige Elemente davon sind je nach Komplexität der Gestaltung und für die JavaScript-Interaktivität nötig, andere div-Elemente sind überflüssig. Eine div-Suppe wie im obigen Beispiel ist da glaube ich weniger ein reales Problem, gegen das man anschreiben und Leute aufklären müsste.
Mathias
-
Hallo!
Danke schön für deine Antwort. Hat mir sehr geholfen. Danke!
ciao, ww
--
Dies ist eine sehr einfache und effektive Sicherheitsstufe, aber nicht perfekt. Denn wenn mehrere User über eine Leitung ins Internet gehen, haben für den Webserver alle User die selbe IP. Und dann wirkt diese Sicherheitsstufe nicht mehr. Aber zumindest könnt ihr demjenigen, der euch die Session-ID geklaut hat, eins in die Fresse hauen.
http://tut.php-q.net/login.html -
hi,
Klar, das ist natürlich künstlich zugespitzt. Ich finde, sowas geht am Kern des Problems vorbei.
Das kommt darauf an, an wen sich der Artikel in erster Linie richtet.
div-Suppe entsteht nicht (nur) bzw. eher selten, wenn jemand die anderen, passenderen, genaueren HTML-Elemente einfach nicht kennt und HTML nur als Markierungssprache sieht, die lediglich der Adressierbarkeit durch das Stylesheet dient.
Genau das erlebt man hier beinahe täglich - dass Anfänger irgendwo darauf hingewiesen wurden, dass "Tabellen böse" seien, und man heute "Div-Layouts" mache.
Klassiches Beispiel:
<div class="headline">Willkommen auf meiner Seite</div>div-Suppe entsteht m.M.n. in der Praxis vor allem, wenn immer mehr Elemente als Angriffspunkte für CSS und JavaScript eingefügt werden - man sehe sich mal große Sites an.
So weit sind viele der Anfänger, die mit ihren Problemen hierher kommen, noch gar nicht.
Eine div-Suppe wie im obigen Beispiel ist da glaube ich weniger ein reales Problem, gegen das man anschreiben und Leute aufklären müsste.
Kommt auf die Zielgruppe an.
Welche HTML-Elemente es gibt, beschreibt SELFHTML natürlich sehr ausführlich. Liest sich aber kein Anfänger komplett durch, da viel zu viel auf einmal, und zu theoretisch.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
hallo,
Genau das erlebt man hier beinahe täglich - dass Anfänger irgendwo darauf hingewiesen wurden, dass "Tabellen böse" seien, und man heute "Div-Layouts" mache.
Ja, leider. Dabei ist aber die Qualität solcher Hinweise zu beachten: Cheatah (und ein paar andere, die man ernstnehmen kann) wird niemals aussagen, daß Tabellen generell "böse" seien. Es wird nur mit Vehemenz darauf hingewiesen, daß Tabellen heute eben für tabellarische Inhalte genutzt werden sollten, und nicht mehr, wie vor den "CSS-Zeiten", auch für Layoutaufgaben. Das halte ich übrigens durchaus für richtig. Dummerweise gibt es aber auch hin und wieder jemanden, der grundsätzlich Tabellen als "böse" verdammt und einfach nicht begriffen hat, daß das Forum bei solchen Nachfragen eigentlich (auch) die Aufgabe hat, das Verständnis für Tabellen (wieder) geradezurücken. Tabellen haben ihre Berechtigung; aber eben für den Zweck, für den sie einmal erfunden wurden.
Welche HTML-Elemente es gibt, beschreibt SELFHTML natürlich sehr ausführlich. Liest sich aber kein Anfänger komplett durch, da viel zu viel auf einmal, und zu theoretisch.
Was meinst du mit "zu theoretisch"?
Grüße aus Berlin
Christoph S.
-
hi,
Welche HTML-Elemente es gibt, beschreibt SELFHTML natürlich sehr ausführlich. Liest sich aber kein Anfänger komplett durch, da viel zu viel auf einmal, und zu theoretisch.
Was meinst du mit "zu theoretisch"?
Zu theoretisch für den Anfänger, der schnell Ergebnisse erzielen will.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
-
Hi
Damit jetzt div's nicht wie Tabellen plötzlich allgemein 'verteufelt' werden, meine ich, wäre ein kurzer Abschnitt darüber, wofür denn div's verwendet werden sollen, sinnvoll.
Vielleicht sollten div's (und span's) [grundsätzlich | tendenziell eher] für Teile der Seite verwendet werden, die keinen eigentlichen Inhalt bieten? Sprich Layoutelemente wie abgerundete Ecken, grafische Rahmen etc.
Nur so 'ne Theorie...
Gruss,
Mathias-
Hellihello Mathias,
Vielleicht sollten div's (und span's) [grundsätzlich | tendenziell eher] für Teile der Seite verwendet werden, die keinen eigentlichen Inhalt bieten? Sprich Layoutelemente wie abgerundete Ecken, grafische Rahmen etc.
Oder für inhaltliche Zusammenhänge, die auch grafisch sichtbar gemacht werden sollen wie
<div class="eingerahmt"> <h2>Untertitel</h2> <p>Untertitel-Absatz-Inhalt</p> <p>Untertitel-Absatz-Inhalt</p> </div> ~~~? Gruß, frankx-
Lieber frankx,
Oder für inhaltliche Zusammenhänge, die auch grafisch sichtbar gemacht werden sollen wie
<div class="eingerahmt">
was ist an "eingerahmt" \_inhaltlich\_? Eher so. `<div class="infobox">`{:.language-html} Liebe Grüße aus [Ellwangen](http://www.ellwangen.de/), Felix Riesterer. -- ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hellihello Felix,
was ist an "eingerahmt" _inhaltlich_? Eher so.
<div class="infobox">Ach, die Klassen auch inhaltlich plausibel? Von mir aus gerne (;-). Aber dann woh eher: "Unterkapitel_zweiter_Ordnung". Das ist etwas lang, ich weiß. Trifft aber im Grunde das Thema, was ich letzlich mit Ingo auch mal am Wickel hatte. In XML wäre es sowas wie <unterkapitel></unterkapitel>.
Gruß,
frankx
-
-
-
Hallo,
Vielleicht sollten div's (und span's) [grundsätzlich | tendenziell eher] für Teile der Seite verwendet werden, die keinen eigentlichen Inhalt bieten? Sprich Layoutelemente wie abgerundete Ecken, grafische Rahmen etc.
Ich würde dagegenhalten: divs und spans dienen der allgemeinen, groben Strukturierung, wenn jeweils kein feineres, aussagekräftigeres Element existiert.
Wenn man div-Suppe vermeiden will, sollte man div-Elemente eben nicht als »Präsentations-Tags« verstehen (das steckt nämlich hinter »divs und spans für Layoutelemente nutzen«). Wenn ich mit div-Elementen ein Dokument gliedere, sind das durchaus »semantische« Auszeichnungen. Man muss halt den Übergang kennen, bei dem solche inhaltliche Gliederungen in reine »Präsentationsgliederungen« übergehen. Wenn man dutzende divs verschachtelt, um genug CSS-Angriffspunkte zu haben, um abgerundete Ecken und sonstige Präsentationsfragen zu lösen, dann ist das erst einmal kein semantisches Markup. Natürlich kann man auf solche Auszeichnungen manchmal nicht verzichten, aber überhand nehmen sollte sie auch nicht.
Mathias
-
Hallo!
Danke euch beiden! Vielen Dank für eure Hilfe und für die Tips.
ciao, ww
--
Dies ist eine sehr einfache und effektive Sicherheitsstufe, aber nicht perfekt. Denn wenn mehrere User über eine Leitung ins Internet gehen, haben für den Webserver alle User die selbe IP. Und dann wirkt diese Sicherheitsstufe nicht mehr. Aber zumindest könnt ihr demjenigen, der euch die Session-ID geklaut hat, eins in die Fresse hauen.
http://tut.php-q.net/login.html -
Hi,
wofür stehen <div> und <span> genau. <p> meine ich zu "Paragraph" übersetzen zu können und <ul> zu "Unordered List" aber <div> ????
Gruss
frank-
hi,
wofür stehen <div> und <span> genau. <p> meine ich zu "Paragraph" übersetzen zu können und <ul> zu "Unordered List" aber <div> ????
Ich könnte mir vorstellen, dass Div von divider kommt, Teiler, Verteiler, Trennwand, oder auch von to divide = abteilen, aufteilen, einteilen - und span kann auf Englisch sogar wörtlich mit "Bereich" übersetzt werden; andere Deutungen wie to span = sich über etwas erstrecken, umfassen, umspannen sind wohl auch denkbar.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Lieber wahsaga,
Ich könnte mir vorstellen, dass Div von divider kommt
... und wie steht's mit "diverse"?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo!
Ich könnte mir vorstellen, dass Div von divider kommt
... und wie steht's mit "diverse"?
... oder division? Ich meine, irgendwo gelesen zu haben, dass es für division steht.
ciao, ww
--
Dies ist eine sehr einfache und effektive Sicherheitsstufe, aber nicht perfekt. Denn wenn mehrere User über eine Leitung ins Internet gehen, haben für den Webserver alle User die selbe IP. Und dann wirkt diese Sicherheitsstufe nicht mehr. Aber zumindest könnt ihr demjenigen, der euch die Session-ID geklaut hat, eins in die Fresse hauen.
http://tut.php-q.net/login.html-
hi,
Ich könnte mir vorstellen, dass Div von divider kommt
... und wie steht's mit "diverse"?
... oder division?
Ja, das wäre in etwa analog zum divider - division als Ergebnis des dividens :-)
diverse erscheint mir subjektiv weniger sinnvoll.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Servus,
Dank an Euch alle (frankx, wahsaga, wuchterwichel, felix :))!
Division gewinnt für mich einstimmig mit 2 Stimmen ;)
.. und wieder eine Bildungslücke gestopft ..
Frank
-
-
-
-
-
Hellihello,
Mit <div> leiten Sie ein allgemeines Block-Element ein, in das Sie mehrere andere Block-Elemente einschließen können (div = division = Bereich). Alles, was zwischen diesem Tag und dem abschließenden </div> steht, wird als Teil des Bereichs interpretiert.
http://de.selfhtml.org/html/text/bereiche.htmGruß,
frankx
-
-
Wenn man dutzende divs verschachtelt, um genug CSS-Angriffspunkte zu haben, um abgerundete Ecken und sonstige Präsentationsfragen zu lösen, dann ist das erst einmal kein semantisches Markup. Natürlich kann man auf solche Auszeichnungen manchmal nicht verzichten, aber überhand nehmen sollte sie auch nicht.
Schön, dass du's mal ansprichst, denn was beim besagten Div-Suppen-vermeiden, das hier so oft gepredigt wird, in der Praxis oft auf der Strecke bleibt, ist, dass es große Dokumente durchaus erfordern bzw sinnvoll machen, dass möglichst viele Elemente (aus Layoutsicht) direkt und auch gruppiert angesprochen werden können, und dass es Modul-/Containerstrukturen gibt, die den zahlreichen Einzelelementen die Styles "abnehmen". Denn wenn Styleangaben zu direkt den einzelnen Elementen anhängen, leidet natürlich die Erweiterbarkeit und man läuft u.U. in Gefahr, dass ein Webangebot trotz strikter Trennung von Form und Inhalt regelrecht "unerweiterbar" wird, weil es zu - nennen wir es mal kleinkariert - ausgezeichnet wurde.
Ich würde also im Zweifelsfall immer eher zur div-Suppe als zur div-Wüste neigen. Aber natürlich immer unter der Prämisse, dass jedes div sinnvoll gesetzt wird und keine unnötigen Strukturen entstehen.
Viele Grüße!
_ds
--
Den Winter erkennt man recht zuverlässig an der Konsistenz der Nutella. Beim Nusspli wird's ähnlich sein.
Top 5-Blog, The Importance Of Being Idle (2)
-
-