Úvod do sémantických prvkov HTML5

Nasledujúci článok vám poskytne rôzne sémantické prvky v html5. Začnime pochopením sémantiky. Sémantika je o rôznych typoch značiek, ktoré by funkčnosť zobrazovali a vykonávali rovnakú funkciu ako podľa názvu značky. Funkčnosť značky by bola ľahko zrozumiteľná podľa jej názvu; ktorý je v zrozumiteľnom mene / formáte pre používateľa. Väčšina prvkov v HTML sú zvyčajne sémantické prvky.

Výhody sémantických prvkov v HTML5

výhody sémantických prvkov sú nasledujúce:

  • Ľahké porozumenie kódu.
  • Údržba sa môže vykonať rýchlo a primerane.
  • Pre každú značku nie je potrebné pridať žiadny popis.

Rôzne sémantické prvky v HTML5

Poďme sa teraz dostať k sémantickým prvkom HTML5.

1.

Táto značka nám dáva predstavu, že údaje vo vnútri tejto značky sú konkrétne pre podobný obsah. Závisí to od rôznych typov článkov, ktoré všeobecne máme. Môže to byť blog, fóra, rubriky v novinách atď.

kód:



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

Výkon:

2.

Táto značka je o poskytovaní sekčného obsahu celkových údajov. Pri znalosti značiek článkov aj sekcií sa tieto značky môžu použiť vo vnútri každej značky. To je značka sekcie, ktorú môžete použiť vo vnútri značky článku a naopak.

kód:


The section here is about:

Učenie a precvičovanie

Výkon:

3.

Táto značka poskytuje všetky údaje hlavičky. Pod touto značkou hlavičky sa používajú všetky údaje, ktoré chceme umiestniť do formátu hlavičky. A túto značku je možné použiť viackrát v celom skriptovaní HTML. Pozrime sa na jeho malý príklad.

kód:



This is header #1



This is header #1



This is header #1

Prvý

ďalší …

Toto je hlavička # 2


Druhý

Výkon:

4.

Toto je časť päty nášho HTML skriptu. Vo všeobecnosti vidíme všetky údaje o autorských právach a malú časť, ktorú nájdeme v rámci akýchkoľvek ponúk, ako sú „podmienky“. Tieto veci sú definované pod značkou päty.

kód:

Vnútri tela a nad značkou päty

Značka vnútri päty.


Ďalšia značka päty

Platia podmienky

Výkon:

5.

Táto značka nám poskytuje navigačné prvky. Adresa URL v ľubovoľnom skripte dokumentu HTML, kde prostredníctvom tejto značky zvyčajne chceme prejsť z jednej stránky na druhú stránku. Všetky údaje, ktoré sú uvedené pod touto značkou, sú k dispozícii ako hypertextové odkazy. Tieto hypertextové odkazy môžu byť užitočné pri navigácii z jednej sekcie do druhej. Malý príklad je definovaný ako:

kód:


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

Výkon:

Počas cvičenia kliknite na tieto odkazy a skontrolujte, ako sa zmení farba hypertextového odkazu po kliknutí.

6.

Toto je značka, ktorá sa používa na zobrazenie údajov na stranách nášho dokumentu HTML. Na mnohých webových stránkach nájdeme obsah, ktorý existuje na bočnom paneli, ktorý sa zobrazuje pomocou tejto vedľajšej značky. Tento obsah by mal byť v súlade s ostatnými údajmi uvedenými v dokumente. Pozrime sa na jeho malý príklad.

kód:

Ako sa používa stranou

Vnútri stranou značky


Obsah vo vnútri značky

Výkon:

Presný obsah nie je možné špecifikovať úplne rovnakým spôsobom, je možné ho jasne dokumentovať a porozumieť iba pri použití celej stránky HTML.

7.

Táto značka určuje, že sa chystáme pripojiť obrázok. Táto značka sa môže použiť na určenie zdroja obrázka a zobrazenie gif alebo obrázka.

kód:





Ako je uvedené vyššie, takto môžeme definovať značku obrázka. Vo vnútri obrázkovej značky môžeme zadať príkaz obrázka pomocou zdrojovej značky. V rámci tejto obrázkovej značky môžeme zase použiť značku titulkov.

8.

Táto značka sa používa na poskytnutie titulku pod poskytnutým obrázkom. Môže sa použiť vo vnútri obrázkovej značky. Ich použitie je možné vidieť v nižšie uvedenom príklade.




This is description of the image attached.

Môžete to skúsiť vykonať zadaním zdroja obrázka a skontrolovať, ako sa výstup zobrazuje.

9.

Táto značka určuje všetky atribúty a celý obsah stránky HTML. Obsahuje všetok jedinečný obsah. Dôležitou vecou, ​​ktorú si treba všimnúť pre túto konkrétnu značku, je, že túto značku je možné pri vytváraní stránky použiť iba raz. Zistili sme, že pri vytváraní webovej stránky sa môžu ďalšie značky použiť viackrát, ale táto hlavná značka je značka na jednorazové použitie.

kód:



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

Čítanie by pomohlo pochopiť rôzne témy



precvičovanie


