Panoramica di nuovi elementi HTML5
Dal 1999, quando HTML 4.01 è diventato uno standard, il web e l'uso del web hanno cambiato una misura sostanziale. Il W3C ha deciso di cambiare la sintassi HTML fondamentale da Standard Generalized Markup Language (SGML) a XML e anche linguaggi di markup completamente diversi come Scalable Vector Graphics (SVG), XForms e MathML. Attualmente, alcuni componenti HTML 4.01 sono obsoleti, mai utilizzati o non utilizzati come previsto. Ogni parte dei componenti in HTML5 viene spostata o ricomposta. HTML5 ha incluso nuovi elementi per illustrare la rappresentazione, la visualizzazione di contenuti digitali, il layout di pagina migliorato e la funzionalità generale e diverse nuove interfacce per affrontare adeguatamente i requisiti Internet di oggi.
Ci sono molti nuovi elementi introdotti in HTML5, che offre alcune funzionalità aggiuntive per sviluppare un sito desiderabile e interattivo. Possiamo creare il tuo codice in modo rapido ed efficiente con l'aiuto di tali componenti. A causa della mancanza di struttura, molti documenti HTML ben formati sono più difficili da gestire di quanto debbano essere. Attraverso la valutazione delle scale di intestazione, dobbiamo scoprire dove stanno andando le interruzioni di segmento. L'elemento div identifica barre laterali, piè di pagina, intestazioni, menu di navigazione e parti principali del contenuto.
Primi 10 nuovi elementi HTML5
HTML5 fornisce nuovi elementi per migliorare il layout del documento.
1.
L'elemento specifica una parte di una pagina che include una struttura separata in un documento, una sezione o un sito Web e che si consiglia di distribuire o utilizzare ampiamente. Può trattarsi di un gruppo che pubblica un diario o un rapporto quotidiano, una presentazione a una newsletter online, un commento inviato da un cliente o qualsiasi altro oggetto privo di sostanze.
Esempio:
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Produzione:
- Salvare il codice sopra in un file con estensione .html.
- Esegui il file html in un browser e otterrai l'output come mostrato nell'immagine qui sotto.
2.
L'elemento indica i singoli contenuti in modo molto simile a categorizzazioni, mappe, immagini, articoli in codice e molti altri.
Esempio:
Figure Element
EDUCBA è un fornitore globale leader di istruzione basata sulle competenze che soddisfa le esigenze di oltre 500.000 membri in oltre 40 Paesi.
Produzione:
Il codice sopra produrrà l'output come mostrato nell'immagine qui sotto,
3.
L'elemento viene utilizzato per aggiungere una descrizione per l'immagine.
Esempio:
Figure Caption Element
EDUCBA è un fornitore globale leader di istruzione basata sulle competenze che soddisfa le esigenze di oltre 500.000 membri in oltre 40 Paesi.
EDUCBA (Corporate Bridge Consultancy Pvt Ltd)
Produzione:
Il codice sopra mostra il risultato come mostrato nell'immagine qui sotto,
4.
L'elemento viene utilizzato per specificare l'intestazione per un documento o una sezione della pagina. È possibile definire più di un'intestazione in un singolo documento.
Esempio:
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Il contenuto del documento va qui …
Produzione:
Il codice sopra mostra il risultato come mostrato nell'immagine qui sotto,
5.
L'elemento viene utilizzato per specificare le informazioni come informazioni sull'autore, informazioni sul copyright, contatti, collegamenti a documenti correlati, sitemap e molti altri.
Esempio:
Footer Element
Copyright © 2019 www.educba.com
Contatto:
Produzione:
Il codice sopra mostra il risultato come mostrato nell'immagine qui sotto,
6.
L'elemento viene utilizzato per visualizzare le informazioni principali cioè importanti di un documento.
Esempio:
Main Element
Informazioni sull'intestazione
Informazione principale
EDUCBA
EDUCBA è un fornitore globale leader di istruzione basata sulle competenze …
Informazioni a piè di pagina
Produzione:
Il codice sopra produrrà l'output come mostrato nell'immagine qui sotto,
7.
L'elemento viene utilizzato per evidenziare o contrassegnare il testo con il colore di sfondo che attira l'utente per un particolare testo sul documento.
Esempio:
Mark Element
EDUCBA è un fornitore globale leader di istruzione basata sulle competenze che soddisfa le esigenze di oltre 500.000 membri in oltre 40 Paesi.
Produzione:
Il codice sopra mostra il risultato come mostrato nell'immagine qui sotto,
8.
L'elemento viene utilizzato per specificare i collegamenti di navigazione nella pagina. Questi collegamenti forniscono connessioni ad altre pagine di un documento.
Esempio:
Nav Element
HTML |
CSS |
JAVA |
PHP |
PYTHON
Produzione:
Il codice sopra produrrà l'output come mostrato nell'immagine qui sotto,
9.
L'elemento viene utilizzato per definire la sezione autonoma o l'area specifica nel documento.
Esempio:
Section Element
Main Article
Section Element
Main Article
Section Element
Main Article
Il contenuto dell'intestazione principale verrà visualizzato qui …
Sezione prima
Verrà visualizzato il contenuto della prima sezione …
Sezione due
Verrà visualizzato il contenuto della seconda sezione …
Produzione:
Il codice sopra mostra il risultato come mostrato nell'immagine qui sotto,
10.
Il tag è una sottoparte del tag che fornisce il testo che può essere visualizzato o nascosto quando l'utente fa clic sull'intestazione.
Esempio:
Summary Element
EDUCBA - Corporate Bridge Consultancy Pvt Ltd
È un fornitore globale leader di istruzione basata sulle competenze che risponde alle esigenze di oltre 500.000 membri in oltre 40 Paesi.
Produzione:
Quando esegui il codice sopra, verrà visualizzato il risultato come mostrato di seguito,
Come mostrato nell'immagine, fai clic sull'intestazione, visualizzerà il testo nascosto come mostrato nell'immagine qui sotto,
Conclusione
Finora, abbiamo visto come i nuovi elementi HTML5 sono utili per varie attività nella creazione del sito Web. Questi nuovi elementi leggono il documento in modo più accurato e standardizzato e sviluppano app Web più complesse ed efficienti. I nuovi elementi HTML5 offrono alcune funzionalità aggiuntive per la generazione di siti Web interattivi.
Articoli consigliati
Questa è una guida ai nuovi elementi di HTML5. Qui discutiamo i primi 10 nuovi elementi di Html5 per migliorare il layout del documento. Puoi anche consultare i seguenti articoli per saperne di più -
- Correzione del colore in After Effects
- Le 6 migliori versioni di HTML
- Html5 vs Html4
- XHTML vs HTML5
- Che cos'è Bridge?
- Tag HTML5 | I 4 tag principali di HTML5