Frage zu sauberem XHTML und dessen Verwendung (mit CSS)

  • Hi Leute!

    Da ich weiß, dass viele von euch gut mit XHTML, CSS und Co umgehen könnte, wollte ich mal die eine oder andere Frage loswerden und hoffe, hier Antwort zu bekommen. Es sind eigentlich nur Kleinigkeiten, aber die beschäftigen mich auf dem Gebiet nunmal.

    1) Die Verwendung von <p> </p>:
    Ist es anzuraten, jeden Absatz wirklich in ein <p> zu packen? Ich habe auf meiner aktuellen Seite alles mit <br/> und normalem Text gelöst.
    Gilt dies als "unschön" nach Standards der Barrierefreiheit?

    2) Nach (wohl noch weit entfernt liegenden Plänen) entfallen in XHTML 2 wohl (wenn ich das richtig verstanden habe) Elemente wie <u></u>, <i></i> oder der gleichen. Nun, wie sollte man diese am Besten ersetzen?
    Mit einer eigenen Klasse im CSS, damit es dann im HTML so aussieht:
    <span class="unterstrichen">Text</span>
    ?

    Das wären erstmal die Sachen, die ich im Kopf habe- wenn mir noch was einfällt, ergänze ich es.

    Schon mal vielen Dank für Antwort!

    Grüße, Ebu

  • Zitat von Ebukadneza

    1) Die Verwendung von <p> </p>:
    Ist es anzuraten, jeden Absatz wirklich in ein <p> zu packen? Ich habe auf meiner aktuellen Seite alles mit <br/> und normalem Text gelöst.
    Gilt dies als "unschön" nach Standards der Barrierefreiheit?

    Wie es mit der Barrierefreiheit aussieht, weiß ich nicht so genau. Jedoch könnte die Verwendung von <p> Vorteile bezüglich der Gestaltung bringen. Möchtest du zum Beispiel einen Absatz mit einem blauen Rahmen umgeben, ist dies mit Normalem Text und <br/> mehr Aufwand als mit <p>.

    Zitat

    2) Nach (wohl noch weit entfernt liegenden Plänen) entfallen in XHTML 2 wohl (wenn ich das richtig verstanden habe) Elemente wie <u></u>, <i></i> oder der gleichen. Nun, wie sollte man diese am Besten ersetzen?
    Mit einer eigenen Klasse im CSS, damit es dann im HTML so aussieht:
    <span class="unterstrichen">Text</span>

    Entweder mit eigener Klasse oder auch direkt eingebunden, d.h. z.B. <span style="text-weight:bold;">Text</span>

  • Zitat von Ebukadneza

    1) Die Verwendung von <p> </p>:


    Denke bei HTML immer an die Bedeutung, nicht das aussehen oder ob es "praktischer" für dich ist.

    <p> ist ein Absatz. Willst Du einen Absatz machen, benutzt einen neuen <p>-Bereich. Ein Absatz ist nicht einfach nur ein Zeilenumbruch. Er trennt Inhalte von einander. Ein Zeilenumbrauch wird eher zur besseren Lesbarkeit verwendet, z.B. wenn zu viele Wörter (im Sinne der Lesbarkeit) in einer Zeile vorkommen, oder anders eine doofe Worttrennung nötig wäre. Auch ist es unschön, wenn ein neuer Satz mit nur einem Wort am ende einer Zeile startet z.b. mit einem "Ich" am ende einer Zeile. Dann bringt man das Ich per Zeilenumbruch lieber in die nächste Zeile. Zeilenumbrüche innerhalb von Absätzen führen daher nicht zwangsläufig zu einer neuen Absätzen.

    Simuliere niemals einen echten Absatz indem Du zweimal <br> verwendest, nur weil es für dich "praktischer" ist. HTML hat nichts mit aussehen, sondern mit Bedeutung zu tun.


    Zitat von Ebukadneza

    2.) [...] Mit einer eigenen Klasse im CSS, damit es dann im HTML so aussieht:
    <span class="unterstrichen">Text</span>
    ?


    Zum Beispiel. Evtl. stellt sich aber auch die Frage warum Du etwas unterstreichst, oder fett machst. <strong> z.B. bleibt gültig und markiert WERTEND einen bereich. Wenn Du z.B. eine Überschrift krusiv haben willst schreibst Du auch nicht <h3><i>Lalala</i></h3>, sondern passt die css-Angaben für das h3 an, so das es kursiv wird. Wenn Du Zitate oder Bezeichnungen, Abkürzungen usw. kursiv darstellen willst, markier es mit dem entsprechenden HTML-Tag und passe dieses dann mit CSS an.

    Bei HTML geht es nur um Struktur, Inhalt und dessen Bedeutung und nicht ums Aussehen. <u>/<b>/<i> sind hingehen einfach nur optische Markierungen, ohne spezielle Bedeutung.

    Wenn Du in HTML etwas markieren willst, fragt dich immer was genau du eigentlich beschreiben willst, welche Bedeutung es hat. Das Aussehen läuft dann über CSS.

    (zu A.J. Anmerkung: direkt einbinden sollte man generell vermeiden und nur im Notfall machen. Klassen sind immer zu bevorzugen. Nur so kann man HTML-Dokument auch wirklich von CSS-Angaben trennen.)

  • Zitat von Ebukadneza

    1) Die Verwendung von <p> </p>:
    Ist es anzuraten, jeden Absatz wirklich in ein <p> zu packen? Ich habe auf meiner aktuellen Seite alles mit <br> und normalem Text gelöst.
    Gilt dies als "unschön" nach Standards der Barrierefreiheit?

    <p> ist viel sinnvoller. <br> sollte man nureinsetzen, wo es Sinn macht, z.B. um Liedtextzeilen abzutrennen oder so.

    Zitat

    2) Nach (wohl noch weit entfernt liegenden Plänen) entfallen in XHTML 2 wohl (wenn ich das richtig verstanden habe) Elemente wie <u></u>, <i></i> oder der gleichen. Nun, wie sollte man diese am Besten ersetzen?
    Mit einer eigenen Klasse im CSS, damit es dann im HTML so aussieht:
    <span>Text</span>
    ?

    So geht es zwar, aber du solltest auch überlegen, ob es nicht andere sinnvolle Textauszeichnungen wie <strong> oder <em> gibt, die man stattdessen besser benutzen kann. <span> und <div> generell nur da einsetzen wo es kein passenderes Element gibt (oder dann möglicherweise auch gleich weglassen).

  • Uff, i und u sollen entfallen? Wenn man stattdessen das über Klassen etc machen muß, ist es verhältnismäßig umständlich.
    Ein Beispiel: Wenn ich einen Artikel verfasse aus meiner Arbeit (Biologie/Biochemie), dann werden standardmäßig englische Fachausdrücke und genetische Klassifizierungen kursiv geschrieben. D.h. es handelt sich um einzelne Wörter.
    Beispiel:
    Zur Erstellung einer GLT1 -/- Maus wurde Exon II deletiert und somit ein frameshift im Gen erzielt.

    Das kommt in einem Absatz dann viel häufiger vor und wird damit umständlich. Na klasse. Man kann es auch übertreiben. Vielleicht wäre dann angebracht eine Kurzform zu entwickeln und einzubinden, z.B. <i>text</i> wäre etwas, das im css als .i für die Ansicht definiert werden kann.
    Wenn man halbe Romane schreiben muß um einen text ansprechend lesbar zu gestalten, dann wird sich bestimmt eine Mehrheit bei der Anwendung sträuben.

    Oder hab ich was in den falschen Hals bekommen (bin in Gedanken schon im Urlaub :) )

  • Nicht verstanden, was wir vorgeschlagen haben, oder? ; )

    http://de.selfhtml.org/html/text/logisch.htm

    Es gibt haufenweise logische Auszeichnungs-Tags:
    <em>...</em> <strong>...</strong> <code>...</code> <samp>...</samp> <kbd>...</kbd> <var>...</var> <cite>...</cite> <dfn>...</dfn> <abbr>...</abbr> <acronym>...</acronym>

    Du könntest fortan z.B. <em> benutzen und per CSS so umfunktionieren, dass es so aussieht, wie Du es haben willst. Z.B. kursiv.

  • Der Grund wurde doch schon genannt: es soll im Standard strikt zwischen logischer Auszeichnung und Layout/Optik unterschieden werden. Genau das machen u und i bspw. nicht. Daher werden sie aus dem Standard geschmissen.

  • Zitat von bugcatcher

    (zu A.J. Anmerkung: direkt einbinden sollte man generell vermeiden und nur im Notfall machen. Klassen sind immer zu bevorzugen. Nur so kann man HTML-Dokument auch wirklich von CSS-Angaben trennen.)

    Jaja schon klar.
    Wenn ich 10 Dokumente habe und ich will in einem nur ein Wort unterstreichen, kann direkt einbinden aber dennoch sinnvoll sein.

    Wenn ich die Formatierung öfters verwenden will/muss, ist es mit Klassen natürlich einfacher, schneller und sinnvoller...

  • Geht nicht ums öfter verwenden. Geht um verschiedene Ausgabe-Medien. Ein erstelltes CSS mag für einen Desktop-Browser problemlos gehen, für einen mobilen Browser für Handy/PDA mag es sinnvoller sein ohne die extrene CSS zuarbeiten. oder eine andere CSS-Datei zu verwenden. Für beide fälle sollte in der HTML-Datei aber keinerlei anderen CSS-Befehle mehr enthalten sein. Eine zusätzliche Klasse mag Dir als Entwickler evtl. mehr Arbeit machen, aber das war noch nie ein Argument. Strikte Trennung von CSS und HTML sollte man der Zugänglichkeit zu liebe immer betreiben. Auch wenn es mal nervt.

  • Bei Schriftgröße usw. leuchtet mir das ja auch ein, aber in welchem Fall macht z.B. eine Kursiv-Schrift Probleme?

    Naja egal, einigen wir uns einfach darauf, dass Klassen in 99% der Fälle sinnvoller sind. ;)

  • Zitat von A.J.

    Bei Schriftgröße usw. leuchtet mir das ja auch ein, aber in welchem Fall macht z.B. eine Kursiv-Schrift Probleme?

    Was ist, wenn du dir die Webseite von einem Screenreader vorlesen lässt? Der kann dan Überschriften und mit <em> ausgezeichete Stellen entsprechend betont vorlesen, aber ein <i> kursiv vorzulesen ist ziemlich unmöglich. Zwar würden anständige Screenreader auch <i>-Tags betont lesen, aber vielleicht merkst du, dass das nicht sehr sinnig ist.

    Oder stell dir vor, du willst im nachhinein deine Englischen wörter nicht mehr Kursiv haben, sondern in Kapitälchen oder so.

    Natürlich kannst du dann auch deinen <i>-Tag mit CSS entsprechend stylen, aber irgendwie wäre es doch merkwürdig, dass text im Kursiv-Tag plötzlich nicht Kursiv ist. Besser ist es, du sagst einfach, dass das Wort z.B. betont ist (<em>) oder eine Definition ist (<dfn>) oder sonstwas ist und formatierst das dann mit CSS entsprechend.

  • Okay, vielen Dank für die Antworten und die daraus entstandene Diskussion- fand ich sehr interessant. :)
    Ich werde mir mal <em> und <strong> ansehen, ich denke mal, dass ich meine Seiten jedenfalls darauf umstellen werde.

    Viele Grüße,
    Ebu

  • Zitat von JonHa

    Oder stell dir vor, du willst im nachhinein deine Englischen wörter nicht mehr Kursiv haben, sondern in Kapitälchen oder so.

    Natürlich kannst du dann auch deinen <i>-Tag mit CSS entsprechend stylen, aber irgendwie wäre es doch merkwürdig, dass text im Kursiv-Tag plötzlich nicht Kursiv ist. Besser ist es, du sagst einfach, dass das Wort z.B. betont ist (<em>) oder eine Definition ist (<dfn>) oder sonstwas ist und formatierst das dann mit CSS entsprechend.

    Da hast du natürlich recht.

  • Hi!
    Diesmal ist es zwar eine ganz andere Frage, aber ich denke, ich bleibe bei diesem Thread:
    Kann Firefox inzwischen mit dem CSS-Befehl
    opacity
    umgehen?
    Ich ging immer davon aus, dass es
    -moz-opacity
    sein muss, bis der Befehl offiziell in CSS3 integriert ist.
    Aber gerade hab ich ein wenig rumgeschraubt und ich glaube fast, dass es auch so auch geht.

    Eigentlich eine blöde Frage, aber da ich gerade nicht so wirklich klar denken und mich nur ablenken will, möchte ich Fehler ausschließen.

    Dankeschön!

  • Okay, dankeschön!
    Opera kann das eigentlich ziemlich gut, finde ich.
    Ich ging halt irgendwie davon aus, dass es beim FX fürs erste nur -moz-opacity, wie ja auch zum Beispiel -moz-border-radius gibt.
    Wann wurde opacity eigetnlich dann in Fx integriert (also ohne -moz-)?
    Das war zu 1.X Zeiten noch nicht, oder etwa doch?

    Grüße, Ebu