HTML5-Mikroformate und verwandte Attributnamen_HTML5-Tutorial-Tipps

Am 29. Mai 2004, nachdem ich den Blog und das ganze Gerede eingestellt hatte, befragte ich 40 Designer auf ihren Websites, um herauszufinden, welche Konventionen sie für gemeinsame Seitenelemente wie Kopfzeilen und Banner, Navigation, Inhalt und Fußzeile verwendeten (Ergebnis aus dieser Zeit).

Dies war kaum eine wissenschaftliche Studie, aber im Juni dieses Jahres ging ich einigen Kommentaren von Eric Meyer nach und veröffentlichte eine Reihe von Namenskonventionen. Ich freue mich immer, wenn ich eine Website finde, die diese Namenskonventionen übernommen hat, und ich benutze sie immer noch jeden Tag, auch mehr als vier Jahre später.

Meine damaligen Gedanken lassen sich wie folgt zusammenfassen

Die ID- und Klassenattributnamen müssen die Funktion oder den Inhalt des Elements widerspiegeln, nicht die Präsentation. Daher wurde die Kopfzeile entfernt und das Branding eingeführt; die Fußzeile wurde entfernt und durch Site-Info ersetzt.

Die Benennung sollte fast eine XML-Stilstruktur annehmen. Die Benennung sollte fast eine XML-Stilstruktur annehmen. Innerhalb des Inhalts gibt es also content-main , content-sub und content-supp .

Diese Konventionen haben mir gute Dienste geleistet, und was ich getan habe, hat ihren Kern kaum verändert. Ohne Zweifel machen sie alle meine Arbeit schneller, konsistenter und vorteilhafter. Sie erleichtern die Herstellung von Produkten und vermitteln den Menschen, mit denen ich zusammenarbeite, meine Denkweise. Die Namenskonvention funktioniert.

Mikroformate und zugehörige Attributnamen

Seien wir ehrlich, Mikroformate wie hCard, hCalendar, hAtom und andere Entwürfe bringen so viele Attributwerte auf den Tisch, dass es oft nicht nötig ist Überlegen Sie, welche Build-Datei oder welche Einschränkungs-CSS-Muster-Hooks für diese weiteren Eigenschaftswerte bereitgestellt werden. Jetzt verwende ich Mikroformate in einem solchen Ausmaß, dass ich die gesamte Seite entwickle, ohne das Klassenattribut zu verwenden (außer dem Klassenattribut, das mit Mikroformaten geliefert wird).

In den seltenen Fällen, in denen ich ein neues Element hinzufügen muss (aus Layoutgründen eine Unterteilung vorausgesetzt), ist mein erster Gedanke, das bereits vorhandene Mikroformat zu erweitern. Ich gebe Ihnen ein Beispiel für die Verwendung des hAtom-Modus:

Title

Main content

Related content

Title< /h2>

> Verwandter Inhalt

Wenn Sie den Vorteil von Mikroformaten beibehalten, ist Ihnen aufgefallen, dass die Eingabe nicht Teil des hAtom-Musters ist, aber in diesem Fall musste ich unbedingt einen zusätzlichen Faktor für die Zusammensetzung haben ein Attributwert wie „Verwandte Seitenlinks“?

Wann erscheint es logischer, das Benennungsmuster von Mikroformaten zu erweitern?

HTML5

Zu Beginn dieses Kapitels sollte ich offen gesagt sagen, dass ich HTML5 in diesem Moment nicht weniger Aufmerksamkeit schenken kann. Dies ist jedoch nicht der Kern der Sache. HTML5 führt einige potenziell sehr nützliche neue Elemente ein, wie zum Beispiel:

Abschnitt

Ein normaler Datei- oder Anwendungsabschnitt. Kapitel sind in diesem Zusammenhang eine thematische Gliederung von Inhalten.

Artikel

Ein Teil einer Seite, der aus Artikeln besteht, die einen unabhängigen Teil eines Dokuments, einer Webseite oder einer Website bilden. Dabei kann es sich um einen Forumsbeitrag, einen Zeitschriften- oder Zeitungsartikel, einen Webprotokolleintrag, einen vom Benutzer eingereichten Kommentar oder einen anderen unabhängigen Inhalt handeln.

aside

Ein Teil einer Seite, der aus Inhalt besteht, der unabhängig von dem mit dem aside-Element verbundenen Inhalt ist und vom Inhalt getrennt betrachtet werden kann. Diese Abschnitte erscheinen oft als typografische Seitenleisten.

Da es für die Erfinder von Mikroformaten logisch war, ihre Schemata auf vorhandenen Spezifikationen zu basieren, ist es für mich jetzt sicherlich sinnvoll, meine Namenskonventionen an die in HTML5 anzupassen. Es ist doch logisch, dass einige Spezifikationen ihre Muster weiterentwickeln. Und macht es für mich jetzt Sinn, HTML5 zu folgen und meine Namenskonventionen anzupassen? Natürlich kann ich es noch nicht verwenden:

Title

Main content

Related content

Title 🎜>Hauptinhalt

Title

Main content

Related content

Aber jetzt kann ich die id- und class-Attributwerte verwenden, um mich mit HTML5 vertraut zu machen und meine Dokumente diesem einen Schritt näher zu bringen.

>

Hauptinhalt

/div>

Ich habe das Gefühl, dass es ein logischer nächster Schritt für mich ist. Schauen Sie sich also dieses Beispieldokument an, in dem ich HTML5-Elemente als Grundlage für meine Namenskonvention verwendet habe. Beachten Sie, dass ich zusätzlich zu dem, was ich gerade erwähnt habe, die Art der Klassifizierung und Navigation (nav) festgelegt, colgroup und col zum Erstellen von Feldern verwendet, eine ungeordnete Liste in ein Raster umgewandelt und ein Datagrid verwendet habe. Zu den HTML5-Tag-Spezifikationen gehören auch Details, Dialog und Abbildung, die ich auch als Attributwerte verwenden kann. Wenn ich heute einen Wunsch erfüllen könnte, wäre es, dass alle CSS-Framework-Entwickler die gleichen Namenskonventionen übernehmen (und auch Mikroformate umfassend einbetten), damit auch Neulinge in sinnvollem Markup und CSS das Recht haben. Der Ausgangspunkt ist Verwenden Sie aussagekräftigere und logischere Attribute anstelle der oberflächlichen ID- und Klassenattribute.