<figure>

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.

Notes d'ùs:
  • 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>
MDN Logo

 

MDN Logo
Fig1. MDN Logo

 

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>
Obtenir informació del navegador utilitzant navigator
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>
Edsger Dijkstra :-

"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  

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

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,