This translation is incomplete. Please help translate this article from English.
L'element HTML <figure> representa un contingut autònom, sovint amb una llegenda (<figcaption>), i normalment es fa referència com una sola unitat. Si bé es relaciona amb el flux principal, la seva posició és independent del corrent principal. Normalment això és una imatge, una il·lustració, un diagrama, un fragment de codi o un esquema que es fa referència en el text principal, però que es poden moure a una altra pàgina o un apèndix sense afectar el flux principal.
- Sent una arrel de seccionament, el contorn del contingut de l'element
<figure>s'exclou de l'esquema principal del document. - Una llegenda pot ser associada amb l'element
<figure>introduint dins d'aquest un<figcaption>(com el primer o l'últim fill).
| Categories de contingut | Contingut dinàmic, seccionament arrel, contigut palpable. |
|---|---|
| Permitted content | Un element <figcaption>, seguit per contingut dinàmic; or contingut dinàmic seguit per un element <figcaption>; o contingut dinàmic. |
| Tag omission | Cap, tant l'etiqueta inicial com l’etiqueta final són obligatòries |
| Permitted parent elements | Qualsevol element que accepti contingut dinàmic. |
| DOM interface | HTMLElement |
Atributs
Aquest element només inclou els atributs globals.
Exemples
Exemple 1
<!-- Just a figure --> <figure> <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture"> </figure> <p></p> <!-- Figure with figcaption --> <figure> <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture"> <figcaption>Fig1. MDN Logo</figcaption> </figure> <p></p>
Exemple 2
<figure>
<figcaption>Get browser details using navigator</figcaption>
<pre>
function NavigatorExample() {
var txt;
txt = "Browser CodeName: " + navigator.appCodeName;
txt+= "Browser Name: " + navigator.appName;
txt+= "Browser Version: " + navigator.appVersion ;
txt+= "Cookies Enabled: " + navigator.cookieEnabled;
txt+= "Platform: " + navigator.platform;
txt+= "User-agent header: " + navigator.userAgent;
}
</pre>
</figure>
function NavigatorExample() {
var txt;
txt = "Browser CodeName: " + navigator.appCodeName;
txt+= "Browser Name: " + navigator.appName;
txt+= "Browser Version: " + navigator.appVersion ;
txt+= "Cookies Enabled: " + navigator.cookieEnabled;
txt+= "Platform: " + navigator.platform;
txt+= "User-agent header: " + navigator.userAgent;
}
Exemple 3
<figure> <figcaption><cite>Edsger Dijkstra :-</cite></figcaption> <p>"If debugging is the process of removing software bugs, <br /> then programming must be the process of putting them in"</p> </figure>
"Si la depuració és el procés d'eliminació d'errors del programari, la programació ha de ser el procés de posada en"
Exemple 4
L'element <figure> es podria utilitzar per al marcatge d'un poema.
<figure> <p> Depression is running through my head,<br> These thoughts make me think of death,<br> A darkness which blanks my mind,<br> A walk through the graveyard, what can I find?.... </p> <figcaption><cite>Depression</cite>. By: Darren Harris</figcaption> </figure>
Especificacions
| Especificació | Estat | Comentari |
|---|---|---|
| WHATWG HTML Living Standard The definition of '<figure>' in that specification. |
Living Standard | |
| HTML5 The definition of '<figure>' in that specification. |
Recommendation |
Navegadors compatibles
| Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Suport bàsic | 8 | 4.0 (2.0) | 9.0 | 11.10 | 5.1 |
| Característica | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Suport bàsic | 3.0 | 4.0 (2.0) | 9.0 | 11.0 | 5.1 (iOS 5.0) |
Veure
- L'element
<figcaption>.