19 tag HTML di uso comune da conoscere per i principianti
Pubblicato: 2022-12-08Se vuoi diventare uno sviluppatore front-end, uno dei consigli più comuni che riceverai è imparare l'HTML. Hypertext Markup Language, abbreviato in HTML, è il fondamento della maggior parte delle pagine web.
L'HTML è composto da cose diverse, come tag, attributi ed elementi. Il nostro obiettivo saranno i tag HTML. Utilizziamo i tag HTML per indicare ai browser come strutturare il contenuto in intestazioni, titoli, paragrafi, immagini e molto altro ancora. I tag HTML sono quindi come parole chiave che definiscono come il browser visualizzerà o formatterà il contenuto.
I server leggono i tag HTML dall'alto verso il basso. Non ci sono restrizioni sul numero di tag HTML che una pagina web dovrebbe avere.
- Tutti i tag HTML sono racchiusi tra
<> - Ogni tag HTML svolge una funzione diversa
- La maggior parte dei tag HTML ha l'apertura
<tag>e la chiusura</tag>
Tag HTML contro elementi HTML contro attributi HTML
La maggior parte delle persone usa i termini tag ed elementi HTML in modo intercambiabile. Ma sono la stessa cosa? Tecnicamente, gli elementi HTML e i tag HTML sono diversi.
I tag HTML definiscono gli elementi HTML. Per ottenere ciò, il contenuto viene racchiuso utilizzando un nome di tag di apertura e chiusura che corrisponda al contenuto del tag con cui stiamo lavorando.
Questo è un esempio di un elemento HTML:
<p> This is a paragraph </p><p> è un esempio di tag HTML
Gli attributi HTML forniscono informazioni aggiuntive sugli elementi HTML in un documento. Gli attributi si trovano all'interno degli elementi HTML.
Questo è un esempio di un attributo HTML
<button id=" SubmitOrder" class="btn">Order</button>Tag HTML che tutti dovrebbero conoscere
L'HTML come linguaggio di markup si è evoluto nel corso degli anni da quando Tim Berners-Lee lo ha introdotto nel 1993. La prima versione HTML aveva 18 tag. Nuovi tag vengono aggiunti con ogni versione HTML; l'aggiornamento più recente è stato HTML5 nel 2014.
Un confronto ravvicinato tra HTML e HTML5 mostra che quest'ultimo ha tag semantici come <article>, <header> e <footer> che descrivono chiaramente il contenuto. Ora abbiamo oltre 100 tag HTML. Di seguito sono riportati alcuni dei tag più popolari che dovresti conoscere:
<!DOCTYPE>
Il DOCTYPE non è tecnicamente un tag ma una dichiarazione che dice al browser quale tipo di file verrà caricato. Questo tag indica al browser il tipo di HTML che verrà caricato.
In HTML5, puoi dichiarare il tuo file come
<!DOCTYPE html>O
<!doctype html>Nota: la dichiarazione non ha un tag di chiusura e non fa distinzione tra maiuscole e minuscole.
<html> </html>
Il tag <html> ….. </html> viene dopo il tag DOCTYPE. Questo tag definisce il documento come una pagina web; ogni altro elemento sarà annidato all'interno. Il tag HTML specifica l'inizio e la fine di un documento HTML.
Un tag <html> è rappresentato come;
<html>Content</html><testa></testa>
La sezione head di un documento HTML è rappresentata da un tag <head>. Questo tag è racchiuso nel tag <html> e fornisce informazioni generali sulla pagina web.
Il tag <head> contiene altri tag che forniscono informazioni specifiche sulla pagina web, come il titolo e l'autore della pagina. Il contenuto di questo tag non viene visualizzato sulla pagina web
Questa è la sintassi di un tag <head>;
<head> …….. </head><titolo></titolo>
Il tag <title> dichiara il titolo della pagina web. Questo tag è racchiuso nel tag <head>. Il tag <title> apparirà sulla barra del titolo o sulla scheda nella finestra del browser, ma non sulla pagina web vera e propria.
La sintassi per il tag <title> è;
<title>HTML Tags for Beginners</title>All'interno di un tag <head>, apparirà come;
<head> <title>HTML Tags for Beginners</title> </head><corpo> </corpo>
Il tag <body> mostra tutto il contenuto visibile su una pagina web. Immagini, collegamenti, testo normale, video e altro si trovano all'interno dei tag <body> e </body>.
Alcuni degli altri tag che troverai all'interno del corpo includono il tag <p> per il paragrafo, il tag <a> per le immagini, il tag <strong> per il testo in grassetto e il tag <ol> per un elenco ordinato, solo per citarne alcuni.
La sintassi per il tag <body> è;
<body> Content </body>Tag da <h1> a <h6>
Possono esserci fino a 6 tag di intestazione in un documento HTML. Ciascuno dei tag è rappresentato da un numero che inizia da 1 a 6 come <h1>, <h2>, <h3>, <h4>, <h5> e <h6>.
H1 è il tag di intestazione più grande, mentre H6 è il più piccolo.
In un documento HTML, i tag di intestazione possono essere rappresentati come segue:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>I tag da <h1> a <h6> sono racchiusi all'interno del tag <body>.
Ad esempio, un tag ,<H1> verrà racchiuso come;
<body> <h1> This is heading 1 >/h1> </body><p> </p>
Il <p> </p> o semplicemente il tag del paragrafo viene utilizzato quando si desidera strutturare il contenuto in un paragrafo. Premendo il pulsante "Invio" in un documento HTML nel tuo editor di codice non creerai un nuovo paragrafo.
Se vuoi più di un paragrafo, devi usare diversi tag <p> </p> sul tuo documento. I tag di paragrafo devono essere racchiusi all'interno del tag <body>.
La sintassi per un tag di paragrafo è;
<p> ….some content here….</p>Se vuoi avere quattro paragrafi, il tuo codice sarà strutturato come;
<body> <p>Content for first paragraph.</p> <p>Content for the second paragraph.</p> <p>Content for the fourth paragraph.</p> </body><b> </b>
Il tag <b> </b> o semplicemente grassetto formatterà qualsiasi contenuto tra l'apertura <b> e la chiusura </b> come grassetto.
Il tag in grassetto può trovarsi tra un'intestazione come H1 o anche all'interno di un tag di paragrafo.
Questi sono esempi di tag in grassetto;
<b> Bold Tag </b>La frase 'Bold Tag' apparirà in grassetto.
<h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>La quinta edizione sarà in grassetto.
<i> </i>
Il tag corsivo, indicato con <i>, mette in corsivo il testo all'interno dei tag.
Ad esempio, se abbiamo
<i> These are italics </i>Le parole " questi sono corsivi " appariranno in corsivo.
<u> </u>
Il tag di sottolineatura, o <u>, viene utilizzato quando si desidera sottolineare una determinata parte di testo in un documento HTML.
Ad esempio, se abbiamo;
<u> underline these words </u>La frase tra i tag sarà sottolineata.
<centro> </centro>
Il tag Center, <center>, viene utilizzato per centrare il contenuto su un documento HTML.
Ad esempio, se abbiamo un tag h2 scritto come <h2> Centering Content in HTML </h2> , possiamo centrarlo come segue;
<center> <h2> Centering Content in HTML </h2> </center><span></span>
Il tag Span, <span>, è un contenitore in linea generico che non viene fornito con uno stile predefinito. Puoi usare il tag span per raggruppare i testi che vuoi modellare.
Puoi estendere tag all'interno di altri tag come intestazioni e paragrafi;
<h2> Learn HTML <span> from experts </span> and be ready for the market </h2> <p> Learn HTML <span> from experts </span> and be ready for the market </p><div></div>
Un tag di divisione, abbreviato in div, è un tag che consente di raggruppare diversi tag in un documento HTML.
A un tag div può essere assegnata una "classe" per aggiungere uno stile esterno utilizzando i CSS.
Ecco come verrà rappresentato un div che racchiude un h1, h2 e un tag di paragrafo.
<div > <h1> Learn HTML </h1> <h2> HTML Tags </h2> <p> HTML is a markup language……… </p> </div><em></em>
L'enfasi, o tag <em>, viene utilizzato per enfatizzare determinate parole in un documento HTML.
I contenuti tra i tag <em> appariranno obliqui o in corsivo.
Il contenuto enfatizzato all'interno di un paragrafo può apparire in un editor di codice apparirà come;
<p> The meeting will start at <em> 0800 hrs </em>, please keep time </p><sup></sup>
Il tag <sup> o apice consente al testo racchiuso di essere sopra il resto. Un esempio perfetto è quando vuoi elevare al quadrato un numero X e rappresentarlo matematicamente per darti X 2
La sintassi per <sup> all'interno di un tag di paragrafo sarà;
<H1> Harveys <sup>TM </sup> Company Limited </H1><sub></sub>
Il tag pedice o <sub> è l'opposto del tag apice. Il contenuto racchiuso nel tag <sub> apparirà sotto la normale riga di testo. Un esempio perfetto è quando si scrive la formula chimica dell'acqua come H 2 0.
La sintassi per il tag pedice sarà;
Remember that H <sub> 2 </sub> 0 is the chemical formula for water<br>
<br> è un tag di chiusura automatica che rappresenta un'interruzione. Tutto il contenuto dopo <br> inizierà su una nuova riga.
La sintassi per <br> all'interno di un paragrafo sarà;
<p> HTML is the abbreviation of Hypertext Markup Language <br> There has been an ongoing debate as to whether it is a programming language or not <br> However, we cannot downplay its importance <br> HTML has been used in more than 95% of websites today </p><ol></ol> e <li> </li>
Il tag dell'elenco ordinato o <ol> deve essere utilizzato con un altro tag come <li>.
I due possono apparire su un editor di codice come;
<ol> <li> Asia </li> <li> Africa </li> <li> Europe </li> </ol>Quando viene visualizzato sul browser, i contenuti appariranno numerati.
<img src=""/>
Potresti voler aggiungere un'immagine per un impatto visivo o anche un logo. Il tag immagine a chiusura automatica, <img src=""/>, è utile in questo caso.
La sintassi per il tag immagine sarà;
<img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>Il contenuto racchiuso tra virgolette rappresenta l'URL di origine.
Avvolgendo
Esistono oltre 100 tag HTML, ma quelli sopra sono quelli che dovresti conoscere come principiante. L'HTML è supportato nella maggior parte degli editor di codice e hai quindi la certezza che non sbaglierai mai quando inizi a imparare.