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?