Rozšírené hľadanie
Štvrtok 28. Marec 2024 |
meniny má Soňa
AMP HTML: Čím se liší oproti HTML, co zakazuje a co nového přináší?

Vzhůru dolů 20.07.2019 03:00 AMP HTMLNaposledy upraveno: – Autor: Martin Michálek AMP HTML je norma vycházející z HTML 5 – upravuje si ji ale směrem k cílům této technologie: k rychlosti a použitelnosti. V této ukázce z knihy Vzhůru do AMP si dopodrobna vysvětlíme rozdíly mezi standardním HTML a tím z AMP. Základní kostra dokumentu v AMP vypadá trochu jinak, není možné zde použít prvky vkládající externí obsah jako nebo . Namísto nich máme ale komponenty jako nebo . Z HTML atributů vypadly všechny, které popisují nějaké chování, to je však vzhledem k chybějícímu autorskému JavaScriptu pochopitelné. Obsah: Kostra AMP dokumentu Provázání AMP a HTML verze amp-boilerplate Strukturovaná data Zakázané značky Nahrazené značky HTML atributy Neměnná kostra AMP dokumentu Když se podíváte na základní kostru dokumentu, bude vypadat následovně: Ahoj světe Ahoj světe, tady AMP Zaměřme se hlavně na rozdíly oproti běžnému HTML: je označení AMP stránky. body Obsah se nejprve schová, ale pokud se na AMP runtime čeká neúměrně dlouho, po osmi vteřinách se zase zobrazí. Pokud v prohlížeči JavaScript pouštět nelze , žádné schovávání obsahu a čekání na runtime pomocí animace neproběhne. Z kódu jsme odstranili všechny prefixované vlastnosti. Strukturovaná data Pokud byste chtěli svou AMP stránku dostat do speciálních míst výsledků vyhledávání na Googlu – jako je karusel s hlavními událostmi –, doporučuje se přidat ještě metadata uvedená ve formátu JSON-LD. Pro zpravodajský článek se tedy třeba hodí něco takového: Kromě zpravodajského článku můžete takto popsat strukturu obsahu webové stránky, videa nebo receptu. Kód, který zde uvádíme, není úplný. Podívejte se raději na užitečný generátor základní HTML struktury pro AMP. amp.dev/boilerplate Zakázané ovoce z HTML zahrádky Ve specifikaci AMP HTML je řada běžných značek zakázaná a neexistují pro ně náhrady. Jde například o , , , a řadu dalších. Jak je ale vidět, v tomto seznamu jde o značky, jež mají nejlepší léta za sebou. Z pohledu výkonu při vykreslování stránky je to pochopitelné. Když budete dělat nábor do atletického kroužku, nepůjdete přeci do klubu seniorů. Kontroverznější je to u značek, které AMP nahrazuje novými. Nahrazené značky Možná leckoho překvapí, že AMP nahrazuje některé existující značky, ale svůj účel to má. Následující značky jsou zakázané ve prospěch nových komponent, které AMP zavádí: HTML značka AMP HTML komponenta Proč to AMP dělá? Jde opět o výkon. Na vlastních komponentách může AMP zajistit, co běžné značky zatím neumí: odložené načtení , rezervaci místa v layoutu stránky už při startu jejího vykreslování nebo zamezení blokování zobrazení stránky externím obsahem . V současných prohlížečích to zatím možné není, ale jednou snad bude. Některé jiné značky je možné v AMP HTML použít až za určitých podmínek: , jen pokud atribut type obsahuje application/ld+json , application/json nebo text/plain. Lidsky řečeno, vkládat vlastní skripty lze jen za účelem konfigurace AMP komponent nebo popisu dat. můžete vložit jen za podmínky, že do stránky přidáte komponentu amp-form. Komentáře samozřejmě můžete použít, ale zakázané jsou podmíněné komentáře typu