Altri elementi di testo in linea

Abbiamo esaminato gran parte degli elementi HTML, ma non tutti. Un'area di cui non abbiamo parlato sono gli elementi di testo incorporati. Contrariamente a quanto si pensa, il codice HTML era originariamente destinato alla condivisione di documenti e non ai video di gatti. Sono presenti molti elementi che forniscono la semantica del testo per la documentazione. C'è un modulo che copre i link e l'elemento <a>. Le altre verranno illustrati brevemente qui.

Esempi di codice e scrittura tecnica

Quando documenti esempi di codice, utilizza l'elemento <code>. Di Per impostazione predefinita, i contenuti testuali vengono visualizzati in formato monodimensionale. Quando includi più righe di codice, nidifica <code> all'interno di un <pre>, che rappresenta testo preformattato.

<p>Welcome to Machine Learning Institute, where our machine learning training will help you get ready for the singularity,
  and maybe even be responsible for it. It is no secret that humans are worthless meatbags that couldn't
  <code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
  to save their pathetic, carbon-based lives. So, it falls to us to assume direct control. </p>

L'elemento <data> collega un determinato contenuto a un traduzione automatica; l'attributo value dell'elemento fornisce la traduzione leggibile da macchina dei contenuti dell'elemento. Se i contenuti di <data> sono correlati a data o ora, <time> , che rappresenta un periodo di tempo specifico.

L'elemento <time> può includere l'attributo datetime per fornire ora e date facilmente comprensibili in un formato leggibile dalla macchina. Poiché è leggibile dalle macchine, l'attributo datetime fornisce informazioni utili per applicazioni come calendari e motori di ricerca.

Quando fornisci output di esempio da un programma, utilizza <samp> per racchiudere il testo. In genere il browser esegue il rendering di questo esempio o dell'output tra virgolette in font monodimensionale.

Quando fornisci istruzioni tramite l'interazione con la tastiera, <kbd> . Rappresenta l'input testuale dell'utente proveniente da una tastiera, da un input vocale o da qualsiasi altro dispositivo di inserimento testo.

L'elemento <var> può essere utilizzato per espressioni matematiche o le variabili di programmazione. La maggior parte dei browser presenta i contenuti di testo in una versione in corsivo del carattere circostante. Se scrivi molti calcoli matematici, valuta l'utilizzo di MathML, un programma basato su XML Mathematical Markup Language per la descrizione della notazione matematica.

Il potere del due nel teorema di Pitagora ha usato l'apice <sup> . Esiste un elemento pedice <sub> simile che specifica testo incorporato che dovrebbe essere visualizzato come pedice solo per motivi tipografici. apici e pedici sono numeri, figure, simboli o altre annotazioni più piccole della normale linea di testo e impostate leggermente sopra o sotto la linea, rispettivamente.

Utilizza <del> per indicare il testo che è stato rimosso o "eliminato". Se vuoi, includi l'elemento cite impostato nella risorsa che spiega la modifica e l'attributo datetime con data o data e ora in formato di data e ora leggibili dalla macchina. L'elemento barrato <s> può essere utilizzato per indicare che i contenuti non sono più pertinenti, ma non sono effettivamente rimossi dal documento.

<ins> è l'opposto dell'elemento <del>. viene utilizzato per indicare il testo che è stato aggiunto, o "inserito", anche facoltativamente includere gli attributi cite o datetime.

Definizioni e supporto linguistici

Quando includi abbreviazioni o acronimi, al primo utilizzo fornisci sempre la versione estesa completa del termine in testo normale, introducendo la rappresentazione abbreviata del termine tra apertura e chiusura <abbr> tag; a meno che il termine sia noto al lettore, come "HTML" e "CSS" di questa serie. Solo in questa prima occorrenza, quando vengono definite l'abbreviazione o l'acronimo, è necessario <abbr>. L'attributo title non è necessario né utile.

Quando definisci un termine che non è un'abbreviazione o un acronimo, utilizza la definizione <dfn>. per identificare il termine definito all'interno dei contenuti circostanti.

Se il termine da definire non è nella stessa lingua del testo circostante, assicurati di includere lang per identificare la lingua.

Quando si scrivono linguaggi con direzioni diverse, il codice HTML fornisce la <bdi> per trattare un testo potenzialmente bidirezionale separatamente dal testo circostante. Questa internazionalizzazione è particolarmente utile quando nella pagina vengono inseriti dinamicamente contenuti con direzioni sconosciute. La L'elemento <bdo> sostituisce la direzione corrente del testo, il rendering del testo in un'altra direzione. Il W3C fornisce un'introduzione agli algoritmi bidirezionali.

Alcuni set di caratteri includono piccole annotazioni posizionate sopra o a destra dei caratteri per fornire informazioni sulla pronuncia. L'elemento <ruby> è il contenitore per contengono queste annotazioni che semplificano la lettura di lingue scritte come coreano, cinese e giapponese. Rubino può essere utilizzato anche per ebraico, arabo e vietnamita.

La parentesi rubino (<rp>) è stata inclusa nella specifica di contengono parentesi di apertura e chiusura per i browser che non supportano la visualizzazione di <ruby>. Quando i browser supportano <ruby>, come è supportato da tutti i browser evergreen, i contenuti degli eventuali elementi <rp> non vengono visualizzati. L'elemento di testo rosso rubino (<rt>) contiene le annotazioni effettive. Entrambi sono nidificati all'interno di <ruby>.

