Philipp Grashoff: Wie viele verschiedene HTML-Tags verwendet ihr?

Hi Forumler,

vielleicht eine komische Frage... mir ist aber grade eben aufgefallen, dass ich bei meiner neusten hp im body lediglich die Tags <div>, <span> (diese beiden Massenweise, mit allen Moeglichen Klassen und Ids usw), <a>, <form> mit unterelementen,<table> mit unterelementen, <img>, <p> und <br> verwendet habe, wobei es mir eigentlich nur um <div> und <span> geht... anstatt sachen wie <h1>, <h2>, <strong> usw. habe ich nur verschieden formatierte <div>s und <span>s genommen...
nun wollte ich mal wissen, ob ihr auch so verdivte spanfetischisten seid, oder ob ihr (was ja eigentlich auch logischer ist) auch Dinge wie <h1> benutzt.

MFG

Philipp

  1. Hallo Philipp,

    nun wollte ich mal wissen, ob ihr auch so verdivte spanfetischisten seid, oder ob ihr (was ja eigentlich auch logischer ist) auch Dinge wie <h1> benutzt.

    meine Meinung und auch mein Ziel bei der Erstellung von Seiten:

    -> soviel wie nur möglich logische Struktur, d.h. wenn notwendig
       alle HTML-Elemente verwenden, die es gibt und wo sich sinnvoll
       sind: http://www.w3.org/TR/html401/index/elements.html
    -> sowenig wie möglich Einsatz von div- und span-Elementen
    -> sowenig wie möglich Einsatz von Klassen
    -> sowenig wie möglich Einsatz von IDs

    In dieser Reihenfolge ;-)

    Viele Grüße,
    Stefan

    1. Hi Stefan,

      das relativierende "eigentlich" hat seinen Grund gehabt:
      Ich komme mit vielen Klassen und wenig verschiedenen Elementen einfach besser zurecht, fuer mich erschließt sich die Stuktur dann aus dem Klassennamen, die dann sowas wie "tdlu" oder "cwtr" sind... erkennt man doch gleich, was gemeint ist, oder?

      MFG

      Philipp

      1. das relativierende "eigentlich" hat seinen Grund gehabt:
        Ich komme mit vielen Klassen und wenig verschiedenen Elementen einfach besser zurecht, fuer mich erschließt sich die Stuktur dann aus dem Klassennamen, die dann sowas wie "tdlu" oder "cwtr" sind... erkennt man doch gleich, was gemeint ist, oder?

        Du vielleicht, aber ein Browser, der nicht mit CSS umgehen kann, sieht da nur eine ziemlich große Textwüste. Genausowenig, wie Tabellen für's Layout gedacht waren, sind <div> und <span> als Ersatz für <hx> und Co gedacht (wobei ich mich eigentlich frage, was an einem halben Dutzend Tags schwerer zu merken ist als an zweien).

        Gruß,
          soenk.e

      2. Hallo Philipp,

        Ich komme mit vielen Klassen und wenig verschiedenen Elementen einfach besser zurecht, fuer mich erschließt sich die Stuktur dann aus dem Klassennamen, die dann sowas wie "tdlu" oder "cwtr" sind... erkennt man doch gleich, was gemeint ist, oder?

        schalte einfach mal CSS in deinem Browser ab, geht in Opera sehr
        einfach mit [STRG]+[G] und schaue dann, ob da wirklich die logische Struktur
        des Dokumentes vor Dir erscheint. Also Tabellen, wo sie hingehören (bitte
        jetzt keine neue Diskussion zu dem Thema *g*), Absätze wo sie sinnvoll sind
        usw.
        Wenn es stimmt, dann kannst Du gern soviel DIVs, SPANs, Klassen und IDs
        einbauen, wie Du möchtest, ob es allerdings damit übersichtlicher wird,
        ich weiß nicht ;-)

        Ein Beispiel:
        Auf einer Seite sollen die Links in einer Tabelle anders gestaltet sein,
        als die übrigens Links auf dieser Seite. Die meisten Leute werden da eine
        Klasse für diese Links definieren, ich halte diese Variante für effektiver:

        table a { [CSS-Definition] }

        Natürlich muß man sich dann vorher genau überlegen, was man wie macht, wenn
        man genau plant, ist das Ergebnis ein sehr übersichtlicher HTML-Quelltext
        und auch die CSS-Datei (meist extern) ist sehr viel besser lesbar :-)

        Viele Grüße,
        Stefan

      3. Hi Philipp,

        Ich komme mit vielen Klassen und wenig verschiedenen Elementen einfach besser zurecht, fuer mich erschließt sich die Stuktur dann aus dem Klassennamen, die dann sowas wie "tdlu" oder "cwtr" sind... erkennt man doch gleich, was gemeint ist, oder?

        ohne CSS ist deine Variante dann aber eine Textwüste. Wenn eine Seite ohne CSS immer noch gut strukturiert ist, hast du's richtig gemacht. Ich verwende eigentlich <div> für klar getrennte Bereiche, <span> eher selten. Sonst eben alles, was man so braucht und sinnvoll ist, wie <h1> bis <h3>, <ul>, <li>, <p> usw. Nur Tabellen kommen mir nicht in's Haus, die will (und brauche) ich nicht. Gezählt habe ich die Tags jetzt aber nicht ;)

        LG Orlando

        --
        SELF-TREFFEN 2002
        http://www.rtbg.de/selftreffen/
        http://www.megpalffy.org/temp/penneninhh.html

      4. Ich komme mit vielen Klassen und wenig verschiedenen
        Elementen einfach besser zurecht, fuer mich erschließt
        sich die Stuktur dann aus dem Klassennamen, die dann
        sowas wie "tdlu" oder "cwtr" sind... erkennt man doch
        gleich, was gemeint ist, oder?

        ich nicht. :-(

      5. Hallo,

        Ich komme mit vielen Klassen und wenig verschiedenen Elementen einfach besser zurecht, fuer mich erschließt sich die Stuktur dann aus dem Klassennamen, die dann sowas wie "tdlu" oder "cwtr" sind... erkennt man doch gleich, was gemeint ist, oder?

        Da frage ich mich doch, wo der Vorteil liegen soll. Einmal mußt Du Dir ein Tag merken, einmal einen selbst erfundenen Klassennamen. Beim Schreiben wird's auch mehr. Und Andere können mit tdlu und cwtr ohne zusätzlicher Erklärung deinerseits auch nichts anfangen. Von Anwendungen wie Suchmaschinen usw. ganz zu schweigen.

        Grüße
          Klaus

  2. hi

    bei mir gibt's primär <h*> und <p>, mit <div>s (die jeweils eine ID haben) zusammengefasst. Sonst eigentlich nix (naja, die "Spezialtags" <a>, <form>, <img/>..) hin und wieder mal ein <span>, wenn es wirklich nicht ohne geht. Das war's.
    <table> kommt bei mir sehr selten vor - auf linuxfaqs.de ist afaik nur eine, in der Hardware-DB natürlich mehr.

    Grüße aus Bleckede

    Kai

  3. Hi Forumler,

    Tach,

    vielleicht eine komische Frage... mir ist aber grade eben aufgefallen, dass ich bei meiner neusten hp im body lediglich die Tags <div>, <span> (diese beiden Massenweise, mit allen Moeglichen Klassen und Ids usw), <a>, <form> mit unterelementen,<table> mit unterelementen, <img>, <p> und <br> verwendet habe, wobei es mir eigentlich nur um <div> und <span> geht... anstatt sachen wie <h1>, <h2>, <strong> usw. habe ich nur verschieden formatierte <div>s und <span>s genommen...

    Du handelst also gegen das W3C. Siehe
    http://www.w3.org/TR/REC-CSS2/selector.html#class-html, die grüne Notiz

    nun wollte ich mal wissen, ob ihr auch so verdivte spanfetischisten seid, oder ob ihr (was ja eigentlich auch logischer ist) auch Dinge wie <h1> benutzt.

    Unter anderem aus oben genanntem Grund: so viele wie nötig.

    Andreas

  4. Hallo Philipp,

    ich persönlich verwende statt <span class...> lieber <em> oder <strong>,
    die ich dann über CSS formatiere. Der Grund ist ganz einfach,
    daß ich zu faul bin, für letztendlich doch immer wieder die gleichen Formatierungen so viel zu tippen.
    Angenehme Nebeneffekte: Der Quelltext wird übersichtlicher und
    die Hervorhebung ist selbst in nicht CSS-fähigen Browsern sichtbar.
    <div> verwende ich zwar auch ausgiebig, aber ersetze damit keine Tags wie <h1> bis <h6>,
    aus den gleichen Gründen wie oben angegeben.

    Schönen Gruß

    Rainer

    1. ich persönlich verwende statt <span class...> lieber <em> oder <strong>,
      die ich dann über CSS formatiere. Der Grund ist ganz einfach,
      daß ich zu faul bin, für letztendlich doch immer wieder die gleichen Formatierungen so viel zu tippen.
      Angenehme Nebeneffekte: Der Quelltext wird übersichtlicher und
      die Hervorhebung ist selbst in nicht CSS-fähigen Browsern sichtbar.
      <div> verwende ich zwar auch ausgiebig, aber ersetze damit keine Tags wie <h1> bis <h6>,
      aus den gleichen Gründen wie oben angegeben.

      Hallo Rainer!
      Die Faulheit ist so eine Sache...

      Allerdings fällt mir dazu vor allem das hier ein:
      [link=http://selfhtml.teamone.de/html/allgemein/stil.htm#zweckentfremden]

      Außerdem ist man mit classes viel flexibler, weil man sie verschiedenen Elementen zuordnen kann...

      Gruß, Arne.

      1. Moin!

        Allerdings fällt mir dazu vor allem das hier ein:
        http://selfhtml.teamone.de/html/allgemein/stil.htm#zweckentfremden

        Das Problem ist: Mit CSS-Klassen und -IDs in DIV und SPAN gibst du diesen Tags deine eigene Bedeutung - diese kann aber unmöglich von fremden Programmen, die nach Bedeutungen suchen, erkannt werden, also beispielsweise von Suchmaschinen. Du schneidest dir also möglicherweise ins eigene Fleisch, wenn du auf die sinngerechte Verwendung von <hX> etc. verzichtest.

        Außerdem ist man mit classes viel flexibler, weil man sie verschiedenen Elementen zuordnen kann...

        Das würde ich mal als Gewöhnungssache bezeichnen.

        Sicherlich ist man auf eine gewisse Menge an Klassen angewiesen. Und solange man für den Netscape 4 mitschreibt, der die ganzen interessanten Selektoren nicht kennt, bleibt einem auch kaum etwas anderes übrig. Aber auch Netscape 4 kennt den Schachtel-Selektor:
        table.blue tr td b { text-decoration:underline; font-weight:normal; color:blue; background-color:white; }

        So kriegt man fetten Text in einer Tabelle der Klasse "blue" ohne zusätzliche Klassenangabe im <b> einfach blau (und unterstrichen und nicht-fett). Ohne daß irgendwas anderes blau würde. Wenn sowas eingesetzt wird, kann man später nämlich viel leichter an der HTML-Datei was ändern, ohne immer wissen zu müssen, welche Klassen es alle gibt, welche Bedeutung sie haben, und welche Klasse ich dem Link zuordnen muß, den ich gerade neu eingefügt habe. Das kann man natürlich auch bei den anderen Links alles abgucken - aber es behindert die freie Arbeit. CSS war mal dafür gedacht, Formatierungsarbeiten von HTML abzutrennen. Wenn man dennoch jedem Tag eine Klasse geben muß, ist dieser Vorteil zu mindestens 50% dahin.

        - Sven Rautenberg

        1. Sicherlich ist man auf eine gewisse Menge an Klassen angewiesen. Und solange man für den Netscape 4 mitschreibt, der die ganzen interessanten Selektoren nicht kennt, bleibt einem auch kaum etwas anderes übrig. Aber auch Netscape 4 kennt den Schachtel-Selektor:
          table.blue tr td b { text-decoration:underline; font-weight:normal; color:blue; background-color:white; }

          So kriegt man fetten Text in einer Tabelle der Klasse "blue" ohne zusätzliche Klassenangabe im <b> einfach blau (und unterstrichen und nicht-fett). Ohne daß irgendwas anderes blau würde. Wenn sowas eingesetzt wird, kann man später nämlich viel leichter an der HTML-Datei was ändern, ohne immer wissen zu müssen, welche Klassen es alle gibt, welche Bedeutung sie haben, und welche Klasse ich dem Link zuordnen muß, den ich gerade neu eingefügt habe. Das kann man natürlich auch bei den anderen Links alles abgucken - aber es behindert die freie Arbeit. CSS war mal dafür gedacht, Formatierungsarbeiten von HTML abzutrennen. Wenn man dennoch jedem Tag eine Klasse geben muß, ist dieser Vorteil zu mindestens 50% dahin.

          Das o.g. ist nun aber Zweckentfremdung von HTML-Elementen pur. Was will ich mit einem <b> tag, der nicht fett macht? Das kann nun wirklich nicht der Sinn von CSS sein. Übrigens finde ich es schwieriger, sich zu merken, was die class="blue" nun innerhalb einer tabelle mit dem <b>-Tag macht, als einfach nur den Inhalt der allgemeinen "blue" class.

          1. Moin!

            table.blue tr td b { text-decoration:underline; font-weight:normal; color:blue; background-color:white; }

            Das o.g. ist nun aber Zweckentfremdung von HTML-Elementen pur. Was will ich mit einem <b> tag, der nicht fett macht? Das kann nun wirklich nicht der Sinn von CSS sein.

            Ok, das <b> ist ja auch nicht wirklich schön, weil es per default und erwartungsgemäß Fettschrift erzeugt.

            Ersetze <b> durch <strong>. Dann hat dieses Tag zwar immer noch per Default Fettschrift als Formatierung, aber als eigentliche Bedeutung hat es "starke Hervorhebung".

            table tr td strong { font-weight:normal; font-size:200%; font-family:monospace; color:red; background-color:white; text-decoration:blink; }

            So kriegt man auffälligen, hervorgehobenen Text auch ganz gut hin, ganz ohne Fettschrift.

            Die zwei etwas abgestuften Tags <em> und <strong> kann man auf diese Weise jeweils anders formatieren. Wenn <em> nur eine leichte Hervorhebung sein soll, man aber kursiven Text wegen der schlechten Lesbarkeit am Bildschirm vermeiden will, kriegt <em> eben die Fettschrift, während <strong> groß, rot und blinkend wirkt:

            em { font-weight: bold; font-style: normal; }

            Übrigens finde ich es schwieriger, sich zu merken, was die class="blue" nun innerhalb einer tabelle mit dem <b>-Tag macht, als einfach nur den Inhalt der allgemeinen "blue" class.

            Was ist einfacher?

            1. Du schreibst in einem <div>-Abschnitt einfach die üblichen HTML-Tags wie <h1>, <p>, <strong>, <a>, <ul>, <ol> und <li>, und mußt dich um die richtige Klassenzuordnung nicht kümmern.

            2. Du schreibst zu obigen Tags immer noch die richtige Klasse dazu, wobei du nach zwei Monaten immer noch wissen mußt, welche Klasse denn nun die richtige ist - und das bei mindestens drei parallel zu betreuenden Websites, auf denen keine einheitlichen Klassennamen vergeben sind, und du deshalb immer ins CSS gucken mußt, um vieleicht die richtige Klasse zu finden.

            Na?

            - Sven Rautenberg

            1. Moin!

              Ersetze <b> durch <strong>. Dann hat dieses Tag zwar immer noch per Default Fettschrift als Formatierung, aber als eigentliche Bedeutung hat es "starke Hervorhebung".

              ok, damit kann ich mich anfreunden...

              em { font-weight: bold; font-style: normal; }

              ok, ist mit Sicherheit einsetzbar, aber ein einfaches <b> macht es auch schon. Außerdem müsste man bei em zur Sicherheit noch text-decoration:none; schreiben, denn man weiß ja nie, was die Browser bei den logischen Formatierungen darstellen.

              Übrigens finde ich es schwieriger, sich zu merken, was die class="blue" nun innerhalb einer tabelle mit dem <b>-Tag macht, als einfach nur den Inhalt der allgemeinen "blue" class.

              Was ist einfacher?

              1. Du schreibst in einem <div>-Abschnitt einfach die üblichen HTML-Tags wie <h1>, <p>, <strong>, <a>, <ul>, <ol> und <li>, und mußt dich um die richtige Klassenzuordnung nicht kümmern.
              1. Du schreibst zu obigen Tags immer noch die richtige Klasse dazu, wobei du nach zwei Monaten immer noch wissen mußt, welche Klasse denn nun die richtige ist - und das bei mindestens drei parallel zu betreuenden Websites, auf denen keine einheitlichen Klassennamen vergeben sind, und du deshalb immer ins CSS gucken mußt, um vieleicht die richtige Klasse zu finden.

              Na?

              Hmm, ich glaube, langsam verstehe ich dich richtig. Könnte in der Tat manchmal hilfreich sein, eine solche Notation. Hast mich regelrecht überzeugt, könnte ich an meiner HP mal ausprobieren so etwas...

              Gruß,
              Arne.

      2. Hallo Arne,

        Allerdings fällt mir dazu vor allem das hier ein:
        http://selfhtml.teamone.de/html/allgemein/stil.htm#zweckentfremden

        stimmt zwar im Prinzip, aber gerade <em> und <strong> kennzeichnen ja Betonung
        und damit genau das, was meistens mit <span class="..."> erreicht werden soll.
        Darin sehe ich keine Zweckemtfremdung, zumal ich mir nicht die Formatierung dieser
        Tags (wie im o.g. Beispiel die Einrückung durch <blockquote>) "ausleihe".
        Noch ein Satz zu den Überschriften: Das war auch nicht im Sinne der Zweckentfremdung gemeint,
        sondern um die Seite zu strukturieren. Und das geht mit <div> nicht.

        Schönen Gruß

        Rainer

        1. Hallo Rainer,

          stimmt zwar im Prinzip, aber gerade <em> und <strong> kennzeichnen ja Betonung
          und damit genau das, was meistens mit <span class="..."> erreicht werden soll.
          Darin sehe ich keine Zweckemtfremdung, zumal ich mir nicht die Formatierung dieser
          Tags (wie im o.g. Beispiel die Einrückung durch <blockquote>) "ausleihe".
          Noch ein Satz zu den Überschriften: Das war auch nicht im Sinne der Zweckentfremdung gemeint,
          sondern um die Seite zu strukturieren. Und das geht mit <div> nicht.

          Du weist hier auf genau den Grund hin, weshalb die Verwendung von <em> und <strong> geboten ist, anstelle von irgendwelchen CSS-Basteleien. Nur dadurch wird eine Webseite eher eine zugängliche Webseite sein.
          Siehe dazu: http://home.t-online.de/home/dbsv_/computer/pc.htm
          und auf der Seite die Zip-Datei mit den FIT-Anforderungen zu der Zugänglichkeit von Webseiten für Blinde.
          Auf die WAI http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/webinhalt.html
          möchte ich auch noch einmal aufmerksam machen.

          Schönen Gruß

          Günter

  5. Hallo Philipp!

    vielleicht eine komische Frage... mir ist aber grade eben aufgefallen, dass ich bei meiner neusten hp im body lediglich die Tags <div>, <span> (diese beiden Massenweise, mit allen Moeglichen Klassen und Ids usw), <a>, <form> mit unterelementen,<table> mit unterelementen, <img>, <p> und <br> verwendet habe, wobei es mir eigentlich nur um <div> und <span> geht... anstatt sachen wie <h1>, <h2>, <strong> usw. habe ich nur verschieden formatierte <div>s und <span>s genommen...
    nun wollte ich mal wissen, ob ihr auch so verdivte spanfetischisten seid, oder ob ihr (was ja eigentlich auch logischer ist) auch Dinge wie <h1> benutzt.

    Bei mir führt der <p>-tag wahrscheinlich die Hitliste and (neben <br>), divs laufen bei mir gegen null, tabellen gibt es schon einige.

    Was mir in diesem thread und bei webseiten im allgemeinen auffällt, ist der wegfall der klassischen HTML-tags zur physischen Textformatierung, wie <b> und <i>. Beide sind weiterhin teil des Standards, superschnell und kurz hingetippt, funktionieren in wirklich jedem Browser und geben immer gleiche Ergebnisse. Was will man da mehr?

    Gruß, Arne.

    1. Moin!

      Was mir in diesem thread und bei webseiten im allgemeinen auffällt, ist der wegfall der klassischen HTML-tags zur physischen Textformatierung, wie <b> und <i>. Beide sind weiterhin teil des Standards, superschnell und kurz hingetippt, funktionieren in wirklich jedem Browser und geben immer gleiche Ergebnisse. Was will man da mehr?

      Im Gegensatz dazu ist das <u>-Tag (underline) z.B. nicht mehr im Standard enthalten (deprecated). Warum nur? Ist doch auch kurz und physikalisch. Oder sollte das ein kleiner Wink mit dem Zaunpfahl sein, besser auch auf <b> und <i> zu verzichten, und logische Textauszeichnung zu verwenden?

      - Sven Rautenberg

      1. MOIN!

        Der <u> - Tag war schon immer eine schwierige Sache, weil nicht alle Browser ihn unterstützt haben, Unterstreichung wird außerdem ungerne auf WEbseiten gesehen, weil dieses in der Standard-Einstellung der verbreitesten Browser Links markiert.

        Im Gegensatz dazu ist das <u>-Tag (underline) z.B. nicht mehr im Standard enthalten (deprecated). Warum nur? Ist doch auch kurz und physikalisch. Oder sollte das ein kleiner Wink mit dem Zaunpfahl sein, besser auch auf <b> und <i> zu verzichten, und logische Textauszeichnung zu verwenden?

    2. Hallo Arne,

      Was mir in diesem thread und bei webseiten im allgemeinen auffällt, ist der wegfall der klassischen HTML-tags zur physischen Textformatierung, wie <b> und <i>. Beide sind weiterhin teil des Standards, superschnell und kurz hingetippt, funktionieren in wirklich jedem Browser und geben immer gleiche Ergebnisse. Was will man da mehr?

      ich will z.Bsp., dass mir HTML die logische Struktur eines Dokumentes
      wiedergibt, die Gestaltung überlasse ich dann CSS. Ob ein Text unter-
      strichen oder kursiv ist, hat mit logischer Struktur nix zu tun. Ich
      gebe zu, diese Elemente sind auch in den Strict-Varianten zulässig,
      trotzdem gibt das W3C dazu auch Hinweise:

      http://www.w3.org/TR/html401/present/graphics.html#graphics-fonts:
      "The following HTML elements specify font information. Although they are not all deprecated, their use is discouraged in favor of style sheets."

      http://www.w3.org/TR/html401/present/graphics.html#font-style:
      "It is possible to achieve a much richer variety of font effects using style sheets. To specify blue, italic text in a paragraph with CSS"

      Insbesondere, wenn man das em- und das strong-Element richtig ein-
      setzt, wird man kaum Verlangen nach <b> oder <i> haben. Im Normal-
      fall werden diese beiden dazu genutzt, um einen bestimmten Teil
      hervorzuheben.

      Viele Grüße,
      Stefan