BytePost Brevi guide, dritti al punto!
BytePost
Corsi Corso HTML HTML Programmazione

Imparare l’HTML – I tag di base da conoscere

di |Pubblicato |2 commenti

In questo articolo dedicato al linguaggio HTML, elencherò una parte dei tag di base assolutamente da imparare e da conoscere, fondamentali per la realizzazione di pagine e siti web in linguaggio HTML

Cercherò di evitare inutili dettagli ed informazioni superfule, principalmente perché questo corso è rivolto a neofiti/principianti che si stanno approcciando da pochissimo tempo al mondo del web e della creazione di siti, che non hanno la minima idea da dove iniziare e dove mettere mano.

Per seguire questi concetti ti consiglio di leggere l’intero articolo e prendere nota di eventuali concetti, in seguito di suggerisco di riscrivere e testare quello che hai imparato per avere bene in chiaro le informazioni apprese prima di procedere con il corso HTML.

Ti basterà quindi leggere il testo e riscrivere i tag presenti nel post in un editor di testo o un editor HTML (prova il nostro, è semplice, rapido e gratuito) per imparare ad utilizzarli e a comprendere le loro funzioni.

html logo

Lista dei tag da conoscere

Tutti i tag HTML vanno inseriti in una determinata posizione all’interno della struttura della pagina, in modo specifico nei tag <head> o <body>. Per conoscere meglio questo argomento leggi il capitolo precedente cliccando qui.

In ogni paragrafo vedrai il codice HTML da utilizzare preformattato, puoi direttamente copiarlo ed incollarlo nel tuo editor per testare la sua funzione.

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

Titolo della pagina

<title> Titolo pagina </title>

Questo tag specifico va inserito all’interno della sezione <head>; si riferisce al titolo principale della pagina, quello che verrà visualizzato ad esempio nella scheda del browser o nel motore di ricerca nei risultati.

Questo tag è di fondamentale importanza perché determina un informazione necessaria per una corretta elaborazione e indicizzazione della pagina web. Ricorda sempre di scriverlo!

titolo principale pagina

Paragrafo

<p> testo/paragrafo </p>

Questo tag determina l’apertura e la chiusura di un paragrafo di testo, cioè racchiudono il contenuto di testo presente nella pagina web, come quello che stai leggendo in questo momento.

Il tag <p> può essere ripetuto infinite volte all’interno di un documento HTML e ad ogni nuova apertura il testo andrà a capo come un nuovo paragrafo.

Per migliorare la SEO della pagina evita di scrivere paragrafi di testo eccessivamente lunghi, 150 parole a paragrafo possono bastare. Se hai necessità di scrivere di più suddividi il contenuto in 2 paragrafi differenti.
Non sai cos’è la SEO? Leggi ora cosa c’è da sapere e perché è così importante.

Titoli – Headings

<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/collegamenti

<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="https://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">

Guarda 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 interrompere 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>

Testai codici senza sforzo, incollalo nel nostro editor HTML e visualizza i risultati

Torna a: Il corso completo di HTML e CSS

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

Articoli Recenti:

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!

AUTORE

Simone Bernardo
Appassionato da sempre del mondo informatico, di ogni sua sfaccettatura. Ideatore, creatore e gestore di BytePost fin dalla pubblicazione. Studio come autodidatta e non smetto mai di imparare cose nuove ed interessanti.

Potrebbe anche interessarti

Lascia un commento

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

CAPTCHA


2 commenti su “Imparare l’HTML – I tag di base da conoscere”