Der Hauptinhalt der Seite und das Hauptelement
Auf jeder Seite finden wir den Hauptinhalt. Es wird sich von Seite zu Seite unterscheiden, aber es wird sich definitiv nicht wiederholen. Zum Beispiel wie auf der Website des Smashing Magazine.
Auf der Seite „Unsere bezaubernden Artikel“ wird eine Liste mit Artikeln angezeigt. Auf der Seite „Wachsende UX-Reife: Einen UX-Champion finden und den ROI demonstrieren (Teil 1)“ sehen wir bereits den Text des Artikels.
Es gibt jedoch nur eine Auswahl in den Bildern, die als Hauptinhalt oder Hauptinhalt bezeichnet wird. Dieser Bereich sollte mit dem Hauptelement markiert werden.
Zusätzlicher Inhalt zum Haupt- und Nebenelement
Zusätzlich zum Hauptinhalt kann es auf der Seite Bereiche geben, die thematisch damit verbunden sind. Sie ergänzen den Hauptinhalt, aber wenn sie von der Seite entfernt werden, wird die Klarheit des Inhalts nicht beeinträchtigt.
Zum Beispiel gibt es auf der Website Lenta.ru auf der Seite mit der Nachricht „Unbesiegter Joshua
wird lernen, die Jugend von Ronaldo fernzuhalten“ einen Block „Verwandte Materialien“.
Der Block enthält einen Artikel über Cristiano Ronaldo, der im Text des Hauptinhalts erwähnt wurde, d. H. Ein thematischer Link wird erstellt, sodass das Element mit einem Nebenelement markiert werden kann.
Auch auf dieser Seite mit dem beiseite-Element können Sie den Block "Verwandte Links" markieren, da alle Links thematisch mit dem Inhalt verknüpft sind.
Thematisch gruppierter Inhalt und das Abschnittselement
Das Abschnittselement hilft uns, Abschnitte der Seite hervorzuheben. Ein Abschnitt in diesem Zusammenhang ist thematisch gruppierter Inhalt, dessen Bedeutung durch den Titel bestimmt wird. Basierend auf der Definition ist es wichtig, den Begriff Überschrift zu erläutern. Eine Überschrift ist ein Text, der den Informationen einen "Namen" gibt.
Um es besser zu erklären, werde ich einige Beispiele geben. Betrachten Sie den "News" -Block auf der BBC-Website.
Zunächst ist es wichtig, den Titel zu finden. Der Block enthält den Text "Nachrichten", der "den Namen" - "Nachrichten" für 3 Nachrichten nebeneinander gibt. Daher ist diese Struktur ein gutes Beispiel für einen Abschnitt.
Schauen wir uns als Nächstes die Blöcke an, in denen Preisinformationen auf der Patreon-Website angezeigt werden.
Jetzt müssen wir den Titel finden. In diesem Beispiel sind die Elemente "Lite", "Pro" und "Premium" Überschriften. Warum? Stellen Sie sich vor, ich diskutiere mit jemandem über Tarife und sage: "Pro-Tarif". Dann wird mein Gesprächspartner sofort verstehen, über welchen Block ich spreche und welche Informationen er enthält. Es stellt sich heraus, dass "Pro-Tarif" ein "Name" ist.
Jetzt haben wir eine Überschrift und Informationen, wie im vorherigen Beispiel, sie können mit einem Abschnittselement gruppiert werden.
Wir werden uns das letzte Beispiel auf der PiterCSS-Site ansehen, wo es einen Block mit Informationen zum Bericht gibt.
Suchen Sie den Titel erneut. Hier ist der Titel des Berichts, der den Rest der Informationen über den Bericht und den Sprecher kombiniert. Als nächstes werde ich es und den Titel mit einem Abschnittselement gruppieren.
Ich hoffe, ich konnte meine Regel für die Verwendung des Abschnittselements übergeben. Wir suchen nach dem Titel und dem damit verbundenen Inhalt und gruppieren ihn mit dem Abschnittselement. Es ist wichtig zu beachten, dass ein Abschnitt ohne Überschrift nicht existieren kann. Daher muss das Abschnittselement eines der h1-h6-Elemente enthalten.
Unabhängige Seitenbereiche und das Artikelelement
Das Artikelelement sollte verwendet werden, um unabhängige Bereiche auf der Seite auszuwählen, die aus ihrer logischen Umgebung entfernt werden können. Dieses Element wird oft mit dem Abschnittselement verwechselt, daher möchte ich den Unterschied anhand von Beispielen zeigen.
Auf der BBC Sport-Website gibt es einen Block mit der Rangliste der zweiten Liga der Meisterschaft von England.
Jetzt werde ich alle umgebenden Informationen löschen.
Ich habe alles auf der Seite gelöscht, aber ich verstehe immer noch, was der Block tut, der die Rangliste anzeigt. Es stellt sich heraus, dass das Entfernen eines Elements aus seiner logischen Umgebung keinen Einfluss darauf hatte.
Jetzt werde ich den Block mit Informationen zum "Pro" -Plan auf der Patreon-Website nehmen und alle verbleibenden Elemente löschen.
Ich verstehe, dass dies ein Block mit Informationen über den "Pro" -Tarif ist. Fein. Aber das ist der Tarif für welches Produkt? Was soll ich damit machen? Unverständlich.
Es stellt sich heraus, dass das Entfernen eines Blocks aus seiner logischen Umgebung Auswirkungen auf ihn hatte. Als Benutzer habe ich aufgehört zu verstehen, was mit diesem Block zu tun ist. Wenn ich es auf einer anderen Site einbette, sieht es "fremd" aus.
Hier liegt der wesentliche Unterschied zwischen den Abschnitts- und Artikelelementen. Dies ist eine sehr feine Linie, aber der Punkt ist, dass wenn das Element nicht "verloren" geht, wenn der umgebende Kontext entfernt wird, es mit dem Artikelelement markiert werden sollte. Und wenn es verloren geht, haben wir ein Abschnittselement.
Navigation und Navigationselement zusammen mit ol- und ul-Elementen
Um die Navigation auf der Seite hervorzuheben, sollten wir das nav-Element verwenden. Das reicht aber nicht. Oft müssen wir Elemente mithilfe einer Liste gruppieren. Die Elemente ol und ul sind für diese Aufgabe geeignet. Aber wie wählst du zwischen ihnen?
Basierend auf dieser Frage werde ich zwei Arten der Navigation betrachten, nämlich die strikte Artikelbestellung und die nicht strenge Artikelbestellung.
Strenge Klauselbestellung und Navi zusammen mit ol
Ein beliebtes Beispiel für die Navigation, bei der die Reihenfolge der Elemente streng ist, sind Breadcrumbs auf der Mvideo-Website.
Warum rufe ich diese Navigation mit strikter Punktreihenfolge auf? Wenn Sie die Elemente austauschen, entspricht die Navigation nicht mehr der Struktur der Site. Zum Beispiel werde ich die Elemente
"Home" und "Smartphones und Kommunikation" tauschen .
- Smartphones und Kommunikation
- die Haupt
- Smartphones
- iPhone
Wir haben einen Fehler bekommen. Wir müssen von der Seite Smartphones und Kommunikation zur Startseite gehen, und das ist nicht möglich. Auf dieser Grundlage komme ich zu dem Schluss, dass die Reihenfolge der Elemente wichtig ist, und für eine Liste, die die strikte Reihenfolge der Elemente enthält, sollten wir das ol-Element verwenden.
Neben Brotkrumen kann dieser Art der Navigation auch die Paginierung zugeschrieben werden.
Lose Artikelbestellung und das Navigationselement zusammen mit der ul
Ein Beispiel für eine solche Navigation ist das Menü auf der Mvideo-Website.
Ich werde die Gegenstände wieder tauschen. Zum Beispiel werde ich die Artikel "Alle Aktionen" und "Rabatte bis zu 80%" am Ende der Liste hinzufügen:
- Smartphones
- Fernsehgeräte
- Laptops
- Kühlschränke
- Waschmaschinen
- Intelligente Lösungen
- Apfel
- Alle Aktionen
- Rabatte bis zu 80%
Okay, die Artikel werden in einer anderen Reihenfolge angezeigt, na und? Die Navigation funktioniert wie zuvor. Es stellt sich heraus, dass das Ändern der Reihenfolge der Elemente keinen Einfluss auf die Navigation hatte, sodass das ul-Element hier geeignet ist.
Einführung in den Inhalt und das Header-Element
Im Internet gibt es eine Meinung, dass das Header-Element verwendet werden sollte, um den "Header" der Site zu markieren. Diese Definition gefällt mir überhaupt nicht, weil sie das Bild nicht vollständig widerspiegelt.
Ja, wir können das Header-Element verwenden, um den "oberen Rand" der Site zu markieren, aber wir können es auch innerhalb der Abschnitt-, Artikel-, Haupt- und Nebenelemente verwenden.
Header-Element in Haupt-, Neben-, Abschnitts- und Artikelelementen
Wenn wir ein Header-Element in den Haupt-, Neben-, Abschnitts- und Artikelelementen verschachteln, werden die einführenden Informationen für dieses Element beschrieben.
Auf der Website des Smashing Magazine beschreibt das Header-Element beispielsweise eine Einführung in den Inhalt der Hauptseite, die mit einem Hauptelement gekennzeichnet ist.
Das Element gruppiert die Überschrift „Unsere bezaubernden Smashing-Artikel“ und den Einführungstext. Dies gibt uns eine Einführung in die folgenden Artikel.
Im Abschnitt "Letzte Beiträge" der Homepage des Smashing Magazine kann das Kopfzeilenelement verwendet werden, um das Datum, den Titel und den Autor des Beitrags zu kombinieren. In diesem Fall befindet sich das Kopfelement innerhalb des Artikelelements.
Auf einer PiterCSS-Konferenzsite kann das Header-Element verwendet werden, um den Titel und den Sponsorentext innerhalb des Abschnittselements zu kombinieren.
Header-Element innerhalb des Body-Elements
Zusätzlich zur Einführung einzelner Elemente können wir diese für die gesamte Site als Ganzes markieren. Dazu müssen wir das Header-Element im Body-Element verschachteln.
Zum Beispiel wie im Smashing Magazine, wo Header-Elemente Logo, Navigation und Suche kombinieren.
Im Allgemeinen können wir das Header-Element sicher verwenden, wenn wir eine "Einführung" in den Inhalt des Body-Elements oder der Haupt-, Neben-, Abschnitts- und Artikelelemente markieren müssen.
Hintergrundinformationen und das Fußzeilenelement
Es scheint mir, dass das Fußzeilenelement leider ein Geschwister des Kopfzeilenelements ist. Wenn empfohlen wird, den zweiten für den "Header" zu verwenden, ist der erste für den "Keller".
Das Fußzeilenelement eignet sich zum Markieren von Hintergrundinformationen, die dem Inhalt des Elements folgen. Wie beim Header-Element kann das Footer-Element auf verschiedene Arten verwendet werden.
Das Fußzeilenelement innerhalb der Artikel-, Seiten- und Abschnittselemente
Auf der tutsPlus-Site gruppiert das Fußzeilenelement Informationen über den Autor, das Datum und die Kategorie der Veröffentlichung. In diesem Fall befindet sich das Fußzeilenelement innerhalb des Artikelelements.
Fußzeilenelement innerhalb des Körperelements
Wie oben erwähnt, gibt es auch Hintergrundinformationen für die gesamte Site. In diesem Fall muss dieser Bereich auf allen Seiten wiederholt werden.
Im Smashing Magazine zeigt das Fußzeilenelement beispielsweise Hashtags und die sekundäre Navigation an.
Kontaktinformationen und das Adresselement
Nach meinen Beobachtungen ist dieses Element eines der am wenigsten verwendeten, obwohl sich die Kontaktinformationen auf jeder Website befinden. Mit dem Adresselement können Sie die Adresse, Telefonnummer und Links zu sozialen Netzwerken markieren. Netzwerke usw.
Auf der Mvideo-Website sollte das Adresselement beispielsweise den Block mit dem Telefon und den sozialen Netzwerken markieren.
Fazit
Ich hoffe, dass ich es geschafft habe, zumindest ein wenig die Vielfalt der Fälle zu zeigen, in denen wir verschiedene HTML-Elemente verwenden können. Ich hoffe, Sie können versuchen, diese Schablone in Ihren Projekten zu verwenden.
Wenn es Ihnen gefällt, verwenden Sie bitte das Adresselement. Es scheint mir, dass er unverdient vergessen ist. Auch für diejenigen, die fragen möchten: "Warum ist das notwendig?" Ich habe eine Antwort - einfach cool.
PS: Ich schreibe auch CSS / HTML-Tutorials auf meinem Patreon. Sie finden es über den Link in meinem Profil auf Habré.