HTML tag da conoscere

Imparare l’HTML – I tag di base da conoscere

In questo nuovo articolo dedicato al linguaggio HTML, elencherò una parte dei tag di base da conoscere per realizzare una pagina in HTML.

L’articolo è scritto per principianti come primo approccio a questo linguaggio, senza troppe informazioni superflue e poco rilevanti.

Basta leggere e riscrivere i tag su di un editor di testo per imparare ad utilizzarli, andranno inseriti nelle posizioni corrette all’interno dei tag <head> o <body>, per maggiori dettagli leggi il precedente articolo.

html logo

Lista dei tag

Impara e scrivi codici HTML ora! utilizza il nostro editor HTML online.

Titolo pagina

<title> Titolo pagina </title>

Questo tag va inserito in <head>; si riferisce al titolo principale della pagina, che verrà visualizzato ad esempio nella scheda del browser o nel motore di ricerca, ed è un tag molto importante da scrivere.

titolo principale pagina

Paragrafo

<p> testo/paragrafo </p>

Indicano l’inizio e la fine di un paragrafo di testo, questi tag racchiudono il contenuto di testo principale, e possono essere multipli all’interno di una pagina.

Per migliorare la SEO, evitare paragrafi di testo eccessiamente lunghi, 150 parole a paragrafo possono bastare.

Titoli

<H1> titolo primario </H1> 
      <H2> titolo secondario </H2>
            <H3> ... </H3>
              <H4> ... </H4>  
                 <H5> ... </H5> 
                    <H6> ... </H6>

Questi tag indicano i titoli delle sezioni della pagina web. a differenza del tag <title>, vanno inseriti nel <body> e precedono paragrafi di testo, immagini, link ecc…

C’è una gerarchia da rispettare: H1 è il più importante e, in genere, nella pagina ne è presente soltanto 1. Consiglio di scriverlo simile al tag title per una corretta associazione del contenuto da parte del motore di ricerca.

Segue H2 poi H3, fino ad H6, ovvero i dei titoli secondari, e possono essere multipli nella stessa pagina; Non saltare la gerarchia dei titoli! La pagina non dovrà contenere un H3 senza un H2 che lo precede.

Un esempio potrebbe essere questo:

<H1> Come cucinare la pasta </H1> 
      <H2> Tipi di pasta </H2>
            <H3> Spaghetti </H3>
            <H3> Rigatoni </H3>
      <H2> Ricette </H2>
            <H3> Fettuccine al sugo </H3>
                 <H4> Ingredienti </H4>
            <H3> Carbonara </H3>
            ...

Link

<a href="URL"> testo del link da visualizzare </a>

Determina un link. Va inserito l’URL della pagina di destinazione all’interno delle virgolette in href=”URL”; Sarà necessario inserire anche il testo visibile del link tra il tag di apertura e di chiusura.

Per esempio:

<a href="www.miosito.it"> Visita il mio sito! </a> 

il tag <a> può riferirsi anche a indirizzi email e numeri di telefono, in questi casi la sintassi è href=”mailto:[email protected] o href=”tel:3331234567″

Immagini

<img src="/#">

Inserisce un’immagine nella pagina in una posizione specifica, va indicato il percorso dell’immagine all’interno delle virgolette dell’attributo src=”/cartella/immagini/foto.jpg”.
l’URL è case sensitive, quindi scrivere per esempio immagine.jpg è differente da scrivere immagine.JPG

Per migliorare il punteggio SEO delle immagini, consiglio di indicare anche l’attributo alt=”” riferito al testo alternativo dell’immagine, che nel caso di problemi di caricamento, apparirà del testo sostitutivo descrittivo al posto dell’immagine.

La scrittura di un tag img sarà quindi così:<

<img src="/root/img/foto-gatto.jpg" alt="la foto di un gatto">

Esistono anche altri attributi utili per le immagini e per i link […].

Altri tag utili

<b> Testo in grassetto </b> – Serve per modificare un testo semplice in testo in grassetto. Ricordarsi di chiudere il tag! o tutto il testo seguente ne subirà gli effetti.

<i> Testo in corsivo</i> – Converte una parte di testo in corsivo/testo inclinato.

<br>Interruzione della linea di testo, si inserisce nei tag <p> per interropere la frase e mandare a capo il testo.

<hr> – Inserisce una linea di interruzione orizzontale.

Esempio in un file HTML

Questo è un esempio HTML con i tag spiegati in questo articolo. Riscrivi il seguente testo e prova anche a modificarlo a tuo piacimento; o copia ed incollalo su un nuovo file HTML.

<html>           
   <head>   
        <title> Questo è il titolo principale </title> 
   </head>
   <body>
       <H1> Titolo primario </H1> 
           <H2> Titolo secondario </H2> 
      	   <p><b>Paragrafo di testo</b>, qui si può scrivere il contenuto del sito</p>
       		<a href="https://www.byte-post.com"> Clicca qui! questo è un link</a>
      		<img src="#" alt="titolo alternativo immagine">   
   </body>
</html> 

Continua con: Il tag <div> – HTML di base

Il corso completo di HTML e CSS

Articoli Recenti

Condividi ora!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA