Html5 Nya element - Topp 10 nya element av Html5 med exempel

Innehållsförteckning:

Anonim

Översikt över HTML5 nya element

Sedan 1999, när HTML 4.01 blev en standard, har webben och användningen av webben förändrats en väsentlig åtgärd. W3C har beslutat att ändra den grundläggande HTML-syntaxen från Standard Generalized Markup Language (SGML) till XML, och också helt olika markeringsspråk som Scalable Vector Graphics (SVG), XForms och MathML. För närvarande är vissa HTML 4.01-komponenter föråldrade, används aldrig eller används inte som förväntat. Varje del av komponenterna i HTML5 förskjuts eller komponeras om. HTML5 har inkluderat nya element för att illustrera representation, visa digitalt innehåll, förbättrad sidlayout och övergripande funktionalitet och flera nya gränssnitt för att ordentligt hantera dagens internetkrav.

Det finns flera nya element introducerade i HTML5, som erbjuder vissa ytterligare funktioner för att utveckla en önskvärd och interaktiv webbplats. Vi kan skapa din kod snabbt och effektivt med hjälp av sådana komponenter. På grund av bristen på struktur är många välformade HTML-dokument svårare att hantera än de behöver vara. Genom att utvärdera rubrikskalor måste vi ta reda på vart segmentavbrottet är på väg. Div-elementet identifierar sidfält, sidfötter, sidhuvud, navigationsmenyer och huvudinnehållsdelar.

Topp 10 nya HTML5-element

HTML5 ger nya element för att förbättra dokumentets layout.

1.

Elementet anger en del av en sida som innehåller en separat struktur i ett dokument, avsnitt eller webbplats och som rekommenderas att distribueras eller användas i stor utsträckning. Detta kan vara en grupp som publicerar en dagbok eller en daglig pappersrapport, en inlämning till ett online-nyhetsbrev, en kommentar som skickas av en kund eller något annat ämnesfritt objekt.

Exempel:



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:

  • Spara koden ovan i en fil med .html-förlängningen.
  • Kör html-filen i en webbläsare så får du utdata som visas i bilden nedan.

2.

Elementet indikerar individuellt innehåll på mycket sätt som kategoriseringar, kartor, bilder, kodartiklar och många fler.

Exempel:



Figure Element

EDUCBA är en ledande global leverantör av kompetensbaserad utbildning som svarar mot behov 500 000+ medlemmar över 40+ länder.


Produktion:

Ovanstående kod kommer att producera utdata som visas i bilden nedan,

3.

Elementet används för att lägga till beskrivning för bilden.

Exempel:



Figure Caption Element

EDUCBA är en ledande global leverantör av kompetensbaserad utbildning som svarar mot behov 500 000+ medlemmar över 40+ länder.


EDUCBA (Corporate Bridge Consultancy Pvt Ltd)

Produktion:

Ovanstående kod visar resultatet som visas i bilden nedan,

4.

Elementet används för att specificera rubriken för ett dokument eller ett avsnitt på sidan. Du kan definiera mer än en rubrik i ett enda dokument.

Exempel:



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 innehåll går här …

Produktion:

Ovanstående kod visar resultatet som visas i bilden nedan,

5.

Elementet används för att specificera information som författarinformation, upphovsrättsinformation, kontakt, länkar till relaterade dokument, webbplatskarta och många fler.

Exempel:



Footer Element

Copyright © 2019 www.educba.com

Kontakt:

Produktion:

Ovanstående kod visar resultatet som visas i bilden nedan,

6.

Elementet används för att visa den huvudsakliga, dvs viktiga informationen i ett dokument.

Exempel:



Main Element

Information om rubriken

Huvudinformation

EDUCBA


EDUCBA är en ledande global leverantör av kompetensbaserad utbildning …


Sidfotinformation

Produktion:

Ovanstående kod kommer att producera utdata som visas i bilden nedan,

7.

Elementet används för att markera eller markera texten med den bakgrundsfärgen som lockar användaren till en viss text i dokumentet.

Exempel:



Mark Element

EDUCBA är en ledande global leverantör av kompetensbaserad utbildning som svarar mot behov 500 000+ medlemmar över 40+ länder.

Produktion:

Ovanstående kod visar resultatet som visas i bilden nedan,

8.

Elementet används för att ange navigeringslänkar på sidan. Dessa länkar ger anslutningar till andra sidor i ett dokument.

Exempel:



Nav Element


HTML |
CSS |
JAVA |
PHP |
PYTHON

Produktion:

Ovanstående kod kommer att producera utdata som visas i bilden nedan,

9.

Elementet används för att definiera det fristående avsnittet eller det specifika området i dokumentet.

Exempel:



Section Element

Main Article



Section Element

Main Article



Section Element

Main Article

Innehållet i huvudhuvudet kommer att visas här …

Avsnitt ett


Innehållet i det första avsnittet kommer att visas …


Avsnitt två


Innehållet i det andra avsnittet kommer att visas …

Produktion:

Ovanstående kod visar resultatet som visas i bilden nedan,

10.

Taggen är ett underdel av taggen som ger den text som kan visas eller döljas när användaren klickar på rubriken.

Exempel:



Summary Element


EDUCBA - Corporate Bridge Consultancy Pvt Ltd

Det är en ledande global leverantör av kunskapsbaserad utbildning som tillgodoser behov 500 000+ medlemmar över 40+ länder.

Produktion:

När du kör ovanstående kod kommer resultatet att visas som visas nedan,

Som visas på bilden, klicka på rubriken, den kommer att visa den dolda texten som visas i bilden nedan,

Slutsats

Hittills har vi sett hur nya HTML5-element är användbara för olika uppgifter vid skapandet av webbplatsen. Dessa nya element läser dokumentet på ett mer exakt och standardiserat sätt och utvecklar mer komplexa och effektiva webbappar. De nya HTML5-elementen ger några extra extrafunktioner för att generera interaktiva webbplatser.

Rekommenderade artiklar

Detta är en guide till Html5 New Elements. Här diskuterar vi de 10 bästa elementen i Html5 för att förbättra dokumentets layout. Du kan också titta på följande artiklar för att lära dig mer -

  1. Färgkorrigering i After Effects
  2. Topp 6 versioner av HTML
  3. Html5 vs Html4
  4. XHTML vs HTML5
  5. Vad är Bridge?
  6. HTML5 Taggar | Topp 4-taggar med HTML5