Hallo habr Ich präsentiere Ihnen die Übersetzung des Artikels
"Top 3 HTML-Elemente, die wir vergessen haben" von Stas Melnikov.
Ich habe kürzlich die technischen Daten gelesen und festgestellt, dass wir nur eine begrenzte Anzahl von HTML-Elementen verwenden. Deshalb möchte ich auf die drei Elemente eingehen, die wir vergessen haben, die aber in jedem Projekt enthalten sind.
Adresselement
Oft müssen Sie in unseren Projekten einen Block von sozialen Netzwerken oder anderen Kontaktinformationen markieren. In der Regel verwenden Entwickler den folgenden Code:
<div class="my-social"> <ul> <li><a href="github.com">Fork me on Github</a></li> <li><a href="twitter.com">Follow me on Twitter</a></li> <li><a href="linkedin.com">My LinkedIn</a></li> </ul> </div>
Die WHATWG-Spezifikation enthält jedoch ein spezielles Adresselement für diese Aufgabe.
Das Adresselement stellt Kontaktinformationen für den nächstgelegenen Artikel oder das nächstgelegene übergeordnete Element dar. Wenn es sich um ein Textelement handelt, gelten die Kontaktinformationen für das gesamte Dokument.
Daher ist der folgende Code wahrer:
<address class="my-social"> <ul> <li><a href="github.com">Fork me on Github</a></li> <li><a href="twitter.com">Follow me on Twitter</a></li> <li><a href="linkedin.com">My LinkedIn</a></li> </ul> </address>
Ol Element
Wir sollten Listen verwenden, um Navigationselemente wie Breadcrumb, Paginierung usw. zu markieren. Dies ist erforderlich, damit Screenreader die Anzahl der Elemente in der Navigation lesen können.
<nav class="breadcrumb"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Design Patterns</a></li> <li><a href="#">Breadcrumb Pattern</a></li> </ul> </nav>
Normalerweise verwenden wir das ul-Element. Die Spezifikation enthält jedoch ein geeigneteres Etikett. Die WHATWG-Spezifikation besagt:
Das Element ol stellt eine Liste von Elementen dar, bei denen die Elemente absichtlich sortiert sind, sodass eine Änderung der Reihenfolge die Bedeutung des Dokuments ändert.
Wenn wir die Elemente in der Navigationsleiste neu anordnen, ändern wir den Wert der Website. Daher ist der folgende Code wahrer:
<nav class="breadcrumb"> <ol> <li><a href="#">Home</a></li> <li><a href="#">Design Patterns</a></li> <li><a href="#">Breadcrumb Pattern</a></li> </ol> </nav>
Zeitelement
Wir verwenden das span-Element, um die Daten verschiedener Veröffentlichungen zu kennzeichnen.
<span>October 5</span> <span>two days ago</span> <span>a Saturday</span>
Dafür können wir aber die Zeitmarke verwenden, die in der WHATWG-Spezifikation enthalten ist. Dies ist, was die WHATWG-Spezifikation sagt:
Das time-Element repräsentiert seinen Inhalt zusammen mit der maschinenlesbaren Form dieses Inhalts im datetime-Attribut. Der Inhalt wird durch verschiedene Daten, Zeiten, Zeitzonen und Dauer begrenzt.
Daher müssen wir das Zeitelement verwenden, um Daten zu markieren.
<time datetime="2019-10-05">October 5</time> <time datetime="2019-01-29">two days ago</time> <time datetime="2019-09-23">a Saturday</time>