Tag relativi al testo

Questo articolo spiega i tag relativi al testo.

La spiegazione è divisa in tag semantici e non semantici.

YouTube Video

Creare CSS per l'anteprima

  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 20px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29}
 30
 31p, pre {
 32    margin: 10px 0;
 33    padding: 0;
 34}
 35
 36ul, ol, dl, menu {
 37    margin: 0;
 38}
 39
 40pre {
 41    background-color: #f0f0f0;
 42    border-left: 4px solid #ccc;
 43    padding: 10px;
 44    overflow-x: auto;
 45}
 46
 47p.sample, .sample {
 48    background-color: #e7f4e9;
 49    padding: 10px;
 50    border-left: 4px solid #7bbd82;
 51    color: #333;
 52}
 53
 54p.sample-error, .sample-error {
 55    background-color: #f4e7e7;
 56    padding: 10px;
 57    border-left: 4px solid #bd827b;
 58    color: #333;
 59}
 60
 61p.sample-warn, .sample-warn {
 62    background-color: #f4f1e7;
 63    padding: 10px;
 64    border-left: 4px solid #bda97b;
 65    color: #333;
 66}
 67
 68code {
 69    padding: 2px 4px;
 70    border-radius: 4px;
 71    font-family: monospace;
 72}
 73
 74span {
 75    font-weight: bold;
 76}
 77
 78main {
 79    padding-bottom: 100px;
 80}
 81
 82article {
 83    background-color: white;
 84    padding: 20px;
 85    margin-bottom: 10px;
 86    border-radius: 8px;
 87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 88}
 89
 90section {
 91    margin-bottom: 20px;
 92}
 93
 94table {
 95    width: 100%;
 96    border-collapse: collapse;
 97}
 98
 99th, td {
100    border: 1px solid #ddd;
101}

Tag di base relativi al testo

Tag <div>

1<div>This is a division of content.</div>

• Il tag <div> è un elemento a livello di blocco usato per creare divisioni all'interno dell'HTML.

• Il tag <div> è un tag non semantico.

  Quando ci si concentra sull'HTML semantico, è possibile utilizzare tag significativi (come <section>, <article>). Questo aiuta i motori di ricerca e i lettori di schermo a comprendere meglio il contenuto della pagina.

• Combinandolo con CSS e JavaScript, puoi controllare l'aspetto e il comportamento della pagina.

  Il tag <div> viene utilizzato per raggruppare contenuti su una pagina come elemento a livello di blocco. Viene utilizzato principalmente in combinazione con CSS e JavaScript per regolare il layout della pagina, lo stile e manipolare gli elementi.

Tag <p>

1<p>This is a paragraph of text.</p>

• Il tag <p> è un elemento utilizzato per definire un paragrafo in HTML. Il <p> rappresenta un paragrafo ed è usato principalmente per raggruppare e visualizzare testo. Aiuta a rendere il contenuto più leggibile separando visivamente le sezioni di testo.
• Non puoi inserire altri elementi a livello di blocco come un altro tag <p> o un tag <div> all'interno di un tag <p>. Questo è proibito dalla specifica HTML. Se lo fai, il browser chiuderà automaticamente il tag, e non verrà visualizzato correttamente.

Tag <a>

1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>

• Il tag <a> viene utilizzato per creare collegamenti.

  Il tag <a> viene utilizzato per creare collegamenti ad altre pagine, siti esterni o file. L'attributo href viene utilizzato per specificare la destinazione del collegamento.

• Può essere utilizzato per collegamenti di testo o immagini, e utilizzando target="_blank" il collegamento si aprirà in una nuova scheda.

• L'attributo target è usato per specificare come verrà visualizzata la destinazione del collegamento.

  • _self (predefinito): Apre il collegamento nella finestra o scheda corrente.
  • _blank: Apre il collegamento in una nuova finestra o scheda.
  • _parent: Apre il collegamento nel frame genitore.
  • _top: Apre il collegamento nella finestra intera, ignorando qualsiasi frame.

• L'attributo title viene utilizzato per visualizzare un suggerimento su un collegamento. Quando un utente passa il mouse sopra il link, viene visualizzato il titolo specificato.

1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>

• Il tag <a> è anche usato per saltare a posizioni specifiche all'interno della stessa pagina. Per ottenere questo risultato, imposti un attributo id sull'elemento di destinazione e usi questo id nell'attributo href del link.

Tag <span>

1Here is some <span style="color: red;">highlighted text

• Il tag <span> è un elemento inlinea.

  Il tag <span> è un elemento inline, quindi non interrompe la riga quando è usato tra testo, link, immagini o altri elementi inline. Si integra naturalmente nel flusso della pagina.

• È possibile applicare stili specifici parzialmente.

  Quando vuoi applicare uno stile solo a una parte del documento, puoi usare il tag <span> per assegnare una classe o un ID CSS e applicare stili a un intervallo specifico.

• Il tag <span> è un elemento non semantico.

  Poiché il tag <span> non ha un significato o un ruolo strutturale specifico, è usato puramente per scopi di stile o di scripting. Quando è necessario un'enfasi semantica, è più appropriato usare tag semantici come <strong> o <em>, che verranno introdotti più avanti.

Tag <br>

1Here is some text with a <br> line break.

• Il tag <br> è un elemento inlinea.

  Poiché il tag <br> è un elemento inline, non occupa l'intero blocco e crea un'interruzione di riga nel testo dove è posizionato. Mentre il tag <p> aggiunge margine sopra e sotto per separare i paragrafi, il tag <br> crea un'interruzione di riga senza aggiungere alcun margine.

• È un tag auto-chiudente, quindi non è necessario un tag di chiusura (</br>).

• È meglio evitare di usarlo troppo e usare i tag <p> o CSS per le interruzioni di paragrafo o per gli aggiustamenti del layout.

  Quando si organizza il testo in paragrafi, è più appropriato usare il tag <p>. È anche consigliato usare il CSS per gli aggiustamenti del layout. Ad esempio, l'uso della proprietà white-space in CSS può mostrare le interruzioni di riga e gli spazi nel testo come appaiono.

Tag <hr>

1This is some text.<hr>This is another section of text.

• Il tag <hr> è un elemento a livello di blocco.

  Il tag <hr> è usato per inserire una linea orizzontale per separare visivamente sezioni di contenuto. Può anche essere usato per indicare una pausa tematica, dandogli significato in base al contesto.

• È un tag auto-chiudente, quindi non è necessario un tag di chiusura (</hr>).

• Puoi personalizzare il suo colore, lunghezza e spessore usando il CSS.

Tag relativi al testo semantico

Dal tag <h1> al tag <h6>

1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>

• I tag <h1> a <h6> sono tag di intestazione usati in HTML.

  Il tag <h1> rappresenta l'intestazione più importante ed è tipicamente usato come titolo principale dell'intera pagina. È comune usare solo un tag <h1> per documento HTML.

  Il tag <h2> è l'intestazione successiva più importante dopo <h1> ed è usato per i titoli di sezione o di capitolo all'interno della pagina.

  Il tag <h3> rappresenta sottotitoli o sezioni più piccole sotto <h2>.

  I tag <h4>, <h5>, e <h6> rappresentano intestazioni di livello inferiore, usate per elementi più dettagliati o titoli di sezione.

• I tag di intestazione indicano l'importanza del testo e aiutano a creare la struttura logica di una pagina. I motori di ricerca usano anche i tag di intestazione per capire il contenuto della pagina.

Tag <strong>

1<strong>Important text</strong> to emphasize significance.

• Il tag <strong> è un tag HTML usato per indicare l'importanza o l'enfasi del testo ed è tipicamente visualizzato in grassetto.

• Il tag <strong> è un tag semantico, e il suo scopo principale è aggiungere significato.

  Può indicare che il testo è contestualmente importante. Ad esempio, può mostrare l'importanza del testo ai motori di ricerca, rendendolo utile per la SEO. Convegna anche l'importanza del testo agli utenti con lettori di schermo. D'altro canto, il tag <b>, che verrà introdotto più avanti, è semplicemente un tag per rendere il testo in grassetto e non fornisce enfasi semantica.

