HTML5-Element "article"

[hatchcanyon]

Beschäftige mich aktuell etwas näher mit HTML5.

Das Element "article" könnte ich offenbar anstelle eines div - Elements einsetzen, es hat genau die gleichen Eigenschaften mit Ausnahme der semantischen Bennennung.

Jetzt habe ich Seiten, auf denen ein div - Element mit class="inhalt" verwendet wird, um einen Text samt Bildern einzuschliessen. Das könnte man doch auch mit "article" tun, was übersichtlicher erscheint. Schliessendes Tag wäre </article> und damit deutlich abgehoben von den normalen </div>, von denen es schon genug gibt.

Wäre das eine sachgemässe Verwendung?

Gruss

Rolf

 

[threadi]

Aus meiner Sicht ja. Aber beachte auch noch, dass es <section> gibt. Ich unterteile damit dann einzelne Bereiche eines <article>'s.

 

[harryman]

Wäre das eine sachgemässe Verwendung?

ja, das wäre eine sachgemäße Verwendung für <article>.
<section> dient mehr dazu, Bereiche einer Seite zu unterteilen, aber nicht innerhalb von Artikeln Unterteilungen vorzunehmen.

 

[Tronjer]

Google mal nach HTML5 Flowchart.

 

[hatchcanyon]

Vielen Dank für die Antworten!

Aus meiner Sicht ja. Aber beachte auch noch, dass es <section> gibt. Ich unterteile damit dann einzelne Bereiche eines <article>'s.

Ganau das habe ich ggf. auch mit <section> vor, kann mir aber auch noch andere Anwendungen vorstellen.

ja, das wäre eine sachgemäße Verwendung für <article>.
<section> dient mehr dazu, Bereiche einer Seite zu unterteilen, aber nicht innerhalb von Artikeln Unterteilungen vorzunehmen.

Hm, das wird allgemein aber anders dargestellt. <section> soll offenbar zur Strukturierung innerhalb von <article> verwendet werden, aber es kann auch ausserhalb Sinn machen.

Google mal nach HTML5 Flowchart.

Danke für den Hinweis! Interessante Diskussion zum Einsatz des Elements und interessant festzustellen, dass die Spezifikationen in Bezug auf <section> eine Anzahl Interpretationen zulassen:

…a thematic grouping of content, typically with a heading, possibly with a footer.

Typically bedeutet nicht verpflichtend, also wird des Öfteren ein heading vorhanden sein, aber das ist eben kein Muss. Beim footer ist die Definition noch unbestimmter.

Was, wenn man z.B. <section> anstelle eines Div-Wrappers einsetzt, um Elemente, die als "display: inline-block" formatiert sind, zusammenzuhalten?

Gruss

Rolf

 

[Elroy]

Was, wenn man z.B. <section> anstelle eines Div-Wrappers einsetzt, um Elemente, die als "display: inline-block" formatiert sind, zusammenzuhalten?

HTML dient der semantischen Auszeichnung des Inahtls.

Wenn <section> dort sinnvoll ist dann benutze es wenn nicht dann lass den Div-Wrapper.

Gruss
Elroy

 

[hatchcanyon]

HTML dient der semantischen Auszeichnung des Inhalts.

Wenn <section> dort sinnvoll ist dann benutze es wenn nicht dann lass den Div-Wrapper.

Gruss
Elroy

Genau das habe ich jetzt getan. :-D

<section> lässt sich auch gut verwenden, um einzelne Zeilen von tabellarischen Auflistungen (Beispiel) zusammenzuhalten und semantisch zu kennzeichnen. Das hatte ich zuvor mit <div> erledigt, was im Quellcode weniger übersichtlich ist.

Gruss

Rolf

 

[Elroy]

Der Quellcode sieht immer noch nicht sehr schön aus wenn ich das mal so sagen darf.

Du müllst da immer noch alles mit divs zu. Von semantischer Kennzeichnung ist da nicht das geringste zu erkennen.

Was sagt denn das W3C zum div:

Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.

Deine Seite ist ein wunderbares Beispiel für eine Definitionsliste. Divs sind da völlig unnötig.

Gruss
Elroy

 

[hatchcanyon]

Der Quellcode sieht immer noch nicht sehr schön aus wenn ich das mal so sagen darf.

Du müllst da immer noch alles mit divs zu. Von semantischer Kennzeichnung ist da nicht das geringste zu erkennen.

Erschliesst sich mir nicht?

Jedes Div ist mit einer Klasse ausgezeichnet.

Gruss

Rolf

 

[Elroy]

Jedes Div ist mit einer Klasse ausgezeichnet.

Ja, und was hat das mit semantischer Kennzeichnung zu tun?

Es gibt semantisch sinnvollere Auszeichnungen für deinen Inhalt und auch für die Gestaltung sind die divs nicht zwingend notwendig also kannst du sie auch ersetzen, zum Beispiel durch eine Definitionsliste.

Hier noch etwas zum lesen: http://webstandard.kulando.de/post/...pe_oder_div_chaos_-_wie_kann_man_es_vermeiden
Ich finde das trifft genau auf deine Seite zu.

Gruss
Elroy

 

[hatchcanyon]

Na, auf der Seite sehen das aber auch nicht alle uneingeschränkt positiv. Erinnert mich an die Aussagen von Rudel/Chao, die ebenfalls der Meinung sind, dass die Sache mit den Divs gar nicht verkehrt ist. Mit Listenelementen baut man doch letztendlich - wenn man sie nicht wirklich für einfache Listen einsetzt - widerum einen Mix aus Inhalt und Layout, also genau das, was es doch zu vermeiden gilt. Was ist da jetzt semantisch besser? In Wirklichkeit doch nichts.

Gruss

Rolf

 

[Elroy]

Mit Listenelementen baut man doch letztendlich - wenn man sie nicht wirklich für einfache Listen einsetzt - widerum einen Mix aus Inhalt und Layout, also genau das, was es doch zu vermeiden gilt. Was ist da jetzt semantisch besser? In Wirklichkeit doch nichts.

Natürlich soll man nur Listen als Listen auszeichnen, das was du auf deiner Seite hast ist doch auch eine Liste, warum wird es dann nicht als solche ausgezeichnet. Und selbst wenn es keine Liste wäre, was ist es deiner Meinung nach? Welche Bedeutung hat es?


Hast du mal nachgelesen was das Wort Semantik eigentlich bedeutet?
Das war das erste was ich gemacht habe als ich in diesem Forum auf den Begriff Semantik stiess, ich wusste es nämlich nicht.

Halten wir mal fest: Du baust mit Hilfe von Divs ein Tabellengerüst nach, dabei legst du nicht den geringsten Wert auf eine semantische Auszeichnung und erzeugst eine div Suppe.

Quasi als Alibifunktion klatschst du dann einige <section> Elemente rein die da ganz bestimmt nicht hingehören.

Du versuchst immer noch HTML zur Gestaltung deiner Webseite zu verwenden und das ist nun mal falsch.
Geh mal von dem Gedanken weg das die Auszeichnung irgend etwas mit dem Aussehen zu tun hat.
Richtig aufgebaut würde man bei deiner Seite eventuell zwei oder drei div brauchen, jetzt zähl mal nach wieviel du hast.

Gruss
Elroy

 

[hatchcanyon]

Ich würde das Ganze jetzt aber mal deutlich tiefer hängen. ;)

Wen interessiert den so eine angeblich bessere oder schlechtere semantische Auszeichnung?

Den Browser schon mal gar nicht, die Suchmaschinen auch kaum und einen Dritten muss es nicht interessieren, der hat eh nix davon. Mich muss es interessieren, weil die Seite von mir gewartet wird. Also muss es meinem "Denkstil" entsprechen und der kann - hoffe ich jedenfalls - doch anders sein als der von anderen Mitmenschen. Ja und ich komme blendend damit zurecht.

Gruss

Rolf

 

[threadi]

Für Suchmaschinen ist Semantik von großer Bedeutung. Bestes Beispiel ist ja schon die Überschrift <h1> bis <h6>. Die darüber ausgezeichneten Texte haben eine höhere Wertigkeit für die Seite.

Ein weiteres Argument für Semantik ist auch die Barrierefreiheit. Vorleseprogramme von Sehbehinderten können darüber unterscheiden, welche Art Inhalt sie vor sich haben und dem Benutzer entsprechende Optionen anbieten. Das vereinfacht das Lesen der Seite für den Nutzer solcher Programme - ist aber auch nur ein Beispiel von vielen ähnlichen.

 

[hatchcanyon]

Für Suchmaschinen ist Semantik von großer Bedeutung. Bestes Beispiel ist ja schon die Überschrift <h1> bis <h6>. Die darüber ausgezeichneten Texte haben eine höhere Wertigkeit für die Seite.

Ein weiteres Argument für Semantik ist auch die Barrierefreiheit. Vorleseprogramme von Sehbehinderten können darüber unterscheiden, welche Art Inhalt sie vor sich haben und dem Benutzer entsprechende Optionen anbieten. Das vereinfacht das Lesen der Seite für den Nutzer solcher Programme - ist aber auch nur ein Beispiel von vielen ähnlichen.

Punkt 1 ist klar und verständlich, Punkt 2 allerdings nicht und ich glaube auch nicht, dass das so stimmt.

Was geschieht denn mit den in HTML5 zulässigen selbst kreierten semantischen Auszeichnungen? Nehmen wir mal an, man erzeugt die Tags <banner></banner> und <abstract></abstract> um den Flow besser zu stukturieren. Das ist erlaubt, offenbar sogar erwünscht, aber mit Sicherheit kann kein Programm aus den Benennungen schliessen, was damit zu geschehen hat. Sie dienen doch einzig und alleine der leichteren Lesbarkeit des HTML, sind in Wirklichkeit kaum mehr als Divs mit anderen Namen. Genausogut könnte man auch Divs mit class="abstract" oder class="banner" verwenden.

Gruss

Rolf

 

[threadi]

Aus dem Grund sollte man bei barrierefrei gestalteten Seiten auf selbstdefinierte HTML-Elemente verzichten oder (sobald/falls es die Screenreader unterstützen) eine technisch Dokumentation zu den selbstdefinierten HTML-Elementen hinterlegen. Klassenangaben werden von Screenreadern ignoriert, da sie semantisch keine Bedeutung haben.

 

[Tronjer]

Das wichtigste Argument für Semantik (HTML5) besteht darin, dass sie im Zusammenspiel mit Ontologie (OWL) die Grundlage für das Web 3.0 bildet. Es geht hier weniger um SEO oder Barrierefreiheit für Menschen sondern darum, dass Maschinen den Content einer Website richtig interpretieren können. Durch die Umstellung auf ip v6 erhält zukünftig jedes elektronische Gerät seine eigene Adresse und kann autonom im Netz agieren. In wenigen Jahren wird der Kühlschrank eigenständig einen Reparaturdienst kontatieren, wenn er einen Defekt feststellt. ;)

 

[hatchcanyon]

Aus dem Grund sollte man bei barrierefrei gestalteten Seiten auf selbstdefinierte HTML-Elemente verzichten ....

Es geht hier weniger um SEO oder Barrierefreiheit für Menschen sondern darum, dass Maschinen den Content einer Website richtig interpretieren können.

Besser kann man offenbar die Widersprüche zum Thema Semantik nicht aufzeigen.

Gruss

Rolf

 

[Banana_Jones]

Besser kann man offenbar die Widersprüche zum Thema Semantik nicht aufzeigen.

Gruss

Rolf

Ich sehe in den Aussagen kein Widerspruch, im Gegenteil. Threadi spricht Barrierefreiheit und Screenreader (=Maschinen) an, Tronjer geht einen Schritt weiter in Richtung Ubiquitous computing.
Beiden geht es darum dass Maschinen den Content einer Website richtig interpretieren können sollen, sei dies jetzt ein Screenreader oder ein Kühlschrank.