HTML für Unterwegungen und Überschriften

In diesem Artikel wird die beste HTML -Schreibmethode für Untertitel und große Titel in der Web -Titelstruktur erläutert. Die Autoren zählen eine Vielzahl von Lösungen auf und analysieren ihre jeweiligen Semantik- und Zugänglichkeitsprobleme.

Der Artikel führt zuerst auf häufige Fehler vor:<h3></h3> Nisten<h2></h2> Das heißt, der Untertitel ist oben und der große Titel ist unten. Die Autoren glauben, dass dieser Ansatz gegen die Semantik verstößt, da die visuelle Größe keine semantische Hierarchie darstellt. Diese Struktur kann es für assistive Technologien (z. B. Bildschirmleser) erschweren, die Struktur des Inhalts zu verstehen und die Zugänglichkeit zu beeinflussen.

Als nächstes schlägt der Autor mehrere Alternativen vor:

Plan 1: Umkehrung<h2></h2> Und<h3></h3> Befehl. Stellen Sie den Untertitel auf<h2></h2> setzen Sie den Titel als<h3></h3> . Der Autor ist der Ansicht, dass dieser Ansatz vernünftiger ist, wenn der Untertitel semantisch wichtiger ist.

Lösung 2: Verwenden Sie einen<h2></h2> Und eins

. Setzen Sie den Untertitel ein

Medium, verwenden Sie den Titel<h3></h3> . Dies ist visuell machbar, aber die Untertitel können von den Benutzern von Bildschirmleser ignoriert werden.

Lösung 3: Verwendung<hgroup></hgroup> Element. Der Autor versuchte zu benutzen<hgroup></hgroup> Packen Sie den Titel und Untertitel ein und steuern Sie die visuelle Reihenfolge über CSS. Der Autor weist jedoch darauf hin, dass dieser Ansatz für die Benutzer von Bildschirmleser möglicherweise nicht freundlich genug ist.

Lösung 4: Verwenden Sie eine einzelne<h2></h2> und benutzen<strong></strong> Markieren Sie den Untertitel. Dies ist semantisch prägnanter und von CSS kontrolliert<strong></strong> , der Stil der, erreicht visuelle Unterscheidung. Der Autor empfiehlt die Verwendung von Interpunktionsmarkierungen wie Colons zwischen Unterschriften und großen Titeln, um sie semantisch kohärenter zu machen.

Lösung 5: Verwenden Sie die ARIA- role="doc-subtitle" . Der Autor führt die ARIA- role="doc-subtitle" ein. Obwohl der Browser diese Rolle in unterschiedlichem Maße unterstützt, handelt es sich insgesamt um eine praktikable Lösung.

Schließlich diskutierte der Autor auch einige nicht wiederhergestellte Praktiken, z. B. die Verwendung<label></label> Elemente oder Pseudoelemente, um visuelle Effekte zu erzielen, da diese Methoden die Zugänglichkeit und die Inhaltsfindung beeinflussen.

Der Artikel fasst die Vor- und Nachteile verschiedener Methoden zusammen und schlägt vor, dass die am besten geeignete Lösung gemäß der tatsächlichen Situation mit Semantik und Zugänglichkeitspriorität ausgewählt werden sollte. Der Autor betont, dass Sie bei der Auswahl von HTML -Elementen sich eher auf die Semantik konzentrieren sollten, anstatt nur visuelle Effekte zu berücksichtigen.

Das obige ist der detaillierte Inhalt vonHTML für Unterwegungen und Überschriften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!