Blog

5 tag e attributi html che potresti non conoscere

Come ben sai, soprattutto se hai seguito approfonditamente la nostra guida all’ html e css,  il linguaggio HTML è un linguaggio che permette di creare e costruire pagine web e di visualizzare al suo interno testi, immagini, link e via discorrendo. Si tratta dell’acronimo di Hyper Text Markup Language, infatti, HTML è un linguaggio di markup, non un linguaggio di programmazione, come lo sono, invece, per esempio, i vari C#, Python e tutti quelli che necessitano di una logica all’interno dello script per poter essere eseguiti. Il linguaggio HTML permette di impaginare e formattare le pagine, anche collegate tra loro. Spesso bisogna affiancare un linguaggio per dei contenuti più ricchi ed elaborati all’interno della pagina (come, ad esempio, il linguaggio JavaScript o il linguaggio CSS).

Ti ricordi? Avevamo detto che per inserire elementi di vario tipo nel testo (paragrafi, titoli, sottotitoli, elenchi puntati…) che viene visualizzato, si utilizzano i marcatori ovvero i famosi tag .
I tag possono essere corredati di uno o più attributi html che servono per meglio specificare la funzione che il tag deve compiere o la tipologia dell’elemento o memorizzare dati per arricchire di significato il contenuto.

I tag sono necessari per inserire collegamenti ipertestuali, immagini, video, liste e tabelle di dati, ma anche gestire moduli o form per inserire dei dati.
La sintassi dei tag, ricordiamo, è banalmente definita in questo modo: 

<title>
…
</title>

 

inserendo, cioè, tra le due istruzioni ciò che si vuole mostrare sulla pagina web che si sta realizzando. Ciò che si inserisce, ovviamente, dipende dal tipo di tag. Nel caso del tag title, ad esempio, si tratta di inserire un titolo da assegnare al documento.

E, fino a qui, tutto bene: niente di nuovo sotto il sole!
Andando più in profondità con i tag e attributi html scoprirai, però, che ce n’è una vasta gamma da cui attingere nel momento in cui stai per creare un sito web. Andiamo, oggi, ad elencarne 5 che, soprattutto se sei alle prime armi, potresti non conoscere! Vedrai che questi tag possono rivelarsi veramente utili nel momento del bisogno, specialmente se vuoi dare quel tocco in più alla tua pagina web: ma, bando alle ciance, cominciamo! 

 

1. Il tag <script>
Il tag <script> è utilizzato per incorporare uno script del linguaggio JavaScript lato client. L’elemento contiene uno script o accede a file contenenti uno script tramite l’attributo src. Qui di seguito un banale esempio per scrivere “Hello World!” in JavaScript tramite il tag:  

<script>
   document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

 

2. L'attributo multiple
Tutti conosciamo il tag <input>, che definisce un controllo di input a seconda del valore dell’attributo obbligatorio type che è un attributo molto potente per specificare il tipo di input in cui l’utente deve inserire dati o premere un bottone. Si tratta dell’elemento più importante del form che si sta strutturando e dipende totalmente dall’attributo type.

Ma spesso si rivela utile inserire un altro attributo – ed è lui che potrebbe esserti estraneo!! – ovvero multiple, che consente (combinato l’attributo type) di inserire più valori in input. Fondamentale se, per esempio, in un campo si vogliono inserire più file o email.

<input type="email" multiple>

 

3. Il tag <abbr>
Il tag <abbr> consente di mostrare, all’hover di una parola abbreviata o un acronimo, il suo significato per esteso, che andrà inserito in un attributo title.

Ci spieghiamo meglio con un esempio pratico per vedere come funziona!

<p> L’<abbr title=" Hyper Text Markup Language"> HTML </abbr> è un linguaggio di markup </p>

All’ hover sull’acronimo HTML, comparirà la scritta “hyper text markup language”. Comodo, no?
 

4. L’attributo download

L’attributo download è uno dei più potenti e serve per scaricare una risorsa indicando al browser di scaricare l’URL specificato nel campo anziché accedervi. Utilizzabile spesso, ma bisogna stare attenti perché funziona solo con URL della stessa origine, seguendo la same-origin policy. È facilmente utilizzabile con il tag <area> che definisce un’area all’interno di una mappa immagine. Questi elementi sono sempre innestati nel tag <map> che definisce una mappa all’interno di una immagine lato client. 

 

<img src="workplace.jpg" alt="Workplace" usemap="#workmap"
width="400" height="379">
  <map name="workmap">
     <area shape="rect" coords="34,44,270,350" alt="Computer"
     href="computer.htm">
     <area shape="rect" coords="290,172,333,250" alt="Phone"
     href="phone.htm">
     <area shape="circle" coords="337,300,44" alt="Cup of coffee"
     href="coffee.htm">
  </map>

 

5. L'attributo contenteditable
Un altro attributo molto potente che dovresti conoscere è contenteditable che rende modificabile il contenuto sulla pagina web che stai creando. Si tratta di un attributo globale, comune a tutti gli HTML, ma che diventa dal duttile utilizzo con il tag <button> . Si tratta di un tag molto semplice, ma se lo utilizzi con JavaScript come nell’esempio riportato, diventerà molto divertente da utilizzare su una pagina web! In questo modo potrai, ad esempio, togliere o mettere il grassetto su un paragrafo editabile tramite un bottone, il tutto all’interno della pagina web.

 

<p contenteditable>
  Hello world!
</p>
<button onclick="document.execCommand('bold')">
   Grassetto
</button>

Speriamo che questi tag e attributi ti siano stati utili. E tu, ne conosci altri?

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…
Essere uno sviluppatore web vuol dire imparare più linguaggi di programmazione per poter creare diversi tipi di applicazioni.  Per ogni applicazione, la maggior parte delle volte, …
Un buon programmatore, si sa, necessita di un ampio bagaglio di conoscenze per potersi districare tra le difficoltà che questo mestiere comporta. Oggi le richieste sul mercato sono molteplic…
Un fattore importante e spesso sottovalutato per avere successo nel campo del web development è la capacità di fare buone domande e sapere dove trovare aiuto all’occorrenza. Quando Google non bast…
Le tecnologie legate all’intelligenza artificiale stanno facendo progressi rapidi, suscitando al tempo stesso non poche congetture. Da scenari distopici in stile 2001: Odissea nello spazio, passando…
Il settore tech è appannaggio esclusivo della popolazione maschile? Questo preconcetto è abbastanza diffuso, ma come stanno davvero le cose? Oggigiorno il mondo tech, non solo in Italia, è in gran …

Seguici su Facebook

Scopri di più sul corso Hackademy

Inizia la tua nuova carriera nel mondo digital e tech.

Candidati ora

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.

Pagamento rateale

Valore della rata: A PARTIRE DA 112 €/mese.

Esempio di finanziamento  

Importo finanziato: € 2440 in 24 rate da € 112 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 2788,68.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/07/2023 al 31/12/2023.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 183 €/mese.

Esempio di finanziamento 

Importo finanziato: € 3990 in 24 rate da € 183 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 4496,56.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/07/2023 al 31/12/2023.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.