Non è necessario utilizzare i tag div ogni volta. Usa questi tag HTML semantici per rendere il tuo sito più strutturato e accessibile.
Prima dell'introduzione dell'HTML semantico, gli sviluppatori usavano i div per organizzare i contenuti. Gli elementi div non hanno significato da soli. Forniscono solo un modo per applicare stili e organizzare i contenuti.
La parola semantico significa relative al significato. Gli elementi HTML semantici descrivono lo scopo del loro contenuto. Forniscono significato allo sviluppatore, all'utente, ai motori di ricerca e alle tecnologie assistive. Ecco un elenco di popolari tag HTML semantici che puoi utilizzare nel tuo prossimo progetto.
Cosa sono i Div?
In HTML, l'elemento div (divisione) è un contenitore a livello di blocco. Si utilizza un div per raggruppare o dividere gli elementi HTML in sezioni in una pagina web. La sintassi è come mostrato di seguito:
<div>
div>
Vantaggi dell'utilizzo di elementi HTML semantici rispetto ai div
HTML5 ha introdotto elementi HTML semantici per facilitare la lettura del codice. Gli elementi semantici forniscono significato e struttura ai contenuti web.
Rendono il tuo codice comprensibile ad altri sviluppatori. Inoltre, rendono più facile per i motori di ricerca trovare i tuoi contenuti e indirizzare il traffico verso il tuo sito. Ecco alcuni elementi semantici che puoi usare nel tuo Progetti HTML e CSS.
1.
IL tag definisce la sezione dell'intestazione su un documento. In genere contiene il logo del sito, la navigazione e il titolo della pagina. È la sezione che appare in cima a una pagina web. È possibile personalizzare l'intestazione in base alle proprie esigenze. La sintassi è la seguente:
<corpo><intestazione>
<h1> Ciao!h1>
<P>Sono una testataP>
intestazione>
corpo>
2.
IL tag contiene i link di navigazione per il sito web. Questi possono essere menu, sommari o indici. Di solito è posizionato all'interno di etichetta. La sintassi è la seguente:
<intestazione><nav>
<Ul>
<li>I miei link al sito webli>
<li><UNhref="#"> CasaUN>li>
<li ><UNhref="#"> Chi siamo UN>li>
Ul>
nav>
<h1>Quanto sopra è la parte di navigazione del mio sito web.h1>
intestazione>
Sul browser apparirà così:
Puoi utilizzare modelli di layout CSS come Casella flessibile CSS per allineare il
3.
IL tag contiene il contenuto principale della pagina web. Separa il contenuto dall'intestazione, dalla barra laterale e dal piè di pagina. Il main rappresenta il contenuto dominante del file sezione.
<corpo><intestazione>
<titolo> Fatti del sito web titolo>
intestazione>
<principale>
<P> Questo sito web è una breve dimostrazione di come funziona il tag principale.P>
<P> Racchiude la parte del sito web con contenuti utili.P>
principale>
<piè di pagina>
<h3> Questo è un piè di pagina h3>
piè di pagina>
corpo>
Appare così:
4.
Usa il tag per definire sezioni autonome in un documento o sito web. Ad esempio, puoi usarli per strutturare post di blog, riviste o schede prodotto. IL L'elemento può racchiudere altri elementi inclusi altri articoli, sezioni e intestazioni. Gli elementi allegati devono riguardare l'argomento dell'articolo.
<articolo>
<h1>Più strano della finzioneh1><articolo>
<h3>introduzioneh3>
<P>Gli eventi e le persone narrate in questo libro sono fittizi.P>
articolo>
<articolo>
<h3>Capitolo primoh3>
<P> La giornata era luminosa e il sole sorrideva dal cieloP>
articolo>
articolo>
Sembra così:
5.
IL tag contiene il contenuto relativo al contenuto principale. Usa questo tag per creare barre laterali per citazioni, commenti o ringraziamenti. mette in evidenza le informazioni che il lettore potrebbe perdere. Si distingue dal resto del contenuto.
html><html>
<stile>
corpo{
background-color:#abdbe3;
}
a parte {
larghezza: 30%;
imbottitura sinistra: 0,5 rem;
margine sinistro: 1rem;
flessione: sinistra;
box-shadow: inserto 5px 0 5px -5px verde;
stile del carattere: corsivo;
colore rosso;
}
a parte > p {
margine: 0,5 rem;
stile>
<corpo>
<principale>
<h1> Uccelli Tessitorih1>
<P>Ploceidae è una famiglia di piccoli uccelli passeriformi. Molti dei quali sono chiamati tessitori, uccelli tessitori, fringuelli tessitori e vescovi.P>
<a parte>
<P>Regno: Animalia
Phylum: CordatiP>a parte>
<P>Nelle classificazioni più recenti, Ploceidae è un clade, esclusi alcuni uccelli che sono stati storicamente collocati nella famiglia. Alcuni dei passeri, ma include la sottofamiglia monotipica Amblyospizinae.P>
principale>
corpo>
html>
6.
IL L'elemento contiene una parte della pagina senza alcun elemento semantico specifico. Le sezioni possono avere un'intestazione per introdurre il contenuto e racchiudere altri elementi HTML. rappresenta i componenti di una pagina web come i capitoli di un libro o di un blog.
html><html>
<corpo>
<h1>La Bibbiah1>
<sezione>
<h2>introduzioneh2>
<P>La Bibbia è una raccolta di scritture religiose sacre nel cristianesimo, ebraismo, samaritanesimo. La Bibbia è un'antologia – una raccolta di testi di una varietà di forme – originariamente scritto in ebraico, aramaico e koine greco.P>
sezione>
<sezione>
<h2>Capitolo primo: Genesih2>
<P>Il Libro della Genesi è il primo libro della Bibbia ebraica e dell'Antico Testamento cristiano. Il suo nome ebraico è lo stesso della sua prima parola, Bereshit. La Genesi è un resoconto della creazione del mondo, della storia antica dell'umanità, degli antenati di Israele e delle origini del popolo ebraicoP>
sezione>corpo>
html>
Sembra così:
7.
IL elemento racchiude illustrazioni autonome come immagini o diagrammi. Queste illustrazioni fanno riferimento al contenuto della pagina principale. Le figure sono corredate di didascalie specificate dal elemento. IL spiega di cosa tratta l'immagine. IL
html><html>
<corpo>
<principale>
<sezione>
<h1>Parti di un computerh1>
<P> Ci sono diverse parti che lavorano insieme per creare un computerP>
<figura>
<immsrc="qualche-url.jpg"alt="mouse del computer">
<figcaption>Questo è un mouse per computerfigcaption>
figura>
sezione>
principale>
corpo>
html>
Puoi andare oltre e imparare come creare immagini reattive nell'HTML.
IL L'elemento HTML racchiude le informazioni nella parte inferiore della pagina web. È l'opposto di elemento. IL può contenere informazioni sul proprietario della pagina. Ciò include dati sul copyright o collegamenti a informazioni aggiuntive del sito.
html><html>
<corpo>
<principale>
<sezione>
<h1>Parti di un computerh1>
<figura>
<immsrc="qualche-url.jpg"alt="mouse del computer">
<figcaption>Questo è un mouse per computerfigcaption>
figura>
sezione>
principale>
<piè di pagina>
<P> Prodotto da ComputerTech © 2023P>
piè di pagina>
corpo>
html>
Il codice precedente aggiunge un piè di pagina al file Parti di un computer pagina come mostrato nell'immagine seguente.
Perché utilizzare elementi HTML semantici?
L'uso di elementi HTML semantici fornisce un contesto al codice. Chiunque guardi il codice potrebbe facilmente capirlo. I tag semplificano lo stile degli elementi e la collaborazione ai progetti.
Puoi usare l'HTML semantico con librerie e framework di frontend. La maggior parte dei browser Web moderni preferisce gli elementi HTML semantici rispetto agli elementi tradizionali. Inizia a utilizzare l'HTML semantico e guarda il tuo codice apparire moderno, leggibile e presentabile.
