11 tag HTML insoliti per potenziare le tue capacità di sviluppo web

Punti chiave

• Usa e tag per creare sezioni espandibili, fornendo un'esperienza user-friendly e mantenendo un design pulito.
• Evidenzia i contenuti importanti con il tag, attirando l'attenzione su parole chiave, frasi o risultati di ricerca sulla tua pagina web.
• Aggiungi un significato semantico a date e orari utilizzando il tag, migliorando l'accessibilità per gli utenti con disabilità che utilizzano lettori di schermo.

Come sviluppatore web, dovresti essere esperto nei tag HTML comuni come, , E che rappresentano la struttura e il contenuto delle tue pagine web. Tuttavia, il linguaggio HTML offre molto di più!

Esplorando questi tag unici, puoi migliorare la funzionalità delle tue app web, facendole risaltare dalla massa.

1.

E

Immagina di avere informazioni o contenuti estesi con cui non vuoi sopraffare immediatamente un lettore. IL E i tag vengono in soccorso!

Questi tag lavorano insieme per creare una sezione espandibile con un titolo o un riepilogo che gli utenti del tuo sito web possono fare clic per rivelare. Per impostazione predefinita, il contenuto all'interno dell'elemento dei dettagli non verrà visualizzato, mantenendo la tua pagina ordinata e organizzata.

I tuoi visitatori possono facilmente fare clic sul riepilogo per accedere alle informazioni nascoste.

<details>
<summary>Click to reveal more informationsummary>
<p>This content will be hidden by default but will appear when the user
 clicks the summary.p>
details>

Con questi tag, puoi nascondere ampie sezioni di testo, codice o altre informazioni, fornendo un'esperienza user-friendly pur mantenendo un design pulito. Potrebbero persino aiutarti a perfezionare il tuo competenze come progettista di interfacce.

2.

IL tag ti consente di evidenziare parti specifiche dei tuoi contenuti, facendoli risaltare visivamente. Quando usi il elemento, i browser in genere applicano un colore di sfondo giallo al testo all'interno, attirando l'attenzione del lettore su di esso.

Questa funzione è particolarmente utile quando desideri enfatizzare parole chiave, frasi importanti o risultati di ricerca sulla tua pagina web.

<p>
 You can use the <mark>markmark> tag to highlight important words or
 phrases.
p>

Ad esempio, se il tuo sito web ha funzionalità di ricerca, puoi utilizzare il tag per evidenziare le corrispondenze della query di ricerca nei risultati, facilitando agli utenti la ricerca di informazioni pertinenti.

3.

Ti sei mai imbattuto in situazioni in cui il contenuto diventa obsoleto o non più rilevante, ma desideri comunque visualizzarlo per scopi storici o per indicare i cambiamenti nel tempo?

Inserisci il etichetta! Sta per barrato e rende qualsiasi contenuto all'interno dell'elemento con una linea nel mezzo.

<p>
 This product is <s>out-of-stocks> currently available at a discounted
 price!
p>

In questo esempio, il esaurito il testo verrà visualizzato attraversato da una linea, a indicare che lo stato delle scorte del prodotto è cambiato.

4.

Quando vuoi aggiungere un significato semantico a date e orari nei tuoi contenuti, il file tag torna utile.

Usando il appuntamento attributo, è possibile specificare una versione leggibile dalla macchina della data o dell'ora, che aiuta i browser, i motori di ricerca e gli screen reader a comprendere il contesto.

<p>
 The Declaration of Independence was signed on
<timedatetime="1776-07-04">July 4, 1776time>.
p>

Utilizzando il tag, dai ai tuoi contenuti più struttura e li rendi accessibili a una gamma più ampia di utenti, compresi quelli con disabilità che utilizzano lettori di schermo.

5.

La gestione del testo in più lingue sulla tua pagina web a volte può essere difficile, soprattutto quando ogni parte richiede una formattazione diversa.

IL tag viene in soccorso isolando una parte di testo che il browser dovrebbe trattare diversamente a causa delle diverse esigenze linguistiche.

<p>
<bdi>5,000bdi> people attended the conference.
p>

In questo esempio, il L'elemento avvolge il numero 5,000. Ciò garantisce che, se il testo circostante è in una lingua diversa o richiede una formattazione diversa, non interferirà con il numero.

