Introduzione agli elementi semantici HTML5

Il seguente articolo ti fornirà vari elementi semantici in HTML5. Cominciamo con la comprensione della semantica. La semantica riguarda tutti i diversi tipi di tag le cui funzionalità descrivono ed eseguono la stessa funzione del nome del tag. La funzionalità del tag sarebbe facilmente comprensibile con il suo nome; che è in un nome / formato comprensibile dall'utente. La maggior parte degli elementi in HTML sono generalmente elementi semantici.

Vantaggi degli elementi semantici in HTML5

i vantaggi degli elementi semantici sono i seguenti:

  • Facile comprensione del codice.
  • La manutenzione può essere eseguita in modo rapido e appropriato.
  • Non è necessario aggiungere alcuna descrizione specifica per qualsiasi tag.

Vari elementi semantici in HTML5

Passiamo ora agli elementi semantici di HTML5.

1.

Questo tag ci dà l'idea che i dati all'interno di questo tag siano specifici per contenuti simili. Dipende dai diversi tipi di articoli che generalmente abbiamo anche. Può essere un blog, forum, articoli di colonne sui giornali, ecc.

Codice:



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA

Produzione:

2.

Questo tag riguarda la fornitura di un contenuto in sezione dei dati totali. Conoscendo l'utilizzo dei tag sia dell'articolo che della sezione, tali tag possono essere utilizzati all'interno di ciascun tag. Questo è il tag di sezione che può essere utilizzato all'interno del tag di articolo e viceversa.

Codice:


The section here is about:

Apprendimento e pratica

Produzione:

3.

Questo tag fornisce tutti i dati di intestazione. Tutti i dati che vogliamo posizionare nel formato dell'intestazione vengono utilizzati sotto questo tag di intestazione. E questo tag può essere usato più volte nell'intero scripting HTML. Vediamone un piccolo esempio.

Codice:



This is header #1



This is header #1



This is header #1

Il primo


prossimo …

Questa è l'intestazione # 2


Il secondo

Produzione:

4.

Questa è la sezione del piè di pagina nel nostro script HTML. Generalmente, vediamo tutti i dati sul copyright e la piccola sezione che troviamo sotto qualsiasi offerta come "condizioni applicabili" su qualsiasi offerta. Quindi queste cose sono definite sotto il tag footer.

Codice:

All'interno del corpo e sopra il tag footer

Etichetta all'interno del piè di pagina.


Un altro tag piè di pagina

Si applicano le condizioni

Produzione:

5.

Questo tag ci fornisce gli elementi di navigazione. L'URL in qualsiasi script di documenti HTML in cui generalmente desideriamo spostarci da una pagina all'altra attraverso questo tag. Tutti i dati forniti con questo tag sono disponibili come collegamenti ipertestuali. Questi collegamenti ipertestuali possono essere utili per spostarsi da una sezione all'altra. Un piccolo esempio è definito come:

Codice:


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2

Produzione:

Mentre fai pratica, fai clic su quei collegamenti e controlla come cambia il colore del collegamento ipertestuale al clic.

6.

Questo è un tag che viene utilizzato per visualizzare i dati ai lati del nostro documento HTML. Su molti siti Web, possiamo trovare contenuti esistenti in una barra laterale, che viene visualizzata utilizzando questo tag da parte. Questo contenuto dovrebbe essere in linea con gli altri dati presenti nel documento. Vediamone un piccolo esempio.

Codice:

Come viene utilizzato il tag da parte

Etichetta a parte


Contenuto all'interno del tag a parte

Produzione:

Il contenuto esatto non può essere specificato completamente allo stesso modo, può solo essere documentato e compreso chiaramente durante l'utilizzo dell'intera pagina HTML.

7.

Questo tag specifica che aggiungeremo un'immagine. Questo tag può essere utilizzato per specificare una fonte di immagini e visualizzare una gif o un'immagine.

Codice:





Come accennato in precedenza, è così che possiamo definire il tag figura. All'interno del tag figure, possiamo specificare il comando image con un tag source. All'interno di questo tag di figura, possiamo, a sua volta, utilizzare il tag di didascalia della figura.

8.

Questo tag viene utilizzato per fornire didascalia sotto l'immagine fornita. Può essere utilizzato all'interno del tag figure. L'uso di questo può essere visto nell'esempio seguente.




This is description of the image attached.

Puoi provare a eseguire lo stesso fornendo una fonte di immagini e controllare come viene visualizzato l'output.

9.

Questo tag specifica tutti gli attributi e il contenuto completo del sito HTML. Contiene tutto il contenuto unico. Una cosa importante da notare per questo particolare tag è che questo tag può essere usato solo una volta nella creazione della pagina totale. Scopriamo che altri tag possono essere utilizzati più di una volta nella creazione di una pagina Web, ma questo tag principale è un tag di utilizzo singolo tempo.

Codice:



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying

La lettura aiuterebbe a comprendere diversi argomenti


praticante


Con lo studio, la pratica è una cosa da fare nell'apprendimento