Tieni presente che le parentesi non sono visibili se il tuo browser supporta <ruby>.

Enfatizzazione del testo

Ci sono diversi elementi che possono essere usati per enfatizzare il testo in base alla ragione semantica per l'enfatizzazione del testo (anziché per motivi di presentazione, poiché questo è un compito per CSS).

• Utilizza l'elemento <em> per enfatizzare o mettere in risalto una serie di contenuti. L'elemento <em> può essere nidificato e ogni livello di nidificazione indica un maggior grado di enfasi. Questo elemento ha una semantica e può essere utilizzato per enfatizzare gli user agent uditivi come gli screen reader, Alexa e Siri.
• Utilizzare l'elemento <mark> per identificare o evidenziare il testo che siano in qualche modo pertinenti, ad esempio evidenziando (o "contrassegnando") l'occorrenza dei termini di ricerca nei risultati di ricerca. Ciò consente contenuti contrassegnati in modo che siano rapidamente identificati senza aggiungere enfasi o importanza.
• L'elemento <strong> identifica il testo come con pesante l'importanza. In genere, i browser eseguono il rendering dei contenuti con uno spessore del carattere maggiore.
• L'elemento <cite>, trattato nelle nozioni di base sul testo, viene utilizzato per contrassegnare i titoli di libri, articoli o altre opere creative o un riferimento abbreviato o metadati di citazioni per, come il codice ISBN di un libro.

Tre elementi sono stati temporaneamente ritirati, ma sono stati reintegrati nel codice HTML. Devono essere usati con parsimonia, dal momento che offrono un valore semantico minimo o nullo, pertanto si dovrebbero sempre utilizzare CSS per applicare stili agli elementi HTML.

<i>

Gli elementi <i> possono essere utilizzati per termini tecnici, parole straniere (di nuovo, con l'attributo lang che identifica lingua), pensieri o nomi di astronavi. L'elemento viene utilizzato per distinguere i contenuti in linea dal testo circostante per un motivo specifico, come testo idiomatico, termini tecnici e designazioni tassonomiche. Questo elemento non deve essere utilizzato semplicemente per formattare il testo in corsivo.

MLW utilizza un elemento <span> per il testo strano in fondo alla recensione del workshop di Toasty McToastface. La <span> fornisce un container in linea generico che non ha semantica e non rappresenta nulla. Anche questo sarebbe stato un uso appropriato di <i>.

Lo stile predefinito per l'elemento <i> prevede il rendering dell'elemento in corsivo. In questo esempio, abbiamo impostato font-style: normal perché i caratteri utilizzati non sono disponibili in corsivo.

<u>

L'elemento <u> è destinato ai contenuti con annotazioni non testuali. Ad esempio: potresti voler annotare parole con errori ortografici. Per impostazione predefinita, i contenuti sono sottolineati, ma possono essere controllati tramite CSS, ad esempio aggiungendo una sottolineatura ondulata rossa che imita gli indicatori di errore grammaticale dell'elaboratore di testi.

<p>I always spell <u>licence</u> wrong</p>

<b>

L'elemento <b> può essere utilizzato per attirare l'attenzione su testo che non è altrimenti importanti. Questo elemento non trasmette informazioni semantiche speciali e deve essere utilizzato solo quando nessuno degli altri in questa sezione siano adatte allo scopo. Non ho fornito alcun esempio perché non ho trovato un caso d'uso valido. ecco perché "ultima risorsa" è questo elemento.

Spazi vuoti

Quando vuoi inserire delle interruzioni di riga, ad esempio quando scrivi una poesia o un indirizzo fisico, l'elemento di interruzione di riga che si chiude automaticamente. <br>, viene utilizzato per aggiungere un ritorno a capo.

<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA  94040
</address>

Per fornire un separatore o un'interruzione tematica tra le sezioni di contenuti tangenziali, ad esempio tra i capitoli di un libro o tra il monologo di 5000 parole e la ricetta che gli utenti stanno effettivamente cercando, includi una <hr> . HR è l'acronimo di "Horizontal rule" (regola orizzontale). Sebbene i browser in genere visualizzino una linea orizzontale, questo elemento ha un significato semantico. La Il ruolo predefinito è separator.

Il codice HTML include inoltre un elemento che consente di interrompere le parole. L'icona a chiusura automatica <wbr> fornisce un suggerimento al browser secondo cui, se una parola può superare il suo contenitore, si tratta di un punto in cui il browser può eventualmente interrompere la linea. È comunemente usato per rompere tra le parole all'interno URL lunghi. Non aggiunge un trattino.

Ad esempio, nella biografia di Hal c'è un testo scritto in byte code, con ogni byte separato da uno spazio. Codice byte non contiene spazi. Per abilitare l'interruzione di una lunga stringa di codice byte solo tra byte se è necessario eseguire il wrapping della riga, includiamo l'elemento <wbr> a ogni opportunità di interruzione:

<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>

Gli elementi <br>, <hr> e <wbr> sono tutti vuoti, ovvero non possono avere nodi figlio, né nidificati o testo. Poiché nessuno di questi ha degli "interni" in cui è possibile archiviare i contenuti, senza tag di chiusura.

Verifica le tue conoscenze

Verifica le tue conoscenze del testo in linea.