Elementi HTML aggiuntivi

Nelle attività precedenti hai appreso:

  • Nozioni di base su tag ed elementi HTML.
  • Come strutturare una pagina web.
  • HTML semantico e best practice.

Con questo articolo, puoi continuare ad ampliare le tue conoscenze di HTML e a trattare altri elementi HTML.

<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>

Questi elementi supportano la creazione di contenuti testuali e aggiungono struttura, stile e significato. Esistono diversi contenuti testuali che possono includere i seguenti elementi.

L'elemento citazione

<blockquote cite="https://www.goodreads.com/quotes">
    <p>Be the change that you wish to see in the world.</p>
</blockquote>

Questo esempio mostra come utilizzare l'elemento <blockquote>, che mostra una famosa citazione del Mahatma Gandhi. Ci sono tantissime citazioni di alta qualità che forniscono contenuti e significato memorabili. Pensa ad alcune delle tue figure motivazionali preferite e alle loro citazioni.

Utilizza l'elemento <blockquote> quando utilizzi citazioni e fai riferimento a informazioni da una fonte. L'elemento <blockquote> crea un rientro e un allineamento univoci nella presentazione e utilizza un tag di apertura e un tag di chiusura. Un <blockquote> è particolarmente utile quando si utilizzano citazioni più lunghe che coprono più righe di testo.

Puoi utilizzare anche vari elementi all'interno di un elemento <blockquote>, ad esempio un'intestazione, un paragrafo o un elenco.

Elemento <details>

<details>
   <summary>Details</summary>
   Additional Information
</details>

Spesso, una pagina web contiene una sezione Domande frequenti e informazioni aggiuntive disponibili per l'utente. Esistono sezioni di domande frequenti comuni per le informazioni sul prodotto, l'itinerario di viaggio o qualsiasi tipo di scenario di domanda e risposta.

L'elemento <details> è utile utilizzando un widget divulgato che contiene informazioni aggiuntive. L'elemento include una funzionalità di attivazione/disattivazione integrata e l'utente può aprire e chiudere il pulsante di attivazione/disattivazione. Quando il pulsante di attivazione/disattivazione è aperto, i contenuti aggiuntivi si espandono e possono essere letti dall'utente. Quando il pulsante di attivazione/disattivazione è chiuso, i contenuti delle informazioni aggiuntive sono nascosti all'utente. Per assegnare un nome al widget <details>, usa l'elemento <summary>.

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
     alt="Google logo">
  <figcaption>Google logo</figcaption>
</figure>

Questo è l'elemento <figure> in azione. Come puoi vedere, puoi utilizzare <figure>, insieme all'elemento <figcaption>, per migliorare l'esperienza visiva.

Vedi immagini su tutto il web e altri dati visivi utili sempre. Gli elementi visivi contribuiscono ad attirare l'attenzione del visitatore e a creare un'esperienza utente ottimale. L'elemento <figure> è un modo per etichettare un'immagine, una tabella, un grafico e così via. Funziona creando contenuti autonomi rispetto ai contenuti principali.

Elemento <time>

<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>

L'elemento <time> fornisce sia significato sia semantico, consentendo una migliore funzionalità con attività come la pianificazione di un appuntamento online, la pubblicazione di una data e un'ora per un articolo di blog, archivi e così via. Alcuni esempi di siti web che potrebbero essere utilizzati con l'elemento <time> includono l'utilizzo di Google Calendar, la pubblicazione di un articolo live su una piattaforma o la lettura di archivi storici online da un sito web di una biblioteca.

L'elemento <time> fa riferimento all'ora e può rappresentare l'ora di un formato di 24 ore o di una data specifica in base al fuso orario e alla località. Questo elemento richiede un tag di apertura e uno di chiusura, <time> e </time>. Puoi aggiungere l'attributo datetime in modo che le date possano essere lette in un formato leggibile da macchina.

Metadati dei documenti

<title>Sarah's Favorite Food Recipes</title>

