Uvod v semantične elemente HTML5

Naslednji članek vam ponuja različne pomenske elemente v html5. Začnimo z razumevanjem semantike. Semantics je vse o različnih vrstah oznak, katerih funkcionalnost bi upodabljala in opravljala isto funkcijo kot na njenem imenu oznake. Funkcionalnost oznake bi bila zlahka razumljiva po njenem imenu; ki je v uporabniku razumljivem imenu / formatu. Večina elementov v HTML-ju je na splošno semantičnih elementov.

Prednosti semantičnih elementov v HTML5

Prednosti semantičnih elementov so naslednje:

  • Enostavno razumevanje kode.
  • Vzdrževanje je mogoče hitro in ustrezno opraviti.
  • Za nobeno oznako ni treba posebej opisovati.

Različni semantični elementi v HTML5

Zdaj se prepustimo pomenskim elementom HTML5.

1.

Ta oznaka nam daje neko idejo, da so podatki znotraj te oznake posebej za podobno vsebino. Odvisno je od različnih vrst člankov, ki jih na splošno imamo preveč. To je lahko blog, forumi, članki v kolumnah v časopisih itd.

Koda:



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

Izhod:

2

Ta oznaka je namenjena zagotavljanju delne vsebine celotnih podatkov. Če uporabljate oznake člankov in razdelkov, jih lahko uporabite znotraj vsake oznake. To je oznaka odseka se lahko uporablja znotraj oznake članka in obratno.

Koda:


The section here is about:

Učenje in vadba

Izhod:

3.

Ta oznaka vsebuje vse podatke o zaglavju. Pod to oznako glave se uporabijo vsi podatki, ki jih želimo umestiti v obliko glave. In to oznako je mogoče večkrat uporabiti v celotnem HTML skriptu. Poglejmo majhen primer tega.

Koda:



This is header #1



This is header #1



This is header #1

Prvi

naslednji …

To je glava št. 2


Drugi

Izhod:

4.

To je odsek podnožja v našem skriptu HTML. Na splošno vidimo vse podatke o avtorskih pravicah in majhen razdelek, ki ga najdemo pod kakršnimi koli ponudbami, kot so „veljajo“, za katero koli ponudbo. Torej so te stvari opredeljene pod oznako podnožja.

Koda:

Znotraj telesa in nad oznako podnožja

Znotraj oznake spodnjega podnožja


Še ena oznaka podnožja


Veljajo pogoji

Izhod:

5.

Ta oznaka nam daje elemente za krmarjenje. URL v katerem koli skriptnem dokumentu HTML, kjer običajno želimo po tej oznaki prehajati z ene na drugo stran. Podatki pod to oznako so na voljo kot hiperpovezave. Te hiperpovezave so lahko uporabne pri navigaciji od enega do drugega odseka. Majhen primer je opredeljen kot:

Koda:


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

Izhod:

Medtem ko vadite, kliknite na te povezave in preverite, kako se ob hipu spreminja barva hiperpovezave.

6.

To je oznaka, ki se uporablja za prikaz podatkov na straneh našega dokumenta HTML. Na mnogih spletnih mestih lahko najdemo vsebino, ki obstaja v stranski vrstici, ki je prikazana s to stransko oznako. Ta vsebina mora biti v skladu z drugimi podatki v dokumentu. Poglejmo majhen primer tega.

Koda:

Kako se uporablja oznaka ob strani


Znotraj stranske oznake


Vsebina znotraj stranske oznake

Izhod:

Natančne vsebine ni mogoče popolnoma določiti na enak način, temveč jo je mogoče le jasno dokumentirati in razumeti ob uporabi celotne strani HTML.

7.

Ta oznaka določa, da bomo priložili sliko. Ta oznaka se lahko uporablja za določitev vira slike in prikaz gif ali slike.

Koda:





Kot smo že omenili, lahko tako določimo oznako figure. Znotraj slikovne oznake lahko svoj slikovni ukaz določimo z izvorno oznako. Znotraj te slikovne oznake lahko po drugi strani uporabimo oznako napisov.

8.

Ta oznaka se uporablja za podpis pod ponujeno sliko. Lahko se uporablja znotraj slikovne oznake. Uporaba le-tega je razvidna iz spodnjega primera.




This is description of the image attached.

Enako lahko poskusite izvesti tako, da podate vir slike in preverite, kako se izpis prikazuje.

9.

Ta oznaka določa vse atribute in celotno vsebino spletnega mesta HTML. Vsebuje edinstveno vsebino. Pomembno pri tej oznaki je, da lahko to oznako uporabite samo enkrat v celotnem ustvarjanju strani. Ugotavljamo, da se lahko druge oznake uporabljajo večkrat pri ustvarjanju spletne strani, vendar je ta glavna oznaka enkratna oznaka za uporabo.

Koda:



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

Branje bi pomagalo razumeti različne teme



Vaditi


S študijem je prakticiranje nujno pri učenju

Izhod:

10.

