Přehled nových prvků HTML5
Od roku 1999, kdy se standard HTML 4.01 stal standardem, se web a jeho používání podstatně změnilo. W3C se rozhodl změnit základní syntaxi HTML ze standardního generalizovaného značkovacího jazyka (SGML) na XML a také zcela odlišné značkovací jazyky, jako je Scalable Vector Graphics (SVG), XForms a MathML. V současné době jsou některé komponenty HTML 4.01 zastaralé, nikdy se nepoužívají nebo se nepoužívají podle očekávání. Každá část komponent v HTML5 je přemístěna nebo znovu složena. HTML5 zahrnoval nové prvky pro ilustraci reprezentace, zobrazování digitálního obsahu, vylepšené rozvržení stránky a celkovou funkčnost a několik nových rozhraní pro správné řešení dnešních internetových požadavků.
V HTML5 je zavedeno několik nových prvků, které nabízejí určité další funkce pro vývoj žádoucího a interaktivního webu. Můžeme vytvořit váš kód rychle a efektivně pomocí těchto komponent. Kvůli nedostatečné struktuře je s mnoha dobře formovanými dokumenty HTML obtížnější manipulovat, než je třeba. Vyhodnocením měřítka záhlaví musíme zjistit, kam směřují zlomy segmentů. Prvek div identifikuje postranní panely, zápatí, záhlaví, navigační nabídky a hlavní části obsahu.
Top 10 nových prvků HTML5
HTML5 poskytuje nové prvky pro zlepšení rozložení dokumentu.
1.
Prvek určuje část stránky, která obsahuje samostatnou strukturu v dokumentu, sekci nebo webu a která se doporučuje široce distribuovat nebo použít. Může se jednat o skupinu zasílající deník nebo denní papírovou zprávu, podání do online zpravodaje, poznámku zaslanou zákazníkem nebo jakýkoli jiný objekt neobsahující látky.
Příklad:
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Výstup:
- Uložte výše uvedený kód do souboru s příponou .html.
- Spusťte soubor html v prohlížeči a dostanete výstup, jak je znázorněno na obrázku níže.
2.
Prvek označuje jednotlivý obsah mnoha způsoby, jako jsou kategorizace, mapy, obrázky, kódové články a mnoho dalších.
Příklad:
Figure Element
EDUCBA je předním světovým poskytovatelem vzdělávání založeného na dovednostech, které řeší potřeby 500 000+ členů ve více než 40 zemích.
Výstup:
Výše uvedený kód vytvoří výstup, jak je znázorněno na obrázku níže,
3.
Prvek se používá k přidání popisu obrázku.
Příklad:
Figure Caption Element
EDUCBA je předním světovým poskytovatelem vzdělávání založeného na dovednostech, které řeší potřeby 500 000+ členů ve více než 40 zemích.
EDUCBA (Corporate Bridge Consultancy Pvt Ltd)
Výstup:
Výše uvedený kód zobrazuje výsledek podle obrázku níže,
4.
Prvek se používá k určení záhlaví dokumentu nebo sekce na stránce. V jednom dokumentu můžete definovat více než jednu hlavičku.
Příklad:
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Obsah dokumentu najdete zde …
Výstup:
Výše uvedený kód zobrazuje výsledek podle obrázku níže,
5.
Prvek se používá ke specifikaci informací, jako jsou informace o autorovi, informace o autorských právech, kontakt, odkazy na související dokumenty, mapa stránek a mnoho dalších.
Příklad:
Footer Element
Copyright © 2019 www.educba.com
Kontakt:
Výstup:
Výše uvedený kód zobrazuje výsledek podle obrázku níže,
6.
Prvek se používá k zobrazení hlavních, tj. Důležitých informací o dokumentu.
Příklad:
Main Element
Informace v záhlaví
Hlavní informace
EDUCBA
EDUCBA je předním světovým poskytovatelem vzdělávání založeného na dovednostech …
Informace o zápatí
Výstup:
Výše uvedený kód vytvoří výstup, jak je znázorněno na obrázku níže,
7.
Prvek se používá k zvýraznění nebo označení textu barvou pozadí, která přitahuje uživatele pro konkrétní text v dokumentu.
Příklad:
Mark Element
EDUCBA je předním světovým poskytovatelem vzdělávání založeného na dovednostech, které řeší potřeby 500 000+ členů ve více než 40 zemích.
Výstup:
Výše uvedený kód zobrazuje výsledek zobrazený na obrázku níže,
8.
Prvek se používá k určení navigačních odkazů na stránce. Tyto odkazy poskytují spojení na jiné stránky v dokumentu.
Příklad:
Nav Element
HTML |
CSS |
JAVA |
PHP |
PYTHON
Výstup:
Výše uvedený kód vytvoří výstup, jak je znázorněno na obrázku níže,
9.
Prvek se používá k definování samostatné sekce nebo konkrétní oblasti v dokumentu.
Příklad:
Section Element
Main Article
Section Element
Main Article
Section Element
Main Article
Zde se zobrazí obsah hlavní hlavičky …
První část
Zobrazí se obsah první sekce …
Sekce dva
Zobrazí se obsah druhé sekce …
Výstup:
Výše uvedený kód zobrazuje výsledek podle obrázku níže,
10.
Značka je dílčí částí značky, která poskytuje text, který lze zobrazit nebo skrýt, když uživatel klepne na nadpis.
Příklad:
Summary Element
EDUCBA - Corporate Bridge Consultancy Pvt Ltd
Je předním světovým poskytovatelem vzdělávání založeného na dovednostech, které řeší potřeby 500 000+ členů ve více než 40 zemích.
Výstup:
Když spustíte výše uvedený kód, zobrazí se výsledek, jak je uvedeno níže,
Jak je vidět na obrázku, kliknutím na nadpis se zobrazí skrytý text, jak je znázorněno na obrázku níže,
Závěr
Dosud jsme viděli, jak jsou nové prvky HTML5 užitečné pro různé úkoly při vytváření webové stránky. Tyto nové prvky čtou dokument přesnějším a standardnějším způsobem a vyvíjejí složitější a efektivnější webové aplikace. Nové prvky HTML5 poskytují některé další zvláštní funkce pro generování interaktivních webů.
Doporučené články
Toto je průvodce Html5 Nové prvky. Zde diskutujeme o prvních 10 nových prvcích Html5 pro zlepšení rozložení dokumentu. Další informace naleznete také v následujících článcích -
- Korekce barev v After Effects
- Top 6 verzí HTML
- Html5 vs. Html4
- XHTML vs HTML5
- Co je most?
- Značky HTML5 | Nejlepší 4 značky HTML5