Killua: Verschachtelung von Verweisen

Welche Verschachtelung ist erlaubt, bzw. besserer Stil:

<a href="#"><h2>Link</h2></a>

Innerhalb von <a> wäre <h> ja erlaubt.

Aber ist auch [<a>] innerhalb von <h> okay? Demnach schon, oder?

<h2><a href="#">Link</a></h2>

Nur wie ist die unter "phrasing content" stehende Regel bez. [<a>] gemeint? Was heißt:

a, wenn der Inhalt selbst ausschließlich aus phrasing contentn besteht

Ich sehe oft beide Varianten von Verweis Verschachtelungen, auch mit anderen Elementen. Bei verlinkten Bildern ist es eigentlich klar, dass man <img> mit <a> einschließt. Aber andere, gerne verlinkte Elemente sind (zumindest mir) nicht so klar.

Auch wenn mein Beispiel in jeder Richtung funktioniert, der Stil im oberen Code scheint mir irgendwie besser? Oder?

  1. Hallo Killua,

    a, wenn der Inhalt selbst ausschließlich aus phrasing contentn content besteht

    bedeutet, dass ein a Element, das nur phrasing content enthält, selbst phrasing content darstellt und deshalb in einem der Heading-Elemente erlaubt ist.

    Andersherum, also „h2 in a“, wird dadurch abgehandelt, dass das a Element ein transparentes Inhaltsmodell besitzt. D.h. im a Element darf das stehen, was im Elternelement von a erlaubt ist. Mir fehlen allerdings die Tools, um zu beweisen, dass die Dokumentgliederung dadurch erhalten bleibt. Deswegen würde ich sicherheitshalber „a in h2“ verwenden und „h2 in a“ vermeiden.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. bedeutet, dass ein a Element, das nur phrasing content enthält, selbst phrasing content darstellt und deshalb in einem der Heading-Elemente erlaubt ist.

      Ok, verstehe

      sicherheitshalber „a in h2“ verwenden und „h2 in a“ vermeiden.

      Ok, so sehe ich es auch meist.

      Danke!

  2. @@Killua

    Was ist eigentlich der Anwendungsfall?

    Eine Überschrift dient dazu, das Nachfolgende zu beschreiben.

    Ein Link dient dazu, vom aktuellen Ort woandershin zu gehen.

    Eine Überschrift als Link scheint mir ein Widerspruch in sich zu sein.

    Kwakoni Yiquan

    --
    Ad astra per aspera
    1. Servus!

      @@Killua

      Was ist eigentlich der Anwendungsfall?

      Eine Überschrift dient dazu, das Nachfolgende zu beschreiben.

      Ein Link dient dazu, vom aktuellen Ort woandershin zu gehen.

      Eine Überschrift als Link scheint mir ein Widerspruch in sich zu sein.

      Diese Frage ist gut!

      Das verwurste ich irgendwo zu Semantik - ich weiß bloß noch nicht wo genau!

      Herzliche Grüße

      Matthias Scharwies

      --
      Die Signatur findet sich auf der Rückseite des Beitrags.
    2. Hallo Gunnar,

      hm, ja, gute Frage. Ich habe sie mal weitergereicht.

      You

      kann es in html sinnvoll sein, einen link in eine Überschrift zu setzen?

      ChatGPT

      Es ist technisch möglich, einen Link innerhalb einer Überschrift in HTML zu setzen, jedoch sollte dies mit Bedacht geschehen, da es potenziell Verwirrung bei Benutzern verursachen kann. Üblicherweise werden Überschriften verwendet, um die Hierarchie und Struktur einer Webseite zu definieren, während Links dazu dienen, auf andere Ressourcen zu verweisen.

      Wenn der Link in der Überschrift relevant ist und den Inhalt der Überschrift weiterführt oder erläutert, könnte es sinnvoll sein, den Link dort zu platzieren. Zum Beispiel könnte eine Überschrift wie "Weitere Informationen finden Sie in unserem [Link] Support-Bereich" für Benutzer nützlich sein, um direkt auf weitere relevante Ressourcen zu verweisen.

      Also, hm, Absatz 1 überzeugt mich, Absatz 2 nicht. Das ist keine Überschrift.

      Aber vielleicht es so interessanter:

      Sichtbarkeit von HTML Elementen

      Bei CSS-Tricks

      • bla bla link

      Im Selfhtml-Wiki

      Scheint aber auch an den short&curlies[1] herbeigezerrt

      Rolf

      --
      sumpsi - posui - obstruxi

      1. Was die Nackenhaare sind, was denkt ihr denn wieder? ↩︎

    3. Was ist eigentlich der Anwendungsfall?

      Eine Überschrift dient dazu, das Nachfolgende zu beschreiben.

      Ein Link dient dazu, vom aktuellen Ort woandershin zu gehen.

      Eine Überschrift als Link scheint mir ein Widerspruch in sich zu sein.

      Dieser scheinbar widersprüchliche Anwendungsfall begegnet mir oft, ist nicht meine Erfindung. Sondern in vielen Web-Standard-Anwendungen so drin.

      In meinem Fall ist, bei einem Flat-File-CMS Theme auf der Kategorienseite jeder Link zum Beitrag eine anklickbare h1 oder h2.

      Aber wenn ich die Kritik hier richtig deute, sollte man das umbauen, einen normalen Textlink nehmen, ggf. per CSS aufpeppen?

      Und die echten Überschriften, also <h> Tags gehören (nicht verlinkt) nur als Gliederung des Beitrags oder von Seiten-Inhalten.

      1. Hallo Killua,

        auf der Kategorienseite jeder Link zum Beitrag eine anklickbare h1 oder h2.

        das sind also gar keine Überschriften, sondern Einträge in einer Linkliste?

        Das wäre dann ein Theme-Bug.

        Rolf

        --
        sumpsi - posui - obstruxi
        1. Naja, keine bloße Linkliste. Eben eine Kategorienseite, mit den Verweisen zu den Beiträgen.

          Jetzt habe ich aus dem Kategorien Template die Überschriften weg und es nur mehr mit <a> gemacht.

          Einzig interessant wäre noch, ob da auch noch das (vorher eingetragene) itemprop="headline" passt? Eher ja nicht so oder? Ist ja keine Überschrift mehr. Nur was würde besser passen? (blicke mich auf und bei schema.org nicht so durch)

          Kategorienseite mit Links zu den Beiträgen

          1. Hallo Killua,

            itemprop dient zur Ergänzung des HTML durch Mikrodaten. Unser Wiki ist da eher schwach besetzt, aber unser Artikel zu itemprop enthält etliche Links.

            https://wiki.selfhtml.org/wiki/HTML/Attribute/itemprop

            Rolf

            --
            sumpsi - posui - obstruxi
            1. Ja, das fand ich eh und auch schema.org usw. Doch keinen Durchblick, was wohin gehört.

              Also in dem Fall ist es ja keine "headline" mehr, sondern bloß ein Link. Also was für itemprop Bezeichnung wäre das? "url"?

              1. Hallo Killua,

                aus dem, was zu zeigst, schwer zu sagen. itemprops gehören nur dorthin, wo auch Items sind, d.h. es muss ein itemscope-Attribut existieren, das das Elternelement für ein Item festlegt. Dazu gehört auch ein itemtype-Attribut, das den Typ des Items definiert. In den Kindelementen dazu finden sich itemprop-Attribute, die angeben, dass der Inhalt dieses HTML Elements der Wert des genannten Propertys ist.

                Wie das jetzt auf deine Seite passt, kann ich nicht sagen, dazu sieht man zu wenig. Die article-Elemente haben itemscope mit itemtype CreativeWork, dazu gehören dann die Propertys, die schema.org für diesen Type nennt.

                Rolf

                --
                sumpsi - posui - obstruxi
            2. @@Rolf B

              itemprop dient zur Ergänzung des HTML durch Mikrodaten. Unser Wiki ist da eher schwach besetzt, aber unser Artikel zu itemprop enthält etliche Links.

              Das Einzige, was zu Microdata auch zu sagen wäre, ist: nicht verwenden. Besser: RDFa.

              “When Schema started, it was ‘use microdata’… We’ve recognized that was a dumb idea and we’re sorry.” —Chaals in Q&A nach meinem Vortrag, ab 30:18

              Kwakoni Yiquan

              --
              Ad astra per aspera
      2. @@Killua

        Was ist eigentlich der Anwendungsfall?

        Eine Überschrift dient dazu, das Nachfolgende zu beschreiben.

        Ein Link dient dazu, vom aktuellen Ort woandershin zu gehen.

        Eine Überschrift als Link scheint mir ein Widerspruch in sich zu sein.

        Dieser scheinbar widersprüchliche Anwendungsfall begegnet mir oft, ist nicht meine Erfindung. Sondern in vielen Web-Standard-Anwendungen so drin.

        Ein Anwendungsfall begegnet mir auch desöfteren: Die Überschrift verlinkt auf sich selbst:

        <h2 id="section31">
          <a href="#section31">Section 31</a>
        </h2>
        

        Wenn man auf die Überschrift clickt, hat man den URL zum Abschnitt (bspw. https://example.net/path#section31) in der Adressleiste und kann ihn mit anderen teilen.

        Oder besser gesagt: begegnete. Das sieht man jetzt eher mit Kopiere-URL-in-die-Zwischenablage-Button:

        <hgroup>
          <h2 id="section31">Section 31</h2>
          <button>
            <svg aria-hidden="true"></svg>
            <span class="visually-hidden">Copy to clipboard</span>
          </button>
        </hgroup>
        

        Per JavaScript wird der URL in die Zwischenablage kopiert – die bessere Implementierung, nicht zuletzt, weil die Seite nicht rumspringt.


        In meinem Fall ist, bei einem Flat-File-CMS Theme auf der Kategorienseite jeder Link zum Beitrag eine anklickbare h1 oder h2.

        Hört sich so an, als sollten das keine Überschriften sein.

        Und „jeder … eine h1“ hört sich gleich gar nicht gut an. Es sollte maximal ein h1-Element auf einer Seite geben: die Überschrift für die Seite (und nicht für die Website).

        Kwakoni Yiquan

        --
        Ad astra per aspera
        1. Die Überschrift verlinkt auf sich selbst

          Also sowas habe ich noch nicht gesehen. Oder übersehen ...

          Per JavaScript wird der URL in die Zwischenablage kopiert – die bessere Implementierung, nicht zuletzt, weil die Seite nicht rumspringt.

          Hm. So Sachen sind mir schon zu hoch, ich erkenne da nicht mal wo eine JS Zeile. Egal.

          Hört sich so an, als sollten das keine Überschriften sein.

          Sind es aber. Aber eh hpts. H2 Ich habe das dann eh auf <A> getauscht und per CSS aufgemotzt. Ab dann gab es echt nur mehr da Überschriften, wo sie auch hingehören.


          OT: Doch das ganze ist eh obsolet geworden, ich habe Bludit wieder aufgegeben. Denn nachdem mein Theme echt perfekt war, allen bisher dafür erhältlichen Themes um Längen voraus war, musste ich feststellen, dass der Kern zu viele Probleme hat. So warte ich auf Bludit 4 und steige dann wieder ein. Jetzt bin ich wieder zurück zu WP und werde das bisschen Coden wieder verlernen ...

          1. Servus!

            Jetzt bin ich wieder zurück zu WP und werde das bisschen Coden wieder verlernen ...

            Es gibt von ClassicPress eine neue Version. Vielleicht ist das was für dich:

            https://www.classicpress.net/

            Herzliche Grüße

            Matthias Scharwies

            --
            Die Signatur findet sich auf der Rückseite des Beitrags.
            1. ClassicPress

              Kenne ich seit der Gründung und habe damals eine Handvoll Webs damit gemacht (ein paar auch von WP aus migriert). Aber nach ein paar Jahren sinkender Plugin-Unterstützung(*) musste ich die im Kundenauftrag wieder auf WP umbauen.

              Es war eine schöne Zeit, ein schöner Traum davon, nicht vom GutenBorg assimiliert zu werden - aber der ist geplatzt.

              *) Meine damaligen Einwände als vllt. einer der ersten Foristen dort wurden nicht ernst genommen und irgendwann beschwerten sich die Kunden darüber, dass sich im Wochentakt die Plugins verabschiedeten.

              Ich beobachte das Projekt aber weiter. Habe erst kürzlich die Staging Version einer größeren, österreichischen Mediensite testweise mit CP unterlegt und: 80 % der unverzichtbaren Plugins meldeten Inkompatibilität! ... Also ne, das wird nix mehr mit denen ...

              PS: Coden braucht man damit aber auch nicht wirklich. Es ist ja nur ein WP ohne Blockedit.

          2. @@Killua

            Per JavaScript wird der URL in die Zwischenablage kopiert – die bessere Implementierung, nicht zuletzt, weil die Seite nicht rumspringt.

            Hm. So Sachen sind mir schon zu hoch, ich erkenne da nicht mal wo eine JS Zeile.

            Ich hatte auch keine geschrieben.

            Jetzt ja: copy section URL to clipboard

            Kwakoni Yiquan

            --
            Ad astra per aspera