Introduktion till HTML5-taggar

Vi vet alla standardförkortningen för HTML; vilket är HyperText Markup Language. Så HTML5 är den senaste och den nya versionen av HTML. När en produkt har utvecklats skulle det uppenbarligen finnas många versioner av HTML med många nya utvecklingar på vägen. Så HTML5 har nya attribut och beteenden. Denna HTML5-tagg är inte längre ett programmeringsspråk, men det är ett markeringsspråk. Vad är nu ett markeringsspråk? Att definiera elementattribut med taggar i ett dokument är ett markeringsspråk. Så låt oss nu gå i detalj om hur vi kan definiera taggar och skapa en webbsida.

Taggar med HTML5

En tagg är en specifikation för att visa innehåll. I allmänhet skulle det finnas en start- och sluttagg. Och det finns också få taggar som inte kräver en sluttagg; tycka om
vilket innebär att raden bryts, som visar data bredvid den taggen från nästa rad. Låt oss se några av de nya elementen i HTML5.

I HTML5 kan vi i allmänhet dela taggarna i två kategorier.

  • Semantiska element: Få exempel på dessa element är;, , etc.
  • Icke-semantiska element: Exempel här är;, etc.

Taggarna som diskuteras nedan är de som nyligen introducerats exklusivt i HTML5-versioner. Det är olika typer av taggar som alla kan kategoriseras.

1. Strukturella taggar

Nedan visas de typer av strukturella taggar med exempel:

a. Artikel: Detta är en tagg som oftast används som en huvudtagg. Används främst i former, bloggar, nyheter och allt som exempel.

Koda:

Den första


Välkommen tillbaka

Produktion:

b. Vid sidan: Något liknande våra vanliga taggar, som skulle relatera innehållet till det omgivande innehållet, som en sidofält i artikeln. Och den här taggen skulle bara vara meningsfull när du använder en IE-version över 8.

c. Detaljer: Den här taggen används för att ge användaren ytterligare information. Detta kan vara en interaktiv plattform som kan dölja eller visa detaljerna. Vi kan se användningen av den här fliken under den sammanfattande taggen.

d. Header: Den här taggen är relaterad till rubrikdelen och innehåller titelinformation. Det måste ha både start- och sluttaggar.

Koda:

Lyckliga timmar


Morgon | Eftermiddag | Kväll

produktion:

e. hgroup: Den här taggen används för att beskriva en grupp rubriker. Låt oss titta i exemplet.

Koda:

Låt oss kontrollera storleken på denna h1


Låt oss kontrollera storleken på denna h2


Låt oss kontrollera storleken på denna h3


Låt oss kontrollera storleken på denna h4


Låt oss kontrollera storleken på denna h5

Produktion:

f. Sidfot: Den här taggen är den som ska placeras i slutet av sidan. Det handlar om något som copyright, historikrelaterad information eller data. Låt oss se ett litet exempel nedan.

Koda:

Kopieringsrättigheter | Kom tillbaka snart

Vänligen anmäl dig för mer lärande innehåll

Produktion:

g. nav: Den här taggen är avsedd för att tillhandahålla ett avsnitt av alla länkar för navigering.

Koda:

  • EDUCBA Hem
  • Om EDUCBA
  • Kurser i EDUCBA

Produktion:

Kontrollera genom att klicka på länkarna när du skriver din kod medan du tränar.

h. Avsnitt: Som namnet redan anger, definierar denna tagg den del av koden som kroppen, sidhuvud, sidfot etc. Här är både start- och sluttaggar nödvändiga. Låt oss se ett litet exempel nedan:

Koda:

Välkommen


Ses snart


Tack.

Produktion:

i. Sammanfattning: Den här taggen används parallellt med fliken Detaljer. Under detaljtaggen har vi den här sammanfattningstaggen för att sammanfatta koncepten. Exempel nedan:

Koda:



How is this Summary tag defined?

Genom att klicka på pilen bredvid sammanfattningsfrågan som jag fick

