Úvod do sémantických prvků HTML5

Následující článek vám poskytne různé sémantické prvky v html5. Začněme chápáním sémantiky. Sémantika je o různých typech značek, jejichž funkčnost by zobrazovala a prováděla stejnou funkci jako podle názvu značky. Funkčnost značky by byla snadno pochopitelná podle jejího názvu; který je v uživatelsky srozumitelném jménu / formátu. Většina prvků v HTML jsou obvykle sémantické prvky.

Výhody sémantických prvků v HTML5

výhody sémantických prvků jsou následující:

  • Snadné porozumění kódu.
  • Údržbu lze provádět rychle a vhodným způsobem.
  • Není nutné přidávat žádný popis konkrétně pro jakoukoli značku.

Různé sémantické prvky v HTML5

Pojďme se nyní dostat do sémantických prvků HTML5.

1.

Tato značka nám dává představu, že data uvnitř této značky jsou specificky pro podobný obsah. Závisí to na různých typech článků, které obecně máme také. Může to být blog, fóra, sloupcové články v novinách atd.

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ýstup:

2.

Tato značka se týká poskytování sekčního obsahu celkových dat. Při znalosti značek článků a oddílů lze tyto značky použít uvnitř každé značky. To je značka sekce může být použita uvnitř značky článku a naopak.

Kód:


The section here is about:

Učení a procvičování

Výstup:

3.

Tato značka poskytuje všechna data záhlaví. Všechna data, která chceme umístit do formátu hlavičky, se používají pod touto značkou hlavičky. A tuto značku lze použít několikrát v celém skriptování HTML. Podívejme se na jeho malý příklad.

Kód:



This is header #1



This is header #1



This is header #1

První

další …

Toto je záhlaví # 2


Druhý

Výstup:

4.

Toto je sekce zápatí v našem skriptu HTML. Obecně vidíme všechna data o autorských právech a malou část, kterou najdeme v nabídkách, jako jsou „podmínky platí“ pro jakékoli nabídky. Tyto věci jsou tedy definovány pod značkou zápatí.

Kód:


Uvnitř těla a nad značkou zápatí

Značka uvnitř zápatí.


Další značka zápatí

Platí podmínky

Výstup:

5.

Tato značka nám poskytuje navigační prvky. Adresa URL v libovolném skriptu dokumentu HTML, ve kterém obecně chceme pomocí této značky procházet z jedné stránky na druhou stránku. Veškerá data uvedená pod touto značkou jsou k dispozici jako hypertextové odkazy. Tyto hypertextové odkazy mohou být užitečné při navigaci z jedné sekce do druhé sekce. Malý příklad je definován jako:

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ýstup:

Při cvičení klikněte na tyto odkazy a zkontrolujte, jak se změní barva hypertextového odkazu po kliknutí.

6.

Toto je značka, která se používá k zobrazení dat na stranách našeho HTML dokumentu. Na mnoha webových stránkách najdeme obsah, který existuje v postranním panelu, který se zobrazuje pomocí této značky stranou. Tento obsah by měl být v souladu s ostatními údaji uvedenými v dokumentu. Podívejme se na jeho malý příklad.

Kód:


Jak se používá stranou stranou

Uvnitř stranou stranou


Obsah uvnitř značky stranou

Výstup:

Přesný obsah nelze specifikovat úplně stejným způsobem, lze jej jasně dokumentovat a pochopit pouze při použití celé stránky HTML.

7.

Tato značka určuje, že se chystáme připojit obrázek. Tuto značku lze použít k určení zdroje obrázku a zobrazení gif nebo obrázku.

Kód:





Jak je uvedeno výše, takto můžeme definovat značku obrázku. Uvnitř obrázkové značky můžeme zadat náš obrazový příkaz pomocí zdrojové značky. Uvnitř této značky obrázku můžeme zase použít značku titulku obrázku.

8.

Tato značka se používá k poskytnutí titulku pod poskytnutým obrázkem. Může být použit uvnitř značky obrázku. Jejich použití je vidět na níže uvedeném příkladu.




This is description of the image attached.

Můžete to zkusit provést zadáním zdroje obrázku a zkontrolovat, jak se výstup zobrazuje.

9.

Tato značka určuje všechny atributy a úplný obsah webu HTML. Obsahuje veškerý jedinečný obsah. Důležitou věcí, kterou byste si měli všimnout pro tuto konkrétní značku, je to, že tuto značku lze použít při vytváření celé stránky pouze jednou. Zjistili jsme, že jiné značky lze při vytváření webové stránky použít vícekrát, ale tato hlavní značka je značka pro jednorázové použití.

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

Čtení by pomohlo porozumět různým tématům



Cvičení