Pri štúdiu je precvičovanie nevyhnutné pri učení

Výkon:

10.

Táto značka slúži na zvýraznenie konkrétneho obsahu alebo údajov. Inými slovami, táto značka je užitočná pri označovaní údajov. Uvidíme nižšie uvedený malý príklad:

kód:

V tomto celom texte, ktorý teraz píšem, chcem tento text označiť

Výkon:

11.

Táto značka obsahuje ďalšie podrobnosti, ktoré môžu používatelia skryť podľa svojho želania. Prostredníctvom tejto značky môžu používatelia otvárať / zatvárať akýkoľvek obsah, ktorý potrebujú. Ak chceme, aby značka zverejnila svoje podrobnosti hneď na začiatku, potom možno použiť atribút „otvorené“.

Nižšie uvádzame malý príklad toho istého:

kód:

Je to zobrazené?

Výkon:

Aký by bol teraz výstup, ak by sme nepoužili otvorený atribút?

Je to zobrazené?

Výstup 1:

Výstup 2:

12.

Táto značka sa používa vo vnútri značky podrobností. V rámci značky podrobností môžeme mať súhrnnú značku, ktorá určuje celé zhrnutie webovej stránky alebo dokumentu HTML. Dôležité je poznamenať, že súhrnná značka je prvá dcérska značka, ktorá musí spadať pod značku podrobností. Nižšie uvádzame malý príklad:

kód:



Have written this inside summary tag which is inside details tag

Tento text spadá iba pod značku podrobností

Tieto textové údaje sa zapíšu po dokončení značky podrobností

Výstup 1:

Vo vyššie uvedenom výstupe sme zvýraznili šípku, keď dostaneme výstup 2, keď ho rozšírime.

Výstup 2:

Táto značka nemusí rozdávať žiaden rozdiel

13.

Táto značka definuje dátum / čas v takom formáte, ktorý používatelia ľahko pochopia. Je však potrebné poznamenať, že táto značka nám v mnohých prehliadačoch nemusí dať zmenený výstup.

kód:

V súčasnosti je o 23:00 v noci.

Výkon:

14.

Ako už názov napovedá, táto značka slúži na zápis všetkého obsahu do poľa. Táto značka by mala mať otvorený atribút na zobrazenie dialógového okna po spustení zdrojového kódu. Nižšie nájdete príklad:

Tu napísané údaje sa zobrazia v dialógovom okne

Výkon:

15.

Táto značka poskytuje postup určitej úlohy v grafickom znázornení. Tu musíme mať maximálny počet, pre ktorý musí byť dosiahnutý pokrok. Táto značka sa skladá hlavne z dvoch atribútov. Max a hodnota sú dva atribúty. Max predstavuje celkový počet, ktorý sa musí vyplniť, a hodnota nám dáva percento počtu, ktoré je dokončené vzhľadom na maximálnu hodnotu počtu. Príklad toho je uvedený nižšie:

kód:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:

Výkon:

16.

Táto značka je určená na meranie. Toto sa dá využiť na miesto, ktoré zaberá dotaz alebo na využitie miesta na disku. S touto značkou sa má použiť niekoľko atribútov. Atribúty sú max, min a value. Na základe ich použitia môžeme určite zistiť ich účel a použitie.

kód:


EDCUBA


EDCUBA


EDCUBA

Použitie značky Meter

V byte v 6 poschodiach žijem v 2. poschodí:
2 zo 6

Výkon:

17.

Toto je značka, ktorá bola zavedená s cieľom pridať video súbory na našu stránku HTML. Do zavedenia tejto značky vývojári používali doplnky na zavádzanie video súborov do obsahu stránky HTL. Spolu so značkou je možné použiť niekoľko atribútov. Automatické prehrávanie, Predbežné načítanie, Stlmené sú niektoré z nich.

kód:


Potrebujeme iba zdrojovú značku, ktorá poskytne zdroj, odkiaľ potrebujeme nahrať videoobsah na našu stránku.

18.

Táto značka slúži na pridávanie zvukových súborov na našu stránku HTML. Použitie a zdrojová značka by boli rovnaké ako pri značke videa. Ako cvičenie vyskúšajte všetky sémantické prvky a vytvorte webovú stránku vo formáte HTML 5, aby ste sa naučili lepšie a rýchlejšie.

záver

V tomto článku sme videli mnoho sémantických prvkov a ich použitie v HTML5. Jednou dôležitou vecou, ​​ktorú je potrebné poznamenať, je, že mnohé z týchto značiek sú podporované verziami internetového prehliadača väčším ako 9 a chrómovými verziami vyššími než 3. Preto sa neustále učte a praktikujte, aby ste lepšie porozumeli použitiu značiek v HTML 5.

Odporúčané články

Toto je sprievodca sémantickými prvkami HTML5. Tu diskutujeme o úvode a rôznych sémantických prvkoch v HTML5 spolu s jeho implementáciou kódu. Viac informácií nájdete aj v nasledujúcom článku -

  1. Top 10 nových prvkov HTML5
  2. Značky HTML5
  3. Weboví pracovníci HTML5
  4. Rôzne typy udalostí HTML

Kategórie:

Vývoj softvéru