Data efter visningstaggen visas så här.

Produktion:

Nu utvidgar data för sammanfattningstaggen, så får vi nedan.

2. Formera taggar

Här är de olika typerna av formuläretiketter som förklaras nedan med exempel:

a. Datalist: Den här taggen används som en listruta som har fördefinierade värden för en användare att välja. Låt oss titta på det lilla exemplet nedan:

Koda:

Ange ditt favoritnamn på webbläsaren:

Produktion:

Listrutan dyker upp när musen hålls över.

b. Keygen: Det här är för krypteringen. Det är för att generera en krypterad nyckel för att skicka data i ett krypterat format. För detta element är endast starttaggen tillräcklig / obligatorisk och sluttaggen är inte obligatorisk.

c. Mätare: Den här taggen skulle ge oss mätningen av data som finns i ett visst intervall.

Koda:


25 out of 100

Detta är 25 av 100

70%

Detta är intervallet för 70%

Produktion:

3. Formatera taggar

Nedan visas de typer av formateringstagg med exempel:

a. BDI: Detta är tvåriktad isolering. Som namnet redan antyder kan den här taggen användas för att isolera en del av texten och ge den olika stilar med den i annan text.

b. Mark: Den här taggen kan hjälpa oss att lyfta fram en specifik text.

Koda:

Så här kan du markera eller markera en text.

Produktion:

c. Output: Som namnet redan visar oss ger det resultatet av alla beräkningar.

Koda:



+
=

Produktion:

Se till att du märker formulärattributet för oninput. När du matat in attributet 'x' värde visas utdata.

d. Framsteg: Den här taggen ger oss framstegen för en viss uppgift.

Koda:

Denna framstegsfält är 80% färdig

Produktion:

e. Rp: Detta används när rubin taggarna inte stöds.

f. Rt: Det används med taggen rubin. Detta används oftast vid uttal på både japanska och kinesiska språk.

g. Ruby: Den här taggen används med rt- och rp-taggarna där kommentarerna för de två språken kinesiska och japanska uttalas.

h. Wbr: Den här taggen är för ordbrytningen. Det används främst för att kontrollera hur ett ord går sönder när fönsterstorleken ändras.

4. Embedded Content Taggar

Här är de typer av inbäddad innehållskod som förklaras nedan med exempel:

a. Ljud: Som namnet redan antyder skulle den här taggen hjälpa oss att integrera ljudfiler i HTML-dokumentet.

b. Canvas: Definierar en plats på webbsidan där grafik eller former eller diagram finns eller kan definieras. Här är ett exempel.

Koda:



window.onload = function()(
var can = document.getElementById("run");
var context = can.getContext("2d");
context.moveTo(30, 60);
context.lineTo(150, 30);
context.stroke();
);

Produktion:

c. Dialog: Den här taggen ger oss en standardruta, särskilt om vi ville ha data i en ruta.

Koda:

Försöker dialog här Hur kommer dialogrutan upp?

Produktion:

d. Bädda in: Den här taggen kan användas för att få i alla externa filer till HTML-filen. Vi kan bara ha starttaggen och sluttaggen är inte obligatorisk här. Det finns olika attribut som kan användas med den här taggen, nämligen; bredd, höjd, src och typ.

e. Bild och bildtexter: Detta som redan i dess namn kan innehålla bilderna och kan ge en bildtext till den bilden.

f. Källa: Den här taggen kan implementera flera ljud- och videofiler genom att ange platsen för filerna med denna källtagg.

g. Tid: Den här taggen som namnet redan meddelar är en tagg för att visa tiden. Och observera att denna tagg inte är funktionell i fallet med Internet Explorer version 8 och nedan.

h. Video: Med namnet på taggen kan vi uppenbarligen lära känna var den här taggen används. För att specificera videofilerna har vi den här taggen. Inuti denna Audio / Video-taggar definierar vi källtaggarna i att ange filerna och deras platser.

Inmatningselement av HTML5-taggar