Tag <em>

1<em>Emphasized text</em> for italics and emphasis.

• Il tag <em> è un tag HTML usato per indicare importanza o enfasi nel testo ed è solitamente visualizzato in corsivo.

• Il tag <em> è un tag semantico, e il suo scopo principale è fornire significato.

  Come il tag <strong>, può indicare che il testo è contestualmente importante. Il tag <strong> è solitamente visualizzato in grassetto, mentre il tag <em> è tipicamente visualizzato in corsivo. Entrambi sono riconosciuti dai lettori di schermo e dai motori di ricerca per l'enfasi semantica, ma <strong> indica un'importanza maggiore, mentre <em> trasmette enfasi emotiva. Inoltre, il tag <i>, che verrà introdotto più avanti, semplicemente mette il testo in corsivo e non fornisce enfasi semantica.

Tag <mark>

1<mark>Highlighted text</mark> for attention.

• Il tag <mark> è usato per indicare che un determinato testo è contestualmente importante. È utile per evidenziare i risultati di ricerca o i punti chiave.
• Per default, il testo racchiuso nel tag <mark> viene visualizzato con uno sfondo giallo, enfatizzando visivamente la sua importanza.

Tag <del>

1<del>Deleted text</del> shows removed content.

• Il tag <del> è usato per indicare che il testo è stato cancellato o modificato. Questo tag è utile per mostrare la cronologia delle modifiche o revisioni al testo.

• Il testo racchiuso nel tag <del> è solitamente visualizzato con una barratura. Questo indica visivamente il contenuto eliminato.

  Il testo racchiuso nel tag <del> è anche riconosciuto come eliminato dai lettori di schermo. Questo consente di comprendere anche contenuti non visivamente evidenti.

Tag <ins>

1<ins>Inserted text</ins> shows added content.

• Il tag <ins> viene utilizzato per indicare testo aggiunto o modificato di recente in un documento. Questo tag è utile per mostrare la cronologia delle aggiunte o revisioni del testo.

• Nei browser, il testo racchiuso nel tag <ins> è tipicamente visualizzato con una sottolineatura. Questo indica visivamente il contenuto aggiunto.

  Il testo racchiuso nel tag <ins> è anche riconosciuto come nuovo dai lettori di schermo. Questo consente di comprendere anche contenuti non visivamente evidenti.

Tag <abbr>

1<abbr title="World Health Organization">WHO</abbr>

• Il tag <abbr> è un elemento in linea utilizzato per indicare abbreviazioni o acronimi. L'uso di questo tag fornisce il significato completo delle abbreviazioni e contribuisce a migliorare SEO e accessibilità. Aiuta in particolare i lettori non familiari con l'abbreviazione e gli utenti di lettori di schermo a comprendere meglio il suo contenuto.

Tag relativi alla decorazione del testo

Tag <b>

1<b>Bold text</b> without semantic emphasis.

• Il tag <b> è un elemento in linea utilizzato per rendere il testo in grassetto. Come gli altri tag che presenteremo, viene utilizzato per l'enfasi visiva ma non per l'enfasi semantica.

Tag <i>

1<i>Italic text</i> for style.

• Il tag <i> è un elemento in linea utilizzato per rendere il testo in corsivo.

Tag <u>

1<u>Underlined text</u> for decoration.

• Il tag <u> è un elemento in linea utilizzato per sottolineare il testo.

Tag <small>

1<small>This is small text.</small>

• Il tag <small> è un elemento in linea usato per visualizzare il testo in dimensioni più piccole. È comunemente usato per rappresentare informazioni supplementari o annotazioni che sono secondarie al contenuto principale.

Tag <s>

1<s>Strikethrough text</s>

• Il tag <s> è un elemento in linea usato per tracciare una linea di cancellazione sul testo.

Tag <sub>

1H<sub>2</sub>O

• Il tag <sub> è un elemento in linea usato per visualizzare il testo in apice.

Tag <sup>

1E = mc<sup>2</sup>

• Il tag <sup> è un elemento in linea usato per visualizzare il testo in apice.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video