Produzione:

10.

Questo tag serve per evidenziare contenuti o dati specifici. In altre parole, questo tag è utile per contrassegnare i dati. Vediamo un piccolo esempio per questo qui sotto:

Codice:

In tutto il testo che sto scrivendo ora, desidero contrassegnare questo testo

Produzione:

11.

Questo tag contiene i dettagli aggiuntivi, che gli utenti possono nascondere tutti i dettagli sul loro desiderio. Attraverso questo tag, gli utenti possono aprire / chiudere qualsiasi contenuto di cui hanno bisogno. Se vogliamo che quel tag divulga i suoi dettagli all'inizio stesso, allora può essere usato l'attributo "open".

Di seguito è riportato un piccolo esempio dello stesso:

Codice:

Questo è visualizzato?

Produzione:

Ora, quale sarebbe l'output se non utilizzassimo l'attributo open?

Questo è visualizzato?

Uscita 1:

Uscita 2:

12.

Questo tag viene utilizzato all'interno del tag dettagli. Sotto il tag dettagli, possiamo avere un tag di riepilogo che specifica l'intero riepilogo della pagina Web o del documento HTML. Una cosa importante da notare qui è che il tag di riepilogo è il primo tag figlio che deve rientrare nel tag dei dettagli. Troviamo un piccolo esempio di seguito:

Codice:



Have written this inside summary tag which is inside details tag

Questo testo rientra solo nel tag dei dettagli

Questi dati di testo vengono scritti dopo il completamento del tag dettagli

Uscita 1:

Nell'output sopra, avevamo evidenziato la freccia, poiché otteniamo il nostro output 2 una volta che lo espandiamo.

Uscita 2:

Questo tag potrebbe non dare alcuna differenza

13.

Questo tag definisce la data / ora in un formato che gli utenti possano facilmente capire. Ma una cosa da notare è che questo tag potrebbe non darci un output modificato in molti browser.

Codice:

Attualmente sono le 23:00 di notte.

Produzione:

14.

Come già suggerisce il nome, questo tag serve per scrivere qualsiasi contenuto in una casella. Questo tag dovrebbe avere un attributo aperto per la visualizzazione della finestra di dialogo una volta eseguito il codice sorgente. Trova un esempio di seguito:

I dati scritti qui vengono visualizzati in una finestra di dialogo

Produzione:

15.

Questo tag fornisce l'avanzamento di una determinata attività in una rappresentazione grafica. Qui dobbiamo avere il numero massimo per cui devono essere rappresentati i progressi. Questo tag è composto principalmente da due attributi. Max e valore sono i due attributi. Max rappresenta il conteggio totale che deve essere completato e Valore ci fornisce la percentuale di conteggio completata rispetto al valore di conteggio massimo. Un esempio è il seguente:

Codice:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:

Produzione:

16.

Questo tag è per la misurazione. Questo può essere utilizzato anche per lo spazio occupato da una query o l'utilizzo dello spazio su disco. Ci sono alcuni attributi che devono essere usati con questo tag. Gli attributi sono max, min e value. In base al loro utilizzo possiamo sicuramente capire il loro scopo e utilizzo.

Codice:


EDCUBA


EDCUBA


EDCUBA

Utilizzo del tag Meter

In un appartamento di 6 piani, abito al 2 ° piano:
2 su 6

Produzione:

17.

Questo è un tag che è stato introdotto per aggiungere file video alla nostra pagina HTML. Fino all'introduzione di questo tag, gli sviluppatori hanno utilizzato plug-in per introdurre file video nel contenuto della pagina HTL. Ci sono alcuni attributi che possono essere usati insieme al tag. Autoplay, Preload, Muted sono alcuni di questi.

Codice:


Abbiamo solo bisogno di un tag sorgente per fornire la fonte da cui dobbiamo caricare i contenuti video sulla nostra pagina.

18.

Questo tag serve per aggiungere file audio nella nostra pagina HTML. L'uso e il tag sorgente sarebbero gli stessi di quelli del tag video. Come esercizio, prova a utilizzare tutti gli elementi semantici e crea la pagina Web della versione e HTML 5 per imparare meglio e più velocemente.

Conclusione

In questo articolo, dobbiamo vedere molti elementi semantici e il loro utilizzo in HTML5. Una cosa importante da notare qui è che molti di questi tag sono supportati da versioni di Internet Explorer maggiori di 9 e versioni di Chrome maggiori di 3. Quindi, continua a imparare e ad esercitarti per capire meglio l'uso dei tag in HTML 5.

Articoli consigliati

Questa è una guida agli elementi semantici HTML5. Qui discutiamo l'introduzione e vari elementi semantici in HTML5 insieme alla sua implementazione del codice. Puoi anche leggere il seguente articolo per saperne di più -

  1. Primi 10 nuovi elementi HTML5
  2. Tag HTML5
  3. HTML5 Web Workers
  4. Diversi tipi di eventi HTML

Categoria:

Sviluppo software