Här är några inmatningselement som vi använder i HTML5-taggar:

1. E-post: Detta är ett av inmatningselementen i HTML5. Detta element tar bara e-postadresser som input.

2. Nummer: Detta inmatningselement accepterar endast numret.

3. Område: Som namnet redan förklarar innehåller denna tagg ett antal nummer.

4. URL: Denna inmatningstagg accepterar inmatningsfältet för URL-adressen. I den här inmatningstypen kan vi bara ange URL: en.

5. Platshållare: Detta är ett av attributen för ingångstypen som text eller textområde eller valfritt nummer. Detta platshållarvärde visar värdet som ska ges som ingång.

Koda:


Enter Date of birth : placeholder = "dd/mm/yyyy"/>

Produktion:

6. Autofokus: Detta attribut fokuserar automatiskt på ett visst fält där detta element har deklarerats inuti inmatningstaggen. Detta attribut stöds endast av de senaste versionerna av Chrome, Safari och Mozilla. Syntax är som:


Tag : This tag represents a description of a definition.
Tag : This tag deletes a specified text.
Tag : This tag helps to display data in a scrolling manner.

This texxt is in a scrolling manner


Tag : This tag represents a description of a definition.
Tag : This tag deletes a specified text.
Tag : This tag helps to display data in a scrolling manner.

This texxt is in a scrolling manner

Produktion:

7.: Detta är en av de grundläggande taggarna som skulle hjälpa webbläsaren att förstå versionen av HTML-filen där programmet skrivs. Deklarationen för denna tagg ska skrivas före HTML-taggen.

8.: Den här metataggen beskriver beskrivningen av HTML-dokumentet. Det innehåller författarens namn, datum och ändringar, etc.

I denna HTML5 har vi till och med en möjlighet att få GeoLocation för en enhet. Det finns olika metoder som kan vara till hjälp för att göra denna platsmärkning lätt. Det finns också olika teckensnitt och färger tillgängliga i HTML5. Nedan följer några taggar som tas bort från HTML-användningen från den här HTML5-versionen.

Akronym, Applet, big, dir, font, frameset, center, tt (TeleType text), basefont, center, strike, frame, u (understruket text), isindex, noframes etc. Några attribut som tas bort är nedan:

Justera, bgcolor, cellpadding, cellavstånd, kant, länk, form, charset, arkiv, codebase, omfattning, alink, vlink, länk, bakgrund, kant, rensa, rullning, storlek, bredd, etc.

9.: Den här taggen används för att visa innehållet där användningen av JavaScript är inaktiverad. Allt innehåll som är skrivet i denna tagg kan användas istället för innehållet där javascript används. Som en övning kan du försöka köra de olika taggarna som exemplen inte tillhandahåller.

Slutsats

Så ja, det finns de grundläggande taggarna och referenserna för HTML5. Den ursprungliga versionen av HTML5 släpptes 28 oktober 2014. Vi har sett olika nya taggar som introducerades och hade gått igenom några attribut i HTML5. I slutändan hade vi till och med täckt att inte bara introduktionen av nya element gjordes, utan vissa element och attribut som var närvarande begränsades från användning genom denna nya version av HTML5.

Det fanns många attribut som gavs med exempel och några med bara data och syftet med attributet eller elementen. Prova att öva på alla dessa olika element och attribut och fortsätt att lära.

Rekommenderade artiklar

Detta är en guide till HTML5-taggar. Här diskuterar vi de 4 bästa HTML5-taggarna och dess inputelement i detalj tillsammans med exempel och kodimplementering. Du kan också titta på följande artiklar för att lära dig mer-

  1. HTML-händelser
  2. HTML-layout
  3. HTML-ramar
  4. HTML-tabell taggar
  5. JavaScript-händelser | Olika implementering av JavaScript-händelser
  6. Olika typer av metatagg i HTML
  7. Hur formatering av text i HTML fungerar?
  8. Olika semantiska element i HTML5

Kategori:

Verktyg för webbutveckling