Se Studiem je Cvičení při učení nezbytné

Výstup:

10.

Tato značka slouží k zvýraznění konkrétního obsahu nebo dat. Jinými slovy, tato značka je užitečná při označování dat. Podívejme se na malý příklad níže:

Kód:


V tomto celém textu, který nyní píšu, chci tento text označit

Výstup:

11.

Tato značka obsahuje další podrobnosti, které uživatelé mohou skrýt jakékoli podrobnosti na jejich přání. Prostřednictvím této značky mohou uživatelé otevírat / zavírat jakýkoli obsah, který potřebují. Pokud chceme, aby značka zveřejnila své podrobnosti hned na začátku, lze použít atribut „open“.

Níže je uveden malý příklad téhož:

Kód:



Je to zobrazeno?

Výstup:

Jaký by byl výstup, kdybychom nepoužili atribut open?



Je to zobrazeno?

Výstup 1:

Výstup 2:

12.

Tato značka se používá uvnitř značky podrobností. Pod značkou podrobností můžeme mít souhrnnou značku, která určuje celé shrnutí webové stránky nebo dokumentu HTML. Důležité je poznamenat, že souhrnná značka je první podřízená značka, která musí spadat pod značku podrobností. Podívejme se na malý příklad níže:

Kód:



Have written this inside summary tag which is inside details tag

Tento text spadá pod značku podrobností


Tato textová data jsou zapsána po dokončení značky podrobností

Výstup 1:

Ve výše uvedeném výstupu jsme zvýraznili šipku, když dostaneme svůj výstup 2, jakmile jej rozbalíme.

Výstup 2:

Tato značka nemusí rozdávat žádný rozdíl

13.

Tato značka definuje datum a čas ve formátu, kterému uživatelé snadno rozumějí. Je však třeba poznamenat, že tato značka nám v mnoha prohlížečích nemusí poskytnout změněný výstup.

Kód:


V současné době je 23:00 v noci.

Výstup:

14.

Jak již název napovídá, tato značka slouží k zápisu veškerého obsahu do pole. Tato značka by měla mít otevřený atribut pro zobrazení dialogového okna po spuštění zdrojového kódu. Níže naleznete příklad:



Zde zapsaná data se zobrazí v dialogovém okně

Výstup:

15.

Tato značka poskytuje postup určitého úkolu v grafické reprezentaci. Zde musíme mít maximální počet, pro který musí být pokrok reprezentován. Tato značka se skládá hlavně ze dvou atributů. Max a hodnota jsou dva atributy. Max představuje celkový počet, který musí být dokončen, a hodnota nám dává procentuální počet, který je dokončen s ohledem na maximální hodnotu počtu. Příklad toho je níže:

Kód:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:

Výstup:

16.

Tato značka je určena k měření. To lze využít pro prostor zabraný dotazem nebo také pro využití místa na disku. S touto značkou je třeba použít několik atributů. Atributy jsou max, min a value. Na základě jejich využití můžeme určitě zjistit jejich účel a použití.

Kód:


EDCUBA


EDCUBA


EDCUBA

Použití značky Meter

V bytě v 6 podlažích bydlím ve 2. patře:
2 ze 6

Výstup:

17.

Toto je značka, která byla zavedena za účelem přidání video souborů na naši stránku HTML. Dokud nebyla tato značka zavedena, vývojáři používali pluginy k zavedení video souborů do obsahu stránky HTL. Spolu se značkou lze použít několik atributů. Autoplay, Preload, Muted jsou některé z nich.

Kód:







Potřebujeme pouze zdrojovou značku, která poskytne zdroj, odkud potřebujeme nahrát videoobsah na naši stránku.

18.

Tato značka slouží k přidávání zvukových souborů na naši stránku HTML. Použití a zdrojová značka by byla stejná jako u značky videa. Jako cvičení zkuste použít všechny sémantické prvky a vytvořit e HTML 5 verzi webové stránky, abyste se učili lépe a rychleji.

Závěr

V tomto článku musíme vidět mnoho sémantických prvků a jejich použití v HTML5. Jedna důležitá věc, kterou je třeba poznamenat, je, že mnoho z těchto značek je podporováno internetovým prohlížečem ve verzích větších než 9 a chromových verzích větších než 3. Takže pokračujte v učení a praktikování, abyste lépe porozuměli používání značek v HTML 5.

Doporučené články

Toto je průvodce sémantickými prvky HTML5. Zde diskutujeme úvod a různé sémantické prvky v HTML5 spolu s implementací kódu. Další informace naleznete také v následujícím článku -

  1. Top 10 nových prvků HTML5
  2. Značky HTML5
  3. Weboví pracovníci HTML5
  4. Jiný typ událostí HTML

Kategorie: