Come scrivere i tag HTML nel codice sorgente

A volte è utile conoscere un po' di Html anche se si svolge la professione del copywriter.

Può infatti capitare di dover realizzare un particolare effetto o formattazione al testo che il CMS non fornisce.

Alcuni dubbi quando si inizia a studiare l'Html

Chi si avvicina per la prima volta al linguaggio HTML non può fare a meno di avere alcuni dubbi o perplessità.

Le domande più frequenti sono:

  1. I tag HTML vanno scritti in maiuscolo o minuscolo?
  2. I rientri dopo i tag nel codice sorgente sono obbligatori?
  3. È necessario rispettare qualche distanza tra i tag?

E varie altre domande del genere. Provo a rispondere in poche righe a queste domande.

Tag in maiuscolo o minuscolo?

Nel linguaggio HTML è indifferente scrivere i tag in maiuscolo o in minuscolo.

Ad esempio, scrivere <b> o <B> è ininfluente.

Quando il browser incontra un tag racchiuso tra il segno minore < e il segno maggiore > ne analizza il contenuto in modo case insensitive, ossia senza fare caso al fatto che le lettere siano maiuscole o minuscole.

Un esempio pratico

Nel seguente codice sorgente scrivo un semplice tag di formattazione in grassetto del testo usando varie combinazioni di minuscolo (<b>) e maiuscolo (<B>) nel tag.

<b>questa parola in grassetto</b>
<B>questa parola in grassetto</B>
<b>questa parola in grassetto</B>
<B>questa parola in grassetto</B>

Tutte le righe il risultato sullo schermo è sempre lo stesso. Non cambia nulla.

questa parola è in grassetto
questa parola è in grassetto
questa parola è in grassetto
questa parola è in grassetto

A questo punto dovrebbe essere tutto chiaro. I tag possono essere scritti indifferentemente in maiuscolo o minuscolo.

La struttura del codice sorgente

Nel codice sorgente di un documento HTML tutti i tag sono allineati a sinistra con dei ritorni a capo. Alcuni tag sono spostati più verso destra.

Ad esempio, il seguente testo è scritto in modo strutturato.

<HTML>
<HEAD>
<TITLE>il titolo della mia prima pagina</TITLE>
</HEAD>
<BODY> hello world! </BODY>
</HTML>

Il risultato finale sul browser dell'utente è il seguente:

hello world!

È obbligatorio scrivere il codice HTML in questo modo?

No, è solo un modo per rendere più leggibile il codice HTML in un secondo momento e per rendersi conto degli errori.

Posso riscrivere il codice anche nel seguente modo, senza porre alcuna distanza e senza dare alcuna struttura al codice sorgente.

<HTML> <HEAD> <TITLE>il titolo della mia prima pagina</TITLE> </HEAD> <BODY> hello world! </BODY> </HTML>

Il risultato finale sul browser dell'utente è sempre lo stesso.

hello world!

Perché conviene strutturare il codice?

Nei listati molto lunghi diventa difficile trovare gli errori.

Dando una struttura al codice sorgente, il documento è più facilmente leggibile in fase di sviluppo o da altri programmatori.

Senza struttura diventa più complesso da leggere. Per apportare una modifica al documento ipertestuale occorre prima capire e ricostruire la struttura dei tag.

Inoltre, se c'è qualche tag non chiuso o qualche errore, diventa più facile da trovare.

La struttura non deve appesantire la dimensione file

È comunque opportuno non dimenticare che anche gli spazi sono dei caratteri e possono aumentare il peso della pagina web in kilobyte ( KB ) rallentandone lo scaricamento da internet.

Esempio. Un documento Html ben strutturato pesa 40 KB mentre lo stesso documento senza spazi e rientri tra i tag è meno leggibile ma più compatto, pesa soltanto 10 KB. Agli occhi dell'utente non cambia nulla, il contenuto informativo mostrato sullo schermo è sempre lo stesso ma il secondo documento si scarica sul browser più velocemente.

È quindi opportuno cercare una via di mezzo tra i due modi di scrivere in HTML con e senza struttura.

Se l'obiettivo è la velocità di navigazione del sito, è consigliabile rinunciare alla leggibilità del codice sorgente e compattare tutti i tag del documento.

Perché la velocità di navigazione sul sito è importante?

La velocità di navigazione sul sito influisce sulla User Experience ( esperienza utente ). In particolar modo se l'utente usa una connettività a internet poco veloce.

Inoltre, i motori di ricerca hanno recentemente dato molta importanza alle performance dei siti web. La velocità di navigazione è diventata un fattore di ranking.

E' una leva di ottimizzazione SEO.

 


 

Segnalami un errore, un refuso o un suggerimento per migliorare gli appunti

FacebookTwitterLinkedinLinkedin
knowledge base

Libri di approfondimento
  1. Il linguaggio Html