6. , ,

Per la tipografia dell'Asia orientale, dove le guide alla pronuncia, furigana o altre annotazioni sono comunemente utilizzate sopra o sotto i caratteri, il, , E entrano in gioco i tag.

<p>
 I'm learning
<ruby>漢<rt>かんrt>ruby>字<rp>(rp><rt>Kanjirt><rp>)rp>.
p>

In questo esempio, il L'elemento contiene il carattere 漢 (Kanji), e il L'elemento contiene la pronuncia かん (kan). IL Gli elementi forniscono parentesi di fallback per i browser che non supportano le annotazioni Ruby.

7.

Quando hai parole lunghe che potrebbero rompere il tuo layout, il tag è qui per aiutarti. Suggerisce un'opportunità per un'interruzione di riga (opportunità di interruzione di parole) in una parola lunga, in cui il browser può scegliere di mandare a capo il testo.

<p>
 This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a? query=string.
p>

Nell'esempio precedente, l'URL lungo include a elemento che consente al browser di spezzarlo in due righe se necessario, preservando il layout del contenuto circostante.

8. _E

Per notazioni scientifiche o matematiche, formule chimiche o note a piè di pagina, puoi utilizzare il file E tag per il testo in apice e pedice, rispettivamente.

<p>
 The chemical formula for water is H<sub>2sub>O,
 and the Pythagorean theorem is
 a<sup>2sup> + b<sup>2sup> = c<sup>2sup>.
p>

Questo esempio usa il tag per visualizzare il 2 In H2O come pedice, mentre il i tag mostrano gli esponenti del teorema di Pitagora.

9.

Hai bisogno di rappresentare misurazioni scalari all'interno di un intervallo noto, come l'utilizzo del disco, le valutazioni o i punteggi degli esami? IL tag ti ha coperto.

Usando il valore, min, E max attributi, è possibile definire rispettivamente il valore corrente, il valore minimo e il valore massimo della misurazione.

<metervalue="75"min="0"max="100">75%meter>

In questo esempio, il elemento rappresenta un punteggio dell'esame di 75%.

10.

Quando ne hai bisogno creare una finestra di dialogo o una finestra sovrapposta per i modali O interazioni pop-up modali ben educate, IL tag è la strada da percorrere. Puoi usare il aprire attributo per visualizzare la finestra di dialogo per impostazione predefinita.

<dialogopen>
<p>This is a dialog box!p>
<button>Closebutton>
dialog>

In questo esempio, una semplice finestra di dialogo contenente un paragrafo e un pulsante di chiusura mostra quando la pagina viene caricata, grazie al aprire attributo. Puoi personalizzare il contenuto e il comportamento della finestra di dialogo utilizzando JavaScript per interazioni più avanzate.

11.

Usa il tag per raggruppare le opzioni correlate all'interno di a elemento a discesa. Ti consente di organizzare e classificare le opzioni per facilitare la navigazione e la selezione.

• ILtag è un elemento contenitore che raggruppa elementi correlati tag all'interno di a elemento.
• Aiuta a organizzare le opzioni creando raggruppamenti o categorizzazioni visive all'interno del menu a discesa.
• IL tag richiede un attributo label, che specifica il nome o il titolo del gruppo di opzioni.
• Può contenerne uno o più tag come elementi figlio, che rappresentano le singole opzioni all'interno del gruppo.

Per esempio:

<select>
<optgrouplabel="Asia">
<optionvalue="kr">South Koreaoption>
optgroup>
<optgrouplabel="Europe">
<optionvalue="de">Germanyoption>
optgroup>
select>

Questo esempio raggruppa l'elenco a discesa di selezione in due sezioni: Asia, E Europa. Ogni gruppo contiene tag che rappresentano diversi paesi all'interno di quella regione.

Migliora la tua competenza nello sviluppo web

Imparare questi tag HTML meno conosciuti può migliorare notevolmente le tue capacità di sviluppo web. Nonostante la loro mancanza di riconoscimento, offrono funzionalità preziose per contesti specifici.

L'aggiunta di questi tag al tuo set di competenze migliora l'interattività, l'accessibilità e semplifica il processo di sviluppo web. Ricorda, anche se potrebbero non essere familiari, hanno un impatto significativo sul tuo viaggio come sviluppatore web.