Oversigt over HTML5 nye elementer

Siden 1999, da HTML 4.01 blev en standard, har internettet og brugen af ​​internettet ændret sig en væsentlig foranstaltning. W3C har besluttet at ændre den grundlæggende HTML-syntaks fra Standard Generalised Markup Language (SGML) til XML, og også helt forskellige markup-sprog såsom Scalable Vector Graphics (SVG), XForms og MathML. I øjeblikket er nogle HTML 4.01-komponenter forældede, aldrig brugt eller ikke brugt som forventet. Hver del af komponenterne i HTML5 forskydes eller komponeres igen. HTML5 har inkluderet nye elementer til illustrering af repræsentation, visning af digitalt indhold, forbedret sidelayout og overordnet funktionalitet og flere nye grænseflader til korrekt at tackle dagens internetkrav.

Der er flere nye elementer introduceret i HTML5, der tilbyder visse yderligere funktioner til at udvikle et ønskeligt og interaktivt sted. Vi kan oprette din kode hurtigt og effektivt ved hjælp af sådanne komponenter. På grund af den manglende struktur er mange velformede HTML-dokumenter sværere at håndtere, end de har brug for. Gennem evaluering af overskudsskalaer er vi nødt til at finde ud af, hvor segmentopdelingen er på vej. Div-elementet identificerer sidebjælker, sidefødder, overskrifter, navigationsmenuer og dele af hovedindhold.

Top 10 nye HTML5-elementer

HTML5 giver nye elementer til forbedring af dokumentets layout.

1.

Elementet specificerer en del af en side, der inkluderer en separat struktur i et dokument, sektion eller websted, og som anbefales at blive bredt distribueret eller anvendelig. Dette kan være en gruppe, der poster en journal eller en daglig papirrapport, en indsendelse til et online nyhedsbrev, en bemærkning sendt af en kunde eller ethvert andet stoffrit objekt.

Eksempel:



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.

Produktion:

  • Gem ovenstående kode i en fil med .html-udvidelse.
  • Kør html-filen i en browser, så får du output som vist på nedenstående billede.

2.

Elementet angiver individuelt indhold på meget måde som kategoriseringer, kort, billeder, kodeartikler og mange flere.

Eksempel:



Figure Element

EDUCBA er en førende global leverandør af kvalitetsbaseret uddannelse, der imødekommer behovene 500.000+ medlemmer i 40+ lande.


Produktion:

Ovenstående kode producerer output som vist på nedenstående billede,

3.

Elementet bruges til at tilføje beskrivelse for billedet.

Eksempel:



Figure Caption Element

EDUCBA er en førende global leverandør af kvalitetsbaseret uddannelse, der imødekommer behovene 500.000+ medlemmer i 40+ lande.


EDUCBA (Corporate Bridge Consultancy Pvt Ltd)

Produktion:

Ovenstående kode viser resultatet som vist på nedenstående billede,

4.

Elementet bruges til at specificere overskriften for et dokument eller et afsnit på siden. Du kan definere mere end en header i et enkelt dokument.

Eksempel:



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

Dokumentets indhold går her …

Produktion:

Ovenstående kode viser resultatet som vist på nedenstående billede,

5.

Elementet bruges til at specificere informationen som forfatteroplysninger, ophavsret, kontakt, links til relaterede dokumenter, sitemap og mange flere.

Eksempel:



Footer Element

Copyright © 2019 www.educba.com

Kontakt:

Produktion:

Ovenstående kode viser resultatet som vist på nedenstående billede,

6.

Elementet bruges til at vise de vigtigste dvs. vigtige oplysninger i et dokument.

Eksempel:



Main Element

Information om overskrift

Hovedoplysninger

EDUCBA


EDUCBA er en førende global leverandør af kvalitetsbaseret uddannelse …


Sidefodsoplysninger

Produktion:

Ovenstående kode producerer output som vist på nedenstående billede,

7.

Elementet bruges til at fremhæve eller markere teksten med den baggrundsfarve, der tiltrækker brugeren for en bestemt tekst på dokumentet.

Eksempel:



Mark Element

EDUCBA er en førende global leverandør af kvalitetsbaseret uddannelse, der imødekommer behovene 500.000+ medlemmer i 40+ lande.

Produktion:

Ovenstående kode viser resultatet som vist på nedenstående billede,

8.

Elementet bruges til at specificere navigationslinkene på siden. Disse links giver forbindelser til andre sider i et dokument.

Eksempel:



Nav Element


HTML |
CSS |
JAVA |
PHP |
PYTHON

Produktion:

Ovenstående kode producerer output som vist på nedenstående billede,

9.

Elementet bruges til at definere det enkeltstående afsnit eller det specifikke område i dokumentet.

Eksempel:



Section Element

Main Article



Section Element

Main Article



Section Element

Main Article

Indholdet af hovedoverskriften vises her …

Afsnit et


Indholdet af det første afsnit vises …


Afsnit to


Indholdet af det andet afsnit vises …

Produktion:

Ovenstående kode viser resultatet som vist på nedenstående billede,

10.

Mærkatet er et underpart af tagget, der indeholder teksten, der kan vises eller skjules, når brugeren klikker på overskriften.

Eksempel:



Summary Element


EDUCBA - Corporate Bridge Consultancy Pvt Ltd

Det er en førende global leverandør af kvalitetsbaseret uddannelse, der imødekommer behovene 500.000+ medlemmer i 40+ lande.

Produktion:

Når du kører ovenstående kode, viser det resultatet som vist nedenfor,

Som vist på billedet, skal du klikke på overskriften, den vil vise den skjulte tekst som vist på billedet herunder,

Konklusion

Indtil videre har vi set, hvordan nye HTML5-elementer er nyttige til forskellige opgaver i oprettelsen af ​​webstedet. Disse nye elementer læser dokumentet på en mere nøjagtig og op til standard måde og udvikler mere komplekse og effektive webapps. De nye HTML5-elementer giver nogle ekstra ekstra funktioner til at generere interaktive websteder.

Anbefalede artikler

Dette er en guide til Html5 nye elementer. Her diskuterer vi de top 10 nye elementer i Html5 for at forbedre layoutet af dokumentet. Du kan også se på de følgende artikler for at lære mere -

  1. Farvekorrektion i After Effects
  2. Top 6 versioner af HTML
  3. Html5 vs Html4
  4. XHTML vs HTML5
  5. Hvad er Bridge?
  6. HTML5-tags | Top 4 tags af HTML5

Kategori:

Webudviklingsværktøjer