Mr. Webmaster Menu
  • Home
  • Cerca
  • Didattica
    • A
    • Android
    • Apache
    • Apple
    • ASP
    • ASP.Net
    • C
    • Cloud
    • CMS
    • CSS
    • D
    • Database
    • E
    • Editor
    • G
    • Grafica
    • H
    • Hosting
    • HTML
    • J
    • Java
    • Javascript
    • jQuery
    • L
    • Leggi e Fisco
    • Linux
    • M
    • Mobile
    • MySQL
    • N
    • NET Framework
    • P
    • Photoshop
    • PHP
    • Primi Passi
    • Programmazione
    • R
    • Reti
    • Ruby
    • S
    • Sicurezza
    • Social Media
    • SQL
    • W
    • Web Design
    • Web Marketing
    • Web Server
    • Windows
    • WordPress
    • X
    • XML
    • Di tendenza
    • Android Studio
    • Bootstrap
    • Cookie Law
    • Hosting Wordpress
    • Node.js
    • Registrazione Domini
  • Download
    • Software
    • Script
    • Plugin CMS
    • Flash Movies
    • Sound Loops
    • Templates
    • Web Grafica
    • Font Gratis
  • Risorse
    • SEO Tools
    • WebApps
  • News
  • Blog
  • Forum
  • Network
    • Toolset.it
    • SiteMarket.it
    • Codalo.it
  • Corsi on-line
Mr. Webmaster → HTML → Guide → Guida HTML5 → Organizzare i contenuti con HTML5 - figure e figcaption

Organizzare i contenuti con HTML5 - figure e figcaption

  • CommentaScrivi un commento
  • ForumDiscuti sul forum
  • PrecedenteOrganizzare i contenuti con HTML5 - header, hgroup e footer
  • SuccessivoI media elements di HTML5: video, audio, source e track
  • Pubblicato il
  • 22/02/2012
  • Autore
  • Riccardo Brambilla

figure e figcaption

Definizione formale di figure

L'elemento figure rappresenta un insieme di elementi e testo, opzionalmente corredato da una didascalia, indipendente e tipicamente riconoscibile come entità atomica (nell'accezione di inscindibile) all'interno del documento.

Definizione formale di figcaption

L'elemento figcaption rappresenta la didascalia o legenda per il resto del contenuto dell'elemento che ne è parent (contenitore diretto), ossia dell'elemento figure.

Il draft indica tra gli usi consigliati della coppia figure-figcaption: illustrazioni, diagrammi, foto, frammenti di codice; i perfetti candidati sono elementi referenziati dal contenuto principale della pagina, ma che se anche fossero spostati in altre sezioni, ad esempio a lato della pagina stessa, non ne intaccherebbero il significato generale.

L'impiego tipico è il posizionamento e la descrizione di un immagine:

<!doctype html>
<html>
  <head>
    <style>
    body {
      font-family: "Tahoma", "Arial", sans-serif;
      font-size: 12px;
      letter-spacing: 1px;
    }
    figure {
      width: 280px;
      height: 380px;
      text-align: center;
    }
    figure img {
      padding: 10px;
      border: 1px solid #888;
    }
    </style>
</head>
<body>
<figure>
  <img src="bambola.png" alt="bambola">
  <figcaption>Operazione alla bambola!</figcaption>
</figure>
</body>
</html>

Il risultato su Firefox:

bambola

N.B.: Non è obbligatorio indicare una figcaption.

Continua dopo la pubblicità...

L'elemento figure trova applicazione non solo per le immagini, può essere utilizzato anche per contenere video; ne è consentito l'uso anche con del semplice testo, magari per evidenziare una citazione, come indicato nelle specifiche:

<figure>
  <p>Cum in Italiam proficisceretur Caesar, Ser. Galbam cum legione XII ... </p>
  <figcaption><cite>Giulio Cesare (incipit Libro III). De bello Gallico, 50 A.C.</cite></figcaption>
</figure>

Va inoltre sottolineato come sia possibile inserire più elementi (ad esempio immagini) all'interno di figure, descritti da una unica didascalia:

<figure>
  <img src="casa-1.jpg" alt="foto originale"/>
  <img src="casa-seppia.jpg" alt="foto virata seppia"/>
  <img src="casa_bw.jpg" alt="foto bw"/>
  <figcaption>Le immagini mostrano i vari effetti grafici applicabili.</figcaption>
</figure>

Sfoglia le lezioni della guida

←Organizzare i contenuti con HTML5 - header, hgroup e footer
→I media elements di HTML5: video, audio, source e track

Commenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.
  • Facebook
  • Twitter
  • Google+
  • YouTube
  • App Android
  • App iOS
  • Feed RSS
Frequenta i nostri corsi
  • Corso HTMLCorso HTML
    Il linguaggio di markup delle pagine web. A partire da 29 €
  • Corso HTML5Corso HTML5
    Creare pagine web di ultima generazione sfruttando la potenza di HTML5. A partire da 49 €
  • Corso Web DesignCorso Web Design
    Webdesign e Responsive Design dei siti Web. A partire da 49 €
Vedi anche...
  • Immagine di sfondo ad un sito web con HTML
  • Impostare un colore di sfondo in HTML
  • Il tag <body> di HTML
  • HTML: gestire spazi bianchi e tabulazioni
  • Le Web Audio API di HTML5
Altre Guide
  • Guida HTML
  • Guida XHTML
Mr. Webmaster
  • RSS
  • Contattaci
  • Torna su
IKIweb
© 2003 - 2018 Mr. Webmaster
Mr. Webmaster ® è un marchio registrato.
E' vietata ogni forma di riproduzione.
IKIweb Internet Media S.r.l. - P.IVA 02848390122

Parliamo di noi: chi siamo / cronologia
Contatti: pubblicità / contattaci / segnala abusi
Note Legali: info legali / privacy / cookie
Altro: extra / sondaggi / sitemap