Ta oznaka je namenjena označevanju določene vsebine ali podatkov. Z drugimi besedami, ta oznaka je koristna pri označevanju podatkov. Spodaj si oglejmo majhen primer tega:

Koda:

V celotnem besedilu, ki ga pišem zdaj, želim to besedilo označiti

Izhod:

11.

Ta oznaka vsebuje dodatne podrobnosti, da lahko uporabniki skrijejo vse podrobnosti na svojo željo. S to oznako lahko uporabniki odprejo / zaprejo katero koli vsebino, ki jo potrebujejo. Če želimo, da ta oznaka na samem začetku razkrije njene podrobnosti, lahko uporabimo atribut "odprto".

Spodaj je majhen primer istega:

Koda:

Je to prikazano?

Izhod:

Zdaj, kakšen bi bil izhod, če ne bi uporabili atributa open?

Je to prikazano?

Izhod 1:

Izhod 2:

12.

Ta oznaka se uporablja znotraj oznake podrobnosti. Pod oznako podrobnosti imamo lahko povzetek, ki določa celoten povzetek spletne strani ali dokumenta HTML. Pomembno pri tem je, da je povzeta oznaka prva otroška oznaka, ki mora biti pod oznako podrobnosti. Najdemo spodaj majhen primer:

Koda:



Have written this inside summary tag which is inside details tag

To besedilo je samo pod oznako podrobnosti


Ta besedilni podatek se zapiše po zaključku oznake podrobnosti

Izhod 1:

V zgornjem izhodu smo poudarili puščico, saj dobimo svoj izhod 2, ko ga razširimo.

Izhod 2:

Ta oznaka morda ne bo dala nobene razlike

13.

Ta oznaka določa datum / čas v takšni obliki, da jo uporabniki lažje razumejo. Vendar je treba opozoriti, da nam ta oznaka v večini brskalnikov morda ne bo spremenila rezultata.

Koda:

Trenutno je ponoči 23:00.

Izhod:

14.

Kot že ime pove, je ta oznaka za pisanje poljubne vsebine v polje. Ta oznaka mora imeti odprt atribut za prikaz pogovornega okna, ko je izvorna koda izvršena. Poiščite primer spodaj:

Tu zapisani podatki se prikažejo v pogovornem oknu

Izhod:

15.

Ta oznaka daje napredek določene naloge v grafičnem prikazu. Tu moramo imeti največje število, za katerega je treba zastopati napredek. Ta oznaka je sestavljena iz dveh atributov. Maks in vrednost sta dva atributa. Max predstavlja skupno štetje, ki ga je treba dokončati, vrednost pa nam daje odstotek štetja, ki je končan glede na največjo vrednost štetja. Primer za to je spodaj:

Koda:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:

Izhod:

16.

Ta oznaka je namenjena merjenju. To je mogoče uporabiti tudi za prostor, ki ga zasede poizvedba ali uporaba prostora na disku. Obstaja nekaj atributov, ki jih je treba uporabiti s to oznako. Atributi so max, min in vrednost. Na podlagi njihove uporabe lahko zagotovo ugotovimo njihov namen in uporabo.

Koda:


EDCUBA


EDCUBA


EDCUBA

Uporaba oznake merilnika

V stanovanju v 6 nadstropjih živim v 2. nadstropju:
2 od 6

Izhod:

17.

To je oznaka, ki je bila uvedena za dodajanje video datotek na našo HTML stran. Dokler ta oznaka ni bila predstavljena, so razvijalci uporabljali vtičnike za vnašanje video datotek v vsebino strani HTL. Obstaja nekaj atributov, ki se lahko uporabljajo skupaj z oznako. Nekatere od teh so tudi samodejno predvajanje, prednastavitev, izključeno.

Koda:


Potrebujemo le oznako vira, da bomo dali vir, od koder moramo naložiti video vsebino na našo stran.

18.

Ta oznaka je namenjena dodajanju zvočnih datotek na našo Html stran. Uporaba in izvirna oznaka bi bila enaka kot pri video oznaki. Kot vajo poskusite uporabiti vse pomenske elemente in ustvarite spletno stran različice e HTML 5, da se boste bolje in hitreje učili.

Zaključek

V tem članku si moramo ogledati veliko semantičnih elementov in njihovo uporabo v HTML5. Pomembno pri tem je, da številne te oznake podpirajo različice internet Explorerja, ki so večje od 9, in kromirane različice večje od 3. Torej, nadaljujte z učenjem in vadite, da boste bolje razumeli uporabo oznak v HTML 5.

Priporočeni članki

To je vodnik po semantičnih elementih HTML5. Tukaj razpravljamo o uvodu in različnih semantičnih elementih v HTML5, skupaj z njegovo implementacijo kode. Če želite izvedeti več, si oglejte tudi naslednji članek -

  1. Najboljših 10 novih elementov HTML5
  2. Oznake HTML5
  3. HTML5 Spletni delavci
  4. Različne vrste HTML dogodkov

Kategorija:

Razvoj programske opreme