Uvod u semantičke elemente HTML5

Sljedeći će vam članak pružiti različite semantičke elemente u html5. Započnimo s razumijevanjem semantike. Semantics se odnosi na različite vrste oznaka čija bi funkcionalnost bila prikazana i obavljala istu funkciju kao i prema nazivu njezine oznake. Funkcionalnost oznake lako bi se razumjela njegovim nazivom; koji se nalazi u korisniku razumljivom imenu / formatu. Većina elemenata u HTML-u uglavnom su semantički elementi.

Prednosti semantičkih elemenata u HTML5

prednosti semantičkih elemenata su sljedeće:

  • Jednostavno razumijevanje koda.
  • Održavanje se može obaviti brzo i na odgovarajući način.
  • Nema potrebe dodavati opis posebno za bilo koju oznaku.

Različiti semantički elementi u HTML5

Idemo sada u semantičke elemente HTML5.

1.

Ova oznaka daje nam neku ideju da su podaci unutar te oznake posebno za sličan sadržaj. To ovisi o različitim vrstama članaka koje također imamo. To može biti blog, forumi, članci u kolumni u novinama itd.

Kodirati:



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

Izlaz:

2.

Ova oznaka govori o pružanju presječnog sadržaja ukupnih podataka. Znajući o korištenju oznaka članka i odjeljaka, te se oznake mogu upotrijebiti unutar svake oznake. To je oznaka odjeljka može se koristiti unutar oznake članka i obrnuto.

Kodirati:


The section here is about:

Učenje i vježbanje

Izlaz:

3.

Ova oznaka daje sve podatke zaglavlja. Pod ovom oznakom zaglavlja koriste se svi podaci koje želimo smjestiti u format zaglavlja. I ova se oznaka može više puta upotrijebiti u čitavom HTML skriptu. Pogledajmo jedan mali primjer toga.

Kodirati:



This is header #1



This is header #1



This is header #1

Prvi

sljedeći …

Ovo je zaglavlje br. 2


Drugi

Izlaz:

4.

Ovo je odjeljak podnožja u našoj HTML skripti. Općenito, vidimo sve podatke o autorskim pravima i mali odjeljak koji pronađemo pod bilo kojom ponudom poput "primjenjuju se" na bilo koju ponudu. Dakle, ove su stvari definirane pod oznakom podnožja.

Kodirati:

Unutar tijela i iznad oznake podnožja

Oznaka unutarnjeg podnožja



Još jedna oznaka podnožja

Primjenjuju se uvjeti

Izlaz:

5.

Ova oznaka daje nam elemente za navigaciju. URL u bilo kojem HTML dokumentu skripte gdje obično želimo kretati s jedne stranice na drugu stranicu kroz ovu oznaku. Svi podaci koji su dati pod ovom oznakom dostupni su u obliku hiperveza. Ove hiperveze mogu biti korisne za navigaciju iz jednog odjeljka u drugi odjeljak. Mali primjer je definiran kao:

Kodirati:


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

Izlaz:

Tijekom vježbanja kliknite na te veze i provjerite kako se boja hiperveza mijenja kad kliknete.

6.

Ovo je oznaka koja se koristi za prikaz podataka na stranama našeg HTML dokumenta. Na mnogim web stranicama možemo pronaći sadržaj koji postoji u bočnoj traci, a koji je prikazan pomoću ove oznake na stranu. Taj sadržaj treba biti u skladu s ostalim podacima koji su prisutni u dokumentu. Pogledajmo jedan mali primjer toga.

Kodirati:

Kako se koristi oznaka na stranu

Unutra oznaka na stranu


Sadržaj unutar bočne oznake

Izlaz:

Točan sadržaj ne može se na isti način specificirati, već se samo može jasno dokumentirati i razumjeti koristeći cijelu HTML stranicu.

7.

Ova oznaka određuje da ćemo priložiti sliku. Oznaka se može koristiti za određivanje izvora slike i prikaz gif-a ili slike.

Kodirati:





Kao što je već spomenuto, na taj način možemo definirati figurnu oznaku. Unutar oznake figure možemo odrediti našu naredbu za slike s izvornom oznakom. Unutar ove slikovne oznake zauzvrat možemo upotrijebiti oznaku opisa slike.

8.

Oznaka se koristi za dodavanje opisa ispod prikazane slike. Može se koristiti unutar oznake slike. Njegova upotreba vidi se u primjeru u nastavku.




This is description of the image attached.

Možete ih pokušati izvršiti davanjem izvora slike i provjeriti kako se prikazuje izlaz.

9.

Ova oznaka određuje sve atribute i cjelokupni sadržaj HTML web mjesta. Sadrži sav jedinstveni sadržaj. Važno je primijetiti ovu oznaku da se ova oznaka može upotrijebiti samo jednom u cjelokupnom stvaranju stranice. Otkrivamo kako se druge oznake mogu koristiti više puta u kreiranju web stranice, ali ova glavna oznaka je jednokratna oznaka upotrebe vremena.

Kodirati:



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

Čitanje bi vam pomoglo u razumijevanju različitih tema



vježbanje


Uz učenje, vježbanje je nužna stvar u učenju