Ogni volta che digiti l'URL di un sito web, vedrai un nome <title> che può essere letto nella barra del browser o nella scheda della pagina web. È il nome del titolo di una pagina web. Questo elemento è importante e viene utilizzato da un motore di ricerca per visualizzare un elenco di pagine web correlate nei risultati di ricerca. La lunghezza del titolo può variare da breve e descrittivo a più lungo e più descrittivo.

Scenario: stai pensando a una pagina web, ma non riesci a ricordare l'URL del sito web specifico. Digita le parole chiave in un motore di ricerca. Il motore di ricerca aiuta a trovare la pagina web che stai cercando e puoi visualizzare il nome <title> mostrato nella ricerca.

Elementi dei contenuti incorporati

Oltre ai contenuti di testo, è possibile utilizzare una serie di elementi di contenuto aggiuntivi.

Elemento <iframe>

<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>

Quando termini l'acquisto di articoli online e fai clic sull'opzione di pagamento, ad esempio PayPal o Apple Pay, in genere queste funzionalità vengono aggiunte a una pagina web con una <iframe>. Visualizzare una mappa online per cercare un'attività locale è un'altra esperienza comune. Questi tipi di esperienze utente su una pagina web possono essere aggiunti con un iframe. Nell'esempio precedente, puoi vedere l'URL di Wikipedia all'interno di un iframe, chiamato "Wikipedia".

L'elemento <iframe> ti consente di inserire contenuti da un'altra fonte e incorporare un frame all'interno di una pagina web. Crea un riquadro di forma rettangolare e visualizza i contenuti nel browser. Un frame consente la presentazione di un layout a forma di finestra all'interno di un elemento <iframe>. È un modo efficace per aggiungere contenuti alla tua pagina web per migliorare l'esperienza.

Elementi del modulo

<progress max="100" value="30"> 30% </progress>

Quando guardi un video più lungo, una lezione o quando compili un'applicazione estesa, avere una barra di avanzamento visiva può essere utile per monitorare i tuoi progressi. L'elemento <progress> è utile per questi tipi di scenari.

Questo elemento è raffigurato come una barra visiva con un colore di sfondo. La barra visiva può variare per dimensioni e colore di sfondo. Con la barra di avanzamento, puoi utilizzare facoltativamente gli attributi max e value. L'attributo max imposta il numero in virgola mobile, mentre l'attributo value indica il grado di avanzamento relativo a un'attività.

Definisci i tuoi contenuti

<canvas id="canvas"></canvas>

Per poter disegnare grafici e animazioni in tempo reale, utilizza l'elemento <canvas>. Inserisci l'elemento <canvas> nella pagina web HTML per creare una tela. Questo elemento richiede il codice JavaScript per consentire la funzionalità di disegno e creazione di grafica.

Elementi dei contenuti della tabella

<table>
    <thead>
        <tr>
            <th colspan="2">Grocery List</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Broccoli</td>
            <td>Quantity: 2</td>
        </tr>
    </tbody>
</table>

Elemento <table>

L'elemento <table> crea una tabella. Questo è il punto di partenza per aggiungere ulteriori elementi con righe e colonne. Le tabelle vengono visualizzate spesso sulle pagine web, per essere un modo utile per organizzare e mostrare le informazioni. Un caso d'uso per utilizzare l'elemento <table> consiste nel presentare all'utente informazioni tabulari, ad esempio il tipo di informazioni che puoi trovare in un foglio di lavoro.

Elemento <th>

L'elemento <th> è l'intestazione di un gruppo di celle.

Elemento <tr>

L'elemento <tr> definisce una riga di celle all'interno di una tabella. Da qui, puoi aggiungere dati specifici delle celle.

Elemento <td>

L'elemento <td> crea la cella, aggiungendo i contenuti necessari.

Conclusione

In questo articolo, hai scoperto elementi HTML aggiuntivi e hai sviluppato le tue competenze di programmazione. Hai appreso di più su contenuti, testo in linea, contenuti incorporati ed elementi delle tabelle. Ora hai sviluppato la tua comprensione degli elementi HTML aggiuntivi. Continua così!