Matthias Scharwies: Cheat-Sheets / Spickzettel für HTML

Servus!

@Camping_RIDER @Felix Riesterer

Auf meiner Suche nach Inhalten für einen HTML-Spickzettel habe ich mich hier mal an einer Info-Grafik für den Unterschied zwischen Element, Tag und Attributen gewagt.

Die SVG-Grafik leidet im Wiki an der suboptimalen png-Vorschau, die von Media-Wiki vorgeschaltet wird.

Ich habe mich weiter oben an einer farbigen Auszeichnung der Quelltext-Beispiele versucht. Für komplexere Tags ist die Vorlage:Farbe wohl nur bedingt geeignet.

Ich bin gespannt, ob man da was Besseres entwickeln kann.

Herzliche Grüße

Matthias Scharwies

-- "Bin ich denn der Einzigste hier, wo Deutsch kann?"
  1. @@Matthias Scharwies

    Auf meiner Suche nach Inhalten für einen HTML-Spickzettel habe ich mich hier mal an einer Info-Grafik für den Unterschied zwischen Element, Tag und Attributen gewagt.

    Magst du dich in dem Zug auch gleich an den Text darunter wagen?

    „Attribute mit freier Wertzuweisung, wobei jedoch ein bestimmter Datentyp oder eine bestimmte Konvention erwartet wird, z.B. bei <input type="password" maxlength="10"> – ein Eingabefeld, in das der Benutzer bis zu 10 Zeichen eingeben kann - hier wird eine numerische Angabe erwartet.“

    Das ist missverständlich, weil Attributwerte grundsätzlich vom Typ String sind – auch wenn der String eine Zahl repräsentiert.

    Zum anderen ist das ein sinnloses Beispiel. Passwörter sollten niemals auf 10 Zeichen Länge beschränkt sein.

    LLAP 🖖

    -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Servus!

      @@Matthias Scharwies

      Auf meiner Suche nach Inhalten für einen HTML-Spickzettel habe ich mich hier mal an einer Info-Grafik für den Unterschied zwischen Element, Tag und Attributen gewagt.

      Magst du dich in dem Zug auch gleich an den Text darunter wagen?

      „Attribute mit freier Wertzuweisung, wobei jedoch ein bestimmter Datentyp oder eine bestimmte Konvention erwartet wird, z.B. bei <input type="password" maxlength="10"> – ein Eingabefeld, in das der Benutzer bis zu 10 Zeichen eingeben kann - hier wird eine numerische Angabe erwartet.“

      Das ist missverständlich, weil Attributwerte grundsätzlich vom Typ String sind – auch wenn der String eine Zahl repräsentiert.

      Bei type="number würde es besser passen,, oder?

      Zum anderen ist das ein sinnloses Beispiel. Passwörter sollten niemals auf 10 Zeichen Länge beschränkt sein.

      Full ACK!

      Im Augenblick stört mich, dass Infografik und Live-Beispiel andere Elemente und Attribute verwenden. Dass die Erklärung dann nicht zum Beispiel passt, umso schlimmer!

      Herzliche Grüße

      Matthias Scharwies

      -- "Bin ich denn der Einzigste hier, wo Deutsch kann?"
      1. @@Matthias Scharwies

        Das ist missverständlich, weil Attributwerte grundsätzlich vom Typ String sind – auch wenn der String eine Zahl repräsentiert.

        Bei type="number würde es besser passen,, oder?

        Auch bei <input type="number" min="1" value="2" max="3"/> sind "1", "2" und "3" Strings – Strings, die als Zahlen gelesen werden können. Ich weiß jetzt auch nicht, wie man das am besten formuliert und ob man das an dieser Stelle überhaupt muss. Die HTML-Spec sagt auch bloß “The value attribute, if specified and not empty, must have a value that is a valid floating-point number.” (Hervorhebung von mir)

        LLAP 🖖

        -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    2. @@Gunnar Bittersmann

      Passwörter sollten niemals auf 10 Zeichen Länge beschränkt sein.

      Sollten. https://twitter.com/davemosk/status/1056656709597319168

      LLAP 🖖

      -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. Hallo Matthias Scharwies,

    Ich habe mich weiter oben an einer farbigen Auszeichnung der Quelltext-Beispiele versucht. Für komplexere Tags ist die Vorlage:Farbe wohl nur bedingt geeignet.

    Die Vorlage Farbe war ja nur für einfache Hervorhebungen gedacht, wie etwa bei input. Ansonsten gibt es doch den Syntaxhighlighter, wie etwa bei placeholder.

    Ich bin gespannt, ob man da was Besseres entwickeln kann.

    Ich denke nicht, dass das notwendig ist.

    Bis demnächst
    Matthias

    -- Pantoffeltierchen haben keine Hobbys.
  3. hallo

    Unterschied zwischen Element, Tag und Attributen gewagt.

    In eben diesem Dokument gefunden:

    Bei einigen Elementen, z.B. p oder li, darf man das schließende Tag weglassen, sofern der Browser zweifelsfrei feststellen kann, wo das Element endet.

    Ein Browser kann zweifelsfrei jedes korrekt gesetze <p> mit einem </p> ergänzen. Nur entspricht das nicht immer der Absicht des Autors.

    Ich habe jetzt aber keine bessere Formulierung auf der Zunge.

    -- https://beat-stoecklin.ch/pub/index.html
    1. Hallo beatovich,

      Bei einigen Elementen, z.B. p oder li, darf man das schließende Tag weglassen, sofern der Browser zweifelsfrei feststellen kann, wo das Element endet.

      Ein Browser kann zweifelsfrei jedes korrekt gesetze <p> mit einem </p> ergänzen. Nur entspricht das nicht immer der Absicht des Autors.

      Ich habe jetzt aber keine bessere Formulierung auf der Zunge.

      Bei einigen Elementen, z.B. <code>p</code> oder <code>li</code>, darf man das schließende Tag weglassen. Die Browser werden das schließende Tag ergänzen. Allerdings muss das nicht immer mit der Intention des Autors übereinstimmen.

      Bis demnächst
      Matthias

      -- Pantoffeltierchen haben keine Hobbys.
      1. hallo

        Hallo beatovich,

        Bei einigen Elementen, z.B. p oder li, darf man das schließende Tag weglassen, sofern der Browser zweifelsfrei feststellen kann, wo das Element endet.

        Ein Browser kann zweifelsfrei jedes korrekt gesetze <p> mit einem </p> ergänzen. Nur entspricht das nicht immer der Absicht des Autors.

        Ich habe jetzt aber keine bessere Formulierung auf der Zunge.

        Bei einigen Elementen, z.B. <code>p</code> oder <code>li</code>, darf man das schließende Tag weglassen. Die Browser werden das schließende Tag ergänzen. Allerdings muss das nicht immer mit der Intention des Autors übereinstimmen.

        Ich würde gerne, sofern das auch den Tatsachen entspräche, schreiben:

        Ein Browser wird ein optionales Endtag an der spätest gültigen Stelle entsprechend den Syntaxregeln ergänzen. Das kann früher oder später geschehen, als es der Autor beabsichtigt. Wenn Sie selber optionale Endtags notieren, müssen diese unbedingt den Syntax-Regeln entsprechen, ansonsten sie zu Fehlern führen.

        Ich befürchte nur, dass ich zu optimistisch bin.

        -- https://beat-stoecklin.ch/pub/index.html
        1. Hallo

          Ich würde gerne, sofern das auch den Tatsachen entspräche, schreiben:

          Ein Browser wird ein optionales Endtag an der spätest gültigen Stelle entsprechend den Syntaxregeln ergänzen. Das kann früher oder später geschehen, als es der Autor beabsichtigt. Wenn Sie selber optionale Endtags notieren, müssen diese unbedingt den Syntax-Regeln entsprechen, ansonsten sie zu Fehlern führen.

          Ich befürchte nur, dass ich zu optimistisch bin.

          Naja, der Teilsatz „ansonsten sie zu Fehlern führen“ wirkt ein wenig jodaesk formuliert.

          Davon abgesehen führen die nicht den Snytax-Regeln entsprechend notierten Endtags ja nicht zu Fehlern an sich, sondern zu einer vom Autor so nicht vorgesehenen Ausgabe, die eben durch das vorher beschriebene Browserverhalten, ein Element „an der spätest gültigen Stelle entsprechend den Syntaxregeln [mit dem Endtag zu] ergänzen“ erzeugt wird. Keine Ahnung, wie man diesen Umstand in eine leicht lesbare Formulierung einfließen lässt.

          Tschö, Auge

          -- Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
          Kleine freie Männer von Terry Pratchett
          1. Liebes Auge,

            sondern zu einer vom Autor so nicht vorgesehenen Ausgabe,

            <klugscheiß type="verzichtbar"> Du meinst sicher "Struktur" und damit einhergehender "Darstellung". </klugscheiß>

            Liebe Grüße,

            Felix Riesterer.

    2. Lieber beatovich,

      Ein Browser kann zweifelsfrei jedes korrekt gesetze <p> mit einem </p> ergänzen. Nur entspricht das nicht immer der Absicht des Autors.

      vielleicht etwas ausführlicher?

      Ein Browser muss aus dem Quelltext einen Elementbaum (DOM) erstellen, bei dem er sich konkret entscheiden muss, wie die Elemente tatsächlich beschaffen sein sollen. Lässt der Autor bei bestimmten Elementen (wie z.B. p, h1, li) das schließende Tag weg, so entscheidet der Browser, womit das Element vollständig ist. Dabei orientiert sich der Browser an der HTML-Spezifikation, was unerfahrene Autoren vielleicht nicht immer tun, was zu zunächst unerwarteten Ergebnissen führen kann.

      Liebe Grüße,

      Felix Riesterer.

      1. Hallo,

        Dabei orientiert sich der Browser an der HTML-Spezifikation, was unerfahrene Autoren vielleicht nicht immer tun, was zu zunächst unerwarteten Ergebnissen führen kann.

        Mindestens ein „was“ zuviel.

        Dabei orientiert sich der Browser an der HTML-Spezifikation, was zu zunächst unerwarteten Ergebnissen führen kann, da das unerfahrene Autoren vielleicht nicht immer tun.

        Gruß
        Kalk