STRUTTURA DI UNA PAGINA HTML

TAG FONDAMENTALI

In questo post (Pagina HTML) analizzeremo assieme alcuni tra i Tag più comuni che si trovano nelle pagine HTML, con cui ogni Web Developer dovrebbe avere gran familiarità. I Tag (etichette) ci permettono di assegnare un ruolo e una disposizione ai contenuti delle nostre pagine, possiamo ad esempio distinguere il titolo dai paragrafi. Ogni elemento HTML ha un valore di visualizzazione predefinito, a seconda del tipo di elemento che può essere block e inline.

• Elementi Block Level

1. Inizia sempre su una nuova riga.
2. Occupa sempre l’intera larghezza disponibile (si estende da sinistra a destra il più possibile).
3. Ha un margine superiore e uno inferiore, mentre un elemento inline no.

• Elementi Inline
  1. Non inizia su una nuova riga.
  2. Occupa solo la larghezza necessaria.

Gli elementi Block Level che vedremo in questo post sono le intestazioni o header da <h1> ad <h6> i paragrafi tag <p> e i <div>. Esempi di elementi inline sono:<span>, <em>, <strong>, <br>.

DESCRIZIONE DEI TAG USATI NELL’ARTICOLO

Ti fornisco una breve descrizione sui tag che analizzeremo.

• I tag <h1>-<h6>sono usati per definire le intestazioni HTML. <h1>definisce il titolo più importante mentre <h6> definisce l’intestazione meno importante, usa solo un <h1> per pagina questo dovrebbe rappresentare l’intestazione/l’oggetto principale per l’intera pagina. Inoltre, non saltare i livelli di intestazione: inizia con <h1>, quindi usa <h2> e così via.
• <p> rappresenta un paragrafo HTML, I browser aggiungono automaticamente una singola riga vuota prima e dopo ogni paragrafo.
• <strong> elemento inline che formatta il testo in grassetto. Da preferire in HTML5 al tag <b> deprecato.
• <em> viene utilizzato per definire il testo enfatizzato. Il contenuto all’interno viene generalmente visualizzato in corsivo. Da preferire al tag <i> in quanto deprecato.
• Il tag <div> definisce una divisione o una sezione in un documento HTML, viene utilizzato come contenitore per elementi HTML, che vengono quindi stilizzati con CSS o manipolati con JavaScript. Può essere facilmente stilizzato utilizzando l’attributo class o id. Qualsiasi tipo di contenuto può essere inserito all’interno del tag <div>, inoltre per impostazione predefinita, i browser inseriscono sempre un’interruzione di riga prima e dopo l’elemento.
• Il tag <span> è un contenitore in linea utilizzato per contrassegnare una parte di un testo o una parte di un documento, può essere facilmente stilizzato dai CSS o manipolato con JavaScript, utilizzando l’attributo class o id. Il tag <span> è molto simile all’elemento <div>, ma <div> è un elemento a livello di blocco e <span> è un elemento in linea.
• <br> Break Line serve per andare a capo.

Anche se il codice di esempio sarà disponibile su GitHub ti consiglio di aprire il tuo editor preferito e scrivere il codice. Questo ti aiuterà a memorizzare i vari tag usati nel post, inoltre una volta aperto il documento nel browser Chrome tieni aperta metà finestra dell’editor mentre nell’altra metà dello schermo tieni aperto il browser. Per ogni modifica apportata al documento HTML di basterà fare un refresh nel browser per visualizzare immediatamente le modifiche.

LINK AI POST PRECEDENTI

PREVIOUS POST LINKS

LINK AL CODICE SU GITHUB

GITHUB