Izlaz:

10.

Ova je oznaka za isticanje određenog sadržaja ili podataka. Drugim riječima, ova je oznaka korisna u obilježavanju podataka. Pogledajmo mali primjer za ovo u nastavku:

Kodirati:

U ovom cijelom tekstu koji sada pišem, želim ovaj tekst označiti

Izlaz:

11.

Ova oznaka sadrži dodatne pojedinosti o tome da korisnici mogu sakriti bilo koje detalje po svojoj želji. Kroz ovu oznaku korisnici mogu otvoriti / zatvoriti bilo koji sadržaj koji im je potreban. Ako želimo da ta oznaka otkrije njene detalje na samom početku, tada se može koristiti atribut "otvoreno".

Ispod je mali primjer istog:

Kodirati:

Je li to prikazano?

Izlaz:

Pa, koji bi bio izlaz ako ne bismo koristili atribut open?

Je li to prikazano?

Izlaz 1:

Izlaz 2:

12.

Ova se oznaka koristi unutar oznake detalja. Pod oznakom pojedinosti možemo imati oznaku sažetka koja određuje cjelokupni sažetak web stranice ili HTML dokumenta. Važno je ovdje napomenuti da je sažetak oznaka prva podređena oznaka koja se mora nalaziti pod oznakom detalja. Donosimo mali primjer u nastavku:

Kodirati:



Have written this inside summary tag which is inside details tag

Ovaj tekst dolazi samo pod oznakom detalja

Ovaj tekstualni podaci pišu se nakon dovršetka oznake detalja

Izlaz 1:

U gore navedenom izlazu istakli smo strelicu, kao što smo dobili i naš izlaz 2 nakon što ga proširimo.

Izlaz 2:

Ta se oznaka možda ne razlikuje

13.

Ova oznaka definira datum / vrijeme u takvom formatu koji korisnici mogu lako razumjeti. No, treba napomenuti da nam ova oznaka možda ne daje promijenjeni ispis u mnogim preglednicima.

Kodirati:

Trenutno je noć u 11:00 sati.

Izlaz:

14.

Kao što ime već sugerira, ova oznaka služi za pisanje bilo kojeg sadržaja u okvir. Ova oznaka trebala bi imati otvoren atribut za prikazivanje dijaloškog okvira nakon izvršenja izvornog koda. Pronađite primjer u nastavku:

Ovdje zapisani podaci prikazuju se u dijaloškom okviru

Izlaz:

15.

Ova oznaka daje napredak određenog zadatka u grafičkom prikazu. Ovdje moramo imati maksimalni broj za koji se mora zastupati napredak. Ova se oznaka uglavnom sastoji od dva atributa. Max i vrijednost su dva atributa. Max predstavlja ukupni broj koji treba dovršiti, a vrijednost nam daje postotak brojanja koji je završen s obzirom na maksimalnu vrijednost broja. Primjer za to je u nastavku:

Kodirati:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:

Izlaz:

16.

Ova je oznaka za mjerenje. To se također može iskoristiti za prostor koji je zauzet upitom ili upotrebom prostora na disku. Postoji nekoliko atributa koji će se koristiti s ovom oznakom. Atributi su max, min i vrijednost. Na temelju njihove upotrebe definitivno možemo utvrditi njihovu svrhu i uporabu.

Kodirati:


EDCUBA


EDCUBA


EDCUBA

Upotreba mjerne oznake

U stanu od 6 spratova, živim na 2. katu:
2 od 6

Izlaz:

17.

Ovo je oznaka koja je uvedena za dodavanje video datoteka na našu HTML stranicu. Sve do uvođenja ove oznake, programeri su koristili dodatke za uvođenje video datoteka u sadržaj HTL stranice. Postoji nekoliko atributa koji se mogu koristiti zajedno s oznakom. Automatska reprodukcija, prethodno učitavanje, isključeno su neke od ovih.

Kodirati:


Potrebna nam je samo oznaka izvora da bismo dali izvor odakle trebamo učitati video sadržaj na našu stranicu.

18.

Ova oznaka služi za dodavanje audio datoteka na našu Html stranicu. Potrošnja i oznaka izvora bit će isti kao i video oznaka. Kao vježbu pokušajte koristiti sve semantičke elemente i stvorite web stranicu verzije e HTML 5 da biste bolje i brže učili.

Zaključak

U ovom članku moramo vidjeti mnoge semantičke elemente i njihovu upotrebu u HTML5. Ovdje je važno napomenuti da mnoge od ovih oznaka podržavaju verzije internet Explorera veće od 9 i kromirane verzije veće od 3. Dakle, nastavite učiti i vježbati kako biste stekli bolje razumijevanje uporabe oznaka u HTML 5.

Preporučeni članci

Ovo je vodič za HTML5 semantičke elemente. Ovdje smo raspravljali o uvodu i raznim semantičkim elementima u HTML5, zajedno s njegovom implementacijom koda. Možete pogledati i sljedeći članak da biste saznali više -

  1. Top 10 HTML5 novih elemenata
  2. HTML5 oznake
  3. HTML5 Web Workers
  4. Različita vrsta HTML događaja

Kategorija:

Razvoj softvera