nicht angemeldet
HTML5: Wann wird <figure> benutzt?
0 0 0 0 
Gunnar Bittersmann
HTML5: Wann wird <figure> benutzt?
JürgenBHallo,
mal so als Beispiel die Startseite von Spiegel online, Focus etc.
Schematisch in HTML/XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<div id="content">
<div class="article">
<img/>
<h1></h1>
<h2></h2>
<p></p>
</div>
...
<div class="article">
...
</div>
</div>
oder vielleicht auch:
<ul id="content">
<li class="article">
<img/>
<h1></h1>
<h2></h2>
<p></p>
</li>
...
<li class="article">
...
</li>
</ul>
</body>
</html>
Daraus würde in HTML5:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<section id="content">
<article>
<figure><img/><figure>
<h1></h1>
<h2><time></time></h2>
<p></p>
</article>
...
<article>
...
</article>
</section>
</body>
</html>
Jetzt die Frage: Ist das img-Element auf jeden Fall durch ein figure-Element zu kapseln? Oder nur, wenn es auch eine zugehörige Bildunterschrift hat? Gibt es da genau Regeln?
Und btw... Weiß jemand, warum man auf semantische Tags gesetzt hat und nicht auf semantische Attribute (z.B. @semantic)? In manchen Fällen wird es ja eher mehr Code als weniger:
<nav>
<ul>
<li>nav1</li>
<li>nav2</li>
...
<li>navz</li>
</ul>
</nav>
<ul semantic="nav">
<li>nav1</li>
<li>nav2</li>
...
<li>navz</li>
</ul>
Viele Grüße
Siri
-
Hallo Siri!
mal so als Beispiel die Startseite von Spiegel online, Focus etc.
Schematisch in HTML/XHTML:<schnipp>
Daraus würde in HTML5:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body><section id="content">
<article>
<figure><img/><figure>
<h1></h1>
<h2><time></time></h2>
<p></p>
</article>
...
<article>
...
</article>
</section></body>
</html>Und schon reingefallen ...! :-P Das Section-Element gehört da nicht hin. Stattdessen wird weiter ein DIV-Element verwendet. > Jetzt die Frage: Ist das img-Element auf jeden Fall durch ein figure-Element zu kapseln? Laut [Spec](http://dev.w3.org/html5/spec/single-page.html#the-figure-element) nicht. > Oder nur, wenn es auch eine zugehörige Bildunterschrift hat? Nein, das ist nicht das entscheidende Argument. Die figcaption ist optional. > Gibt es da genau Regeln? Vermutlich, aber ich werde aus dem Beispiel in der Spec nicht ganz schlau ...! ;-) Dort steht u.a.:"The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix." > Und btw... Weiß jemand, warum man auf semantische Tags gesetzt hat und nicht auf semantische Attribute (z.B. @semantic)? In manchen Fällen wird es ja eher mehr Code als weniger: Ich weiß das zwar nicht (steht aber bestimmt irgendwo im Netz), aber ein gravierendes Problem bei deinem Vorschlag/ deiner Variante sehe ich schon alleine beim Zusammenspiel mit CSS. Gruß Gunther-
Hallo nochmal!
Und btw... Weiß jemand, warum man auf semantische Tags gesetzt hat und nicht auf semantische Attribute (z.B. @semantic)? In manchen Fällen wird es ja eher mehr Code als weniger:
Ich weiß das zwar nicht (steht aber bestimmt irgendwo im Netz), aber ein gravierendes Problem bei deinem Vorschlag/ deiner Variante sehe ich schon alleine beim Zusammenspiel mit CSS.
Außerdem hättest du ja nach wie vor Tags. Und die Semantik steckt ja schon im Tag selber, jedenfalls bei den allermeisten.
Aber mal davon abgesehen sind die "armen" Attribute ja eh schon schwer strapaziert - Stichworte: WAI-ARIA, Microformats, HTML5 Custom Data
Gruß Gunther
-
Aber mal davon abgesehen sind die "armen" Attribute ja eh schon schwer strapaziert - Stichworte: WAI-ARIA, Microformats, HTML5 Custom Data
Kommt alle zu mir, ihr armen, strapazierten Attribute! Dann knuddel ich euch ein bisschen :-)
-
-
Hallo,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body><section id="content">
<article>
<figure><img/><figure>
<h1></h1>
<h2><time></time></h2>
<p></p>
</article>
...
<article>
...
</article>
</section></body>
</html>> Und schon reingefallen ...! :-P > Das Section-Element gehört da nicht hin. Stattdessen wird weiter ein DIV-Element verwendet. Kann es sein, dass sich an diesem Punkt die Geister schon scheiden? Bei dem was ich nachgelesen (z.B. [hier](http://www.webkrauts.de/2009/09/24/das-endoskelett-einer-webseite/) und [hier](http://html5doctor.com/designing-a-blog-with-html5/)) hab, wird section teils für Seitenbereiche teils für Bereiche innerhalb von <article> benutzt bzw. vorgeschlagen. Oder ist gar der ganze Contentbereich ein <article>? und ein Abschnitt darin eine <section>? Mhmm... > > Jetzt die Frage: Ist das img-Element auf jeden Fall durch ein figure-Element zu kapseln? .. > > Gibt es da genau Regeln? > Vermutlich, aber ich werde aus dem Beispiel in der Spec nicht ganz schlau ...! ;-) > Dort steht u.a.:"The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix." OK... > Ich weiß das zwar nicht (steht aber bestimmt irgendwo im Netz), aber ein gravierendes Problem bei deinem Vorschlag/ deiner Variante sehe ich schon alleine beim Zusammenspiel mit CSS. Wieso? Ich dachte, viele neue Elemente dienen in erster Linie der Semantik? Stylen kann ich doch über Klassen wie bisher. Viele Grüße Siri-
Hallo!
Kann es sein, dass sich an diesem Punkt die Geister schon scheiden? Bei dem was ich nachgelesen (z.B. hier und hier) hab, wird section teils für Seitenbereiche teils für Bereiche innerhalb von <article> benutzt bzw. vorgeschlagen. Oder ist gar der ganze Contentbereich ein <article>? und ein Abschnitt darin eine <section>? Mhmm...
Nein, kann nicht sein! ;-)
Auf beiden von dir verlinkten Seiten steht:
Webkrauts: "Wer einen Container benötigt, um Elemente fürs Styling zusammenzufassen, der sollte weiterhin div verwenden."HTML5Doctor:"Please note: I no longer recommend wrapping the whole content area in a section element, and suggest that you use a div element. Read more about using section appropriately."
Und dann mal dem enthaltenen Link folgen ...!Gruß Gunther
-
Hallo,
Auf beiden von dir verlinkten Seiten steht:
Webkrauts: "Wer einen Container benötigt, um Elemente fürs Styling zusammenzufassen, der sollte weiterhin div verwenden."Das ist doch interpretationsfähig. Ich fasse in erster Linie Inhalt zusammen. Aber wenn es gängige Praxis ist... wegen mir.
Logisch finde ich es nicht, wenn es für alle wichtigen Seitenelemente (nav, aside, header, footer) ein eigenes Element gibt, aber ausgerechnet für das wesentliche einer Seite nicht.
Viele Grüße
Siri-
@@Siri:
nuqneH
Logisch finde ich es nicht, wenn es für alle wichtigen Seitenelemente (nav, aside, header, footer) ein eigenes Element gibt, aber ausgerechnet für das wesentliche einer Seite nicht.
Hixie findet das logisch. Und dass er mit seiner Meinung allein dasteht, kümmert ihn nicht.
Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
-
-
-
Hallo Siri,
Kann es sein, dass sich an diesem Punkt die Geister schon scheiden? Bei dem was ich nachgelesen (z.B. hier und hier) hab, wird section teils für Seitenbereiche teils für Bereiche innerhalb von <article> benutzt bzw. vorgeschlagen. Oder ist gar der ganze Contentbereich ein <article>? und ein Abschnitt darin eine <section>? Mhmm...
für mich ist eine "section" ein Teil eines "article". Eine Seite besteht aus einem (dann kann man es auch weglassen) oder mehreren Artikeln, die ihrerseits mehrere Abschnitte haben können.
Gruß, Jürgen
-
Hallo,
für mich ist eine "section" ein Teil eines "article". Eine Seite besteht aus einem (dann kann man es auch weglassen) oder mehreren Artikeln, die ihrerseits mehrere Abschnitte haben können.
Gruß, Jürgen
Ja, das habe ich auch schon ein paar mal gesehen:
<article>
<figure><img/></figure>
<h1></h1>
<h2><time></time></h2>
<section>
<p></p>
</section>
</article>und auch:
<article>
<header></header>
<figure><img/></figure>
<h1></h1>
<h2><time></time></h2>
<section>
<p></p>
</section>
<footer></footer>
</article>Hier ist die Frage: Unter welchen Umständen unterteile ich einen article in mehrere sections. <p> ist ja auch schon ein Abschnitt.
Und ist eine figure eigentlich ein header oder nur, wenn er über die ganze Breite geht ;-)Viele Grüße
Siri-
Hallo Siri,
wobei ich die Überschrift h2 in die Section nehmen würde.
Gruß, Jürgen
-
مرحبا
Hier ist die Frage: Unter welchen Umständen unterteile ich einen article in mehrere sections. <p> ist ja auch schon ein Abschnitt.
<p>ist genauer genommen ein Absatz. Ein Text besteht in der Regel aus vielen zusammenhängenden Absätzen. Wenn du jetzt innerhalb der vielen Absätze zwei Seperate Absätze benötigst, um bspw. kurz etwas nebensächliches zu erläutern, kannst du das in ein section packen, und so von den anderen Absätzen "abkoppeln".mfg
--
<>
-
-
Hallo Jürgen!
für mich ist eine "section" ein Teil eines "article".
Das ist nur eine von zwei Möglichkeiten ...!
Eine Seite besteht aus einem (dann kann man es auch weglassen) oder mehreren Artikeln, die ihrerseits mehrere Abschnitte haben können.
Vielleicht hilft das folgende Bild weiter: http://html5doctor.com/downloads/h5d-sectioning-flowchart.png
Die "verständlichste" Erklärung ist IMHO diese hier: http://html5doctor.com/the-section-element/
Gruß Gunther
-
-
-
@@Gunther:
nuqneH
Und schon reingefallen ...! :-P
Das Section-Element gehört da nicht hin. Stattdessen wird weiter ein DIV-Element verwendet.Noch. Solange das main-Element noch nicht allgemein unterstützt wird.
Beachte den Unterschied zu „in die Spec aufgenommen ist“. Hixie ist etwas beratungsresistent. Breaking news.
Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)-
@@Gunnar:
nuqneH
Und schon reingefallen ...! :-P
Das Section-Element gehört da nicht hin. Stattdessen wird weiter ein DIV-Element verwendet.Noch. Solange das main-Element noch nicht allgemein unterstützt wird.
Na ja, auch dann ist es ja ein "Ersatz" für ein Div-Element und nicht für ein Section-Element.
Und ehrlich gesagt ist es mir zumindest ziemlich "wurscht", ob ich <div id="main"> oder nur <main> schreibe ...! :-PDennoch sehe ich andernorts durchaus Vorteile darin, ein solches Element auch noch zu haben.
Mir kommt es bis jetzt auch noch immer ein bisschen so vor, als habe der "Erfinder" eigentlich nur Blogs vor seinem geistigen Auge gesehen bei der Entwicklung.
Das fängt doch schon quasi mit diesem "Zwang zur Überschrift" als erstes Kindelement von einem Sectioning-Element an (oder die Section ist "untitled", was ich persönlich wiedrum auch nicht "ideal" finde). Insbesondere denke ich hier an die Millionen von Startseiten einer jeweiligen Website. Die im Idealfall passendste Überschrift für <main> steht ja dann bereits schon im Head im Title. Warum man nicht den als "Root-Title" für die Outline gewählt hat, ist mir u.a. auch nicht so ganz verständlich. Aber daran habe ich mich schon gewöhnt, dass ich nicht immer alles verstehe ...! ;-)
Beachte den Unterschied zu „in die Spec aufgenommen ist“. Hixie ist etwas beratungsresistent. Breaking news.
Das ist ja nix Neues ...! ;-)
Gruß Gunther
-
@@Gunnar Bittersmann:
nuqneH
Hixie ist etwas beratungsresistent. Breaking news.
Ring frei zur nächsten Runde.
O-Ton Hixie: “convince [implementors] to implement it. That would be new data which would almost immediately cause the spec to have it added, regardless of how good an idea it is.”
Das ist HTML5: Was immer in Browsern implementiert ist, kommt in die Spec, egal wie gut die Idee ist.
Kein Kommentar.
Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
-
-
