Come utilizzare tag e attributi HTML per creare un sito web

Come utilizzare tag e attributi HTML per creare un sito web

Nicola Di Venere Di Nicola Di Venere


coding sito web tag html

Sei una new entry nel mondo della programmazione web, e non sai da dove iniziare? 
Esempio dopo esempio, in questo articolo, ti spiegherò come creare una pagina web partendo da zero.

Il primo passaggio è quello di definire la struttura della nostra pagina attraverso l’HTML. Quest’ ultimo non è un linguaggio di programmazione, ma di markup (marcatore). 
La struttura di una pagina HTML è costituita appunto da marcatori che prendono il nome di tag HTML.
I tag Html sono racchiusi tra parentesi angolari. La maggior parte di questi è caratterizzata da tag di apertura e di chiusura. 

../Schermata%202021-06-29%20alle%2017.51.59.png

L’unione di tag di apertura, tag di chiusura e contenuto costituisce l’elemento HTML. L’utilizzo dei tag permette di creare la tipica struttura ad albero di un documento HTML. Un elemento prende il nome di parent (genitore), quando contiene uno o più elementi, e child (figlio) quando è contenuto all’interno di un altro elemento.

Tipica struttura di un documento HTML:

../Schermata%202021-06-30%20alle%2011.49.09.png

Come puoi notare dall’esempio in alto, i tag principali di un documento HTML sono: <html>, <head> e <body>.
Il tag <html> è la radice del documento HTML, è il tag principale che contiene tutti gli altri elementi ed indica al browser come deve interpretare il documento. All’interno del tag <head>, troviamo tutti i tag che hanno lo scopo di impartire delle direttive al browser come ad esempio:

  • Il <title>, indica il titolo della pagina. Viene visualizzato all’interno del tab o in cima alla finestra di un qualsiasi browser;
  • I <meta>, hanno lo scopo di fornire indicazioni al browser come ad esempio: la codifica dei caratteri utilizzati all’interno del documento, la responsività dello stesso, la compatibilità con un determinato browser, ecc;
  • I <link>, servono per puntare a determinate risorse. Nella maggior parte dei casi si utilizzano per collegare fogli di stile esterni;
  • Gli <script>, utilizzati per collegare ad esempio file Javascript con lo scopo di dare dinamicità alla pagina.

Il tag <body>, è il corpo del documento. Contiene tutto ciò che viene effettivamente visualizzato dall’utente sul browser. Quest’ultimo può contenere al suo interno: immagini, titoli, paragrafi, video ecc.
Lo scopo principale di un tag, è quello di dare significato al suo contenuto.  A tal proposito entra in gioco la semantica: quella parte della linguistica che studia il significato delle parole.
Quindi dopo questa piccola spiegazione, puoi comprendere che con il termine tag semantico, si identifica l’elemento che descrive espressamente il proprio significato.
Un esempio di tag semantico è <h1>, il quale viene utilizzato per il titolo principale di una pagina o di un articolo. 
NB: in una pagina web ci deve essere un solo tag <h1>. 
Questo tag fa parte dei cosiddetti tag di intestazione, e differisce dagli altri: <h2>, <h3>, <h4>, <h5> ed <h6> appunto per il significato che attribuisce al suo contenuto.
I tag HTML posso avere attributi, dediti a specificare in maniera dettagliata la funzione o la tipologia dell’elemento. 

../Schermata%202021-06-30%20alle%2014.46.20.png

Il tag <input> nell’esempio in alto indica un elemento che consente agli utenti di inserire informazioni. NB: utilizzato ad esempio nei form.
Gli attributi in questo esempio specifico sono: type, name e placeholder. L’attributo type specifica appunto il tipo del contenuto, in questo caso particolare testuale. In alternativa puoi inserire come valore dell’attributo type ad esempio: email, button, ecc…
L’attributo placeholder serve per inserire un testo indicativo, con lo scopo di indirizzare l’utente nel completamento del campo input. Name invece è il nome che attribuiamo al campo.
Ti consiglio di approfondire l’argomento, e di utilizzare tag e attributi in maniera corretta.

Impara a programmare in 3 mesi con il Corso di Coding Hackademy su Laravel PHP

Diventa Sviluppatore web in 3 mesi

Scopri il coding bootcamp Hackademy

Programma Completo