Příklady použití některých nových funkcí HTML5. Co vám HTML5 dává? Poznámka ke značce H1

Jednoduchý dokument HTML5

Podívejme se na jeden z nejjednodušších HTML5 dokumentů. Začíná zadáním typu dokumentu pomocí speciální kód popisy typu dokumentu (význam tohoto kódu je vysvětlen v další části), načež se nastaví kódování a název dokumentu a poté jeho obsah. V v tomto případě Obsah tvoří jeden odstavec textu:

Malý dokument HTML5

Tento jednoduchý dokument lze ještě dále zjednodušit. Například ve standardu HTML5 není koncová značka ve skutečnosti vyžadována, protože prohlížeče vědí, jak vše zavřít otevřené prvky na konci dokumentu (a standard HTML5 toto chování legalizuje). Ale ořezávání, jako je toto, namísto zjednodušení ztěžuje pochopení značení a může způsobit neočekávané chyby.

Většina webových vývojářů zastává názor, že použití tradičních sekcí je užitečné pro snazší pochopení dokumentu, protože jasně oddělují informace o stránce (název stránky) od samotného obsahu (těla stránky). Tato struktura je užitečná zejména při přidávání skriptů, šablon stylů a meta prvků na stránku:

Malý dokument HTML5

Pojďme zatřást prohlížečem ve stylu HTML5!

Nakonec lze celý dokument (kromě řádku doctype) zabalit do tradičního prvku, jak je znázorněno v následujícím seznamu:

Malý dokument HTML5

Pojďme zatřást prohlížečem ve stylu HTML5!

Až do HTML5 vyžadovala použití prvku každá verze oficiální specifikace HTML, i když přítomnost tohoto prvku nijak neovlivňuje způsob, jakým prohlížeč zpracovává zbytek kódu stránky. V HTML5 je použití tohoto prvku zcela ponecháno na osobním uvážení vývojáře.

Použití prvků , a je pouze otázkou stylu. Stránka bez těchto prvků bude perfektně fungovat i na starších prohlížečích, které o HTML5 nikdy ani neslyšely. Prohlížeč ve skutečnosti automaticky předpokládá přítomnost těchto prvků. Pokud se tedy podíváte na DOM (soubor softwarových objektů, které představují stránku) stránky pomocí skriptu JavaScript, bude obsahovat objekty pro prvky , a , i když je vývojář nepoužil.

Na v této fázi Tato ukázková stránka je někde mezi nejjednodušším dokumentem HTML5 a pokročilým výchozím bodem pro praktickou webovou stránku HTML5. V dalších částech k němu přidáme zbytek potřebné prvky a zavrtat se hlouběji do značení.

Popis typu dokumentu HTML5

První řádek každého dokumentu HTML5 vždy popisuje typ dokumentu. Tento popis jasně ukazuje, že to, co následuje, je obsah HTML5, a vypadá takto:

První věc, kterou si všimnete na typu dokumentu HTML5, je jeho úžasná jednoduchost. Porovnejte to například s neohrabaným popisem typu dokumentu, který musí weboví vývojáři používat při práci s přísným XHTML 1.0:

Dokonce i profesionální weboví vývojáři byli nuceni vložit popis typu dokumentu XHTML zkopírováním a vložením z jiného dokumentu. A popis typu dokumentu HTML5 je krátký, jasný a snadno se zadává ručně.

Popis typu dokumentu HTML5 je také pozoruhodný tím, že neobsahuje oficiální číslo. HTML verze(5 pro HTML5). Jednoduše uvádí, že stránka je stránka HTML. To je v souladu s novým konceptem HTML5 jako živého jazyka. Přidáno k HTML nové funkce jsou automaticky dostupné pro umístění na stránku, aniž by bylo nutné měnit popis typu dokumentu.

To vše vyvolává obtížnou otázku: pokud je HTML5 živý jazyk, proč tedy stránka vůbec potřebuje popis typu dokumentu?

Odpověď na tuto otázku je, že popis typu dokumentu se nadále používá historické důvody. Při zpracování stránky s chybějícím popisem typu dokumentu většina prohlížečů (včetně Internet Explorer a Firefox) přejděte na režim kompatibility (režim quirks). V tomto režimu se snaží zobrazit stránku s přihlédnutím k chybám v pravidlech, které byly použity ve více dřívější verze. Problém je v tom, že režim kompatibility jednoho prohlížeče se může lišit od režimu kompatibility jiného prohlížeče, v důsledku čehož budou stránky navržené pro jeden prohlížeč s největší pravděpodobností zobrazovat chyby v jiném prohlížeči, jako je nesprávná velikost písma, nefunkční rozložení atd.

A když prohlížeč najde na stránce popis typu dokumentu, ví, že zpracování této stránky musí probíhat podle přísnějších pravidel standardní režim, který zajišťuje konzistentní formátování a strukturu stránky při zobrazení jakýmkoli moderním prohlížečem. Až na výjimky je prohlížeči zcela lhostejné, jaký typ dokumentu je v popisu uveden. Jednoduše zkontroluje, že stránka má nějaký druh popisu typu dokumentu. Popis typu dokumentu HTML5 je jednoduše nejkratší platný popis typu dokumentu, který umožňuje standardní režim prohlížeče.

Kódování znaků

Kódování je standard, který říká počítači, jak převést text na sekvenci bajtů při zápisu textu do souboru (a také jak inverzní konverze při otevírání souboru). Z historických důvodů je jich mnoho různá kódování. V současné době téměř všechny webové stránky používají kompaktní a rychlé kódování UTF-8, které podporuje všechny ostatní abecedy, které kdy budete potřebovat.

Webové servery jsou často nakonfigurovány tak, aby sdělily prohlížečům, které je navštíví, že stránky, které server nabízí, mají určité kódování. Nemůžete si však být jisti, že webový server, na kterém plánujete hostovat svůj web, bude takto nakonfigurován (pokud to není váš). vlastní server). Navíc pokus prohlížeče uhodnout nejpravděpodobnější použité kódování může selhat kvůli nějaké nejasné bezpečnostní chybě. Z těchto důvodů byste měli vždy zahrnout informace o kódování použitém v označení stránky.

HTML5 tento úkol usnadňuje. Chcete-li to provést, stačí vložit prvek na úplný začátek bloku (nebo, pokud prvek není použit, ihned za kód popisu typu dokumentu):

Malý dokument HTML5

Nástroje pro vývoj webu, jako je Dreamweaver nebo Expression Web, vkládají tento prvek automaticky při vytváření stránky. Tyto nástroje také umožňují ukládání souborů do UTF kódování. Při vytváření webové stránky pomocí běžného textového editoru však možná budete muset provést další kroky, abyste zajistili uložení souborů ve správném kódování.

Jazyk

Za dobrou formu se považuje označení přirozeného jazyka webové stránky. Tyto informace mohou být někdy užitečné pro ostatní, např. vyhledávače můžete jej použít k filtrování výsledků vyhledávání tak, aby vracely pouze stránky v určeném jazyce.

Nejjednodušší způsob, jak vložit jazykové informace na webovou stránku, je prostřednictvím prvku:

Informace o jazyce mohou být také užitečné, pokud stránka obsahuje text různé jazyky, který je třeba číst pomocí čtečky textu na obrazovce. V tomto případě se vloží atribut lang s odpovídajícím kódem jazyka na správném místě dokument, například do prvků pokrývajících text v různých jazycích. Tímto způsobem je čtečka textu na obrazovce schopna určit, jaký text může číst.

Přidání šablony stylů

Téměř každá stránka správně navrženého profesionálního webu používá šablony stylů. Chcete-li zadat požadovanou šablonu stylů, použijte prvek v bloku dokumentu HTML5:

Malý dokument HTML5

Tato metoda je podobná specifikování šablon stylů v tradičních HTML dokumentech, ale je trochu jednodušší. Protože jazyk je jen jeden kaskádové tabulky styles - CSS, pak již není nutné přidávat atribut type="text/css", který byl dříve vyžadován.

Přidání kódu JavaScript

Jazyk JavaScript skripty byl původně vytvořen jako pracný způsob, jak přidat lesk a kouzlo nudným webovým stránkám. V současné době hlavní oblast JavaScript aplikace se posunula od vývoje rozhraní zvonků a píšťalek k vývoji vlastních webových aplikací, včetně velmi efektivních klientů e-mail, textové editory a mapové nástroje, které běží přímo v prohlížeči.

Kód JavaScript se vkládá do dokumentu HTML5 v podstatě stejným způsobem, jako se vkládá do tradiční stránky HTML. Následující výpis je příkladem vložení kódu JavaScript do webového dokumentu pomocí odkazu na externí soubor:

Malý dokument HTML5

Atribut language="JavaScript" je volitelný, protože pokud není specifikován jiný skriptovací jazyk (a protože JavaScript je jediným široce podporovaným skriptovacím jazykem pro HTML, pravděpodobnost, že k tomu dojde, je zanedbatelná), prohlížeče automaticky předpokládají, že je použit JavaScript. Ale i při odkazování na externí soubor JavaScriptu si stále musíte pamatovat uzavírací značku. Pokud tuto značku přehlédnete kvůli nedopatření nebo při pokusu o zkrácení kódu pomocí syntaxe prázdné prvky, pak stránka nebude fungovat správně.

Pokud trávíte hodně času testováním stránek JavaScriptu v aplikaci Internet Explorer, může být užitečné přidat štítek MOTW (zn webu- štítek síťové funkce) v bloku bezprostředně za kódovacím řádkem. To se provádí takto:

Malý dokument HTML5

Tento řádek kódu říká aplikaci Internet Explorer, aby se stránkou zacházela, jako by byla načtena ze vzdáleného webu. Jinak se IE přepne na speciální zacházení blokování, zobrazí v řádku zprávy bezpečnostní varování a odmítne provést jakékoli JavaScript kód dokud nekliknete na tlačítko „Povolit blokovaný obsah“.

Všechny ostatní prohlížeče značku MOTW ignorují a používají stejné nastavení zabezpečení pro obě stránky načtené ze vzdálených webových stránek a místní soubory HTML.

Standard HTML5 se stále více používá v moderním webdesignu. A přestože je stále ve vývoji, řada jeho standardů již byla schválena a používají je všechny moderní prohlížeče včetně mobilních.

V tomto článku se podíváme na některé nové funkce HTML5 konkrétní příklady jejich uplatnění v praxi

Nový DOCTYPE

Připomeňme si, jak se určuje typický XHTML dokument v sekci DOCTYPE:

‹! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"›

Deklarování typu dokumentu ve značkovacím jazyce vypadá mnohem stručněji a čitelněji

‹!DOCTYPE html›

Navíc můžete tento DOCTYPE použít při rozvržení jakékoli stránky. Pokud prohlížeč nezná HTML5, zobrazí stránku ve standardním režimu.

Vylepšená sémantika kódu

Umožňuje to vylepšená sémantika kódu vyhledávače jasně odlišit typy obsahu na stránce, oddělit důležité informace, zvýšit hodnocení stránky pro vyhledávací dotazy.

Prvky záhlaví a zápatí

Nyní se můžete zbavit konstrukcí jako

‹div id="header"› … ‹/div› ‹div id="footer"› … ‹/div›

A začít používat takové, které jsou srozumitelnější jak pro lidi, tak pro stroje

‹header› … ‹/header› ‹footer› … ‹/footer›

‹div› nemají původ sémantická struktura a mohou být vnořeny vícekrát do sebe a do jiných kontejnerů. Použití promyšlenější sémantické struktury umožňuje vyhledávači jasně rozlišit, kde se nachází záhlaví, zápatí a hlavní informační část.

prvek OBRÁZEK

Zvažte následující část kódu:

‹img src="mars.jpg" alt="O Marsu" /› ‹p›This is an image of Mars‹/p› !}

V tomto případě je pro vyhledávače obtížné určit, že značka ‹p› obsahující popis obrázku je ve skutečnosti jeho popisem. Proto je lepší takové struktury kombinovat do sdílený kontejner, což je ‹obrázek ›:

‹figure› ‹img src="mars.jpg" alt="O Marsu" /› ‹figcaption› ‹p›This is an image of Mars‹/p› ‹/figcaption› ‹/figure› !}

V tomto případě bude dodatečný štítek‹figcapture› , který určuje, co je obsahem obrázku a jaký je jeho název

Pomocí hgroup

Představte si, že záhlaví vašeho webu se skládá z hlavního nadpisu a podnadpisu. Použití obvyklých značek ‹h1› a ‹h2› žádným způsobem neodráží vztah mezi těmito dvěma položkami. Proto je lze sémanticky kombinovat pomocí tagu ‹hgroup›:

‹header› ‹hgroup› ‹h1›Fotogalerie‹/h1› ‹h2›Naše volné místo v Praze‹/h2› ‹/hgroup› ‹/header›

Žádné typy pro připojení skriptů a stylů

Možná stále používáte struktury k připojení skriptů, knihoven, šablon stylů atd. následující typ:

‹link rel="stylesheet" href="stylesheet.css" type="text/css" /› ‹script src="script.js" type="text/javascript"›‹/script›

Nyní tedy již není potřeba specifikovat typ souboru, který má být zahrnut. Prohlížeč to automaticky rozpozná. To znamená, že atribut type již není nutný:

‹link rel="stylesheet" href="stylesheet.css" /› ‹script src="script.js"›‹/script›

Struktura kódu

Standard XHTML vyžadoval, aby hodnoty atributů byly specifikovány v single nebo dvojité uvozovky. Standard HTML5 umožňuje vynechat použití uvozovek, pokud nejsou nutné, tzn. hodnota atributu je uvedena jedním slovem bez mezer. Navíc nemusíte ani zavírat spárované prvky. Zde je příklad:

‹p class=myClass id=pId›Obsah

To však může narušit čitelnost kódu ze strany vývojáře. Styl psaní kódu je tedy zcela na vás, protože starý (léty prověřený) styl je stále podporován.

Upravitelný obsah

HTML5 vám umožňuje plně upravovat obsah vašeho webu bez nutnosti vkládání skrytá pole pro zadání textu. Vše, co musíte udělat, je přidat atribut contenteditable="true" (nebo bez uvozovek, jak jsme se dozvěděli v předchozím odstavci) k prvku, který chcete upravit. Poté bude uživatel moci upravovat její obsah přímo ze stránky.

V tomto případě může uživatel přidávat, mazat a upravovat položky v neuspořádaném seznamu ‹ul›. Níže je uveden příklad seznamu, jehož položky lze změnit

• Sledujte televizi
• Poslouchejte hudbu
• Hrajte videohry

Nové funkce formuláře

HTML5 poskytuje uživatelům a vývojářům skvělé příležitosti pro zadávání informací do formulářů. Pro tyto účely bylo přidáno mnoho užitečných věcí. Podívejme se na některé z nich.

Pole pro zadání e-mailu

Použijte atribut type="email" ke značce ‹input› a vstupní pole budou mít další jedinečné schopnosti pro kontrolu správnosti zadané adresy, a pokud je adresa zadaná špatně, prohlížeč uživateli zobrazí varovnou zprávu.

‹input id="email" name="email" type="email" /›

Výsledek by mohl být takový ( Google Chrome):

K dispozici jsou také další vstupní pole, jako jsou adresy webových stránek nebo telefonní čísla. Princip jejich fungování je podobný jako u pole email.

Pomocí nápověd

Nyní již není potřeba používat javascript k vytváření zástupných symbolů pro vstup textová pole. HTML5 doporučuje použít speciální atribut zástupný symbol , který může zobrazit popisek s textem na pozadí pro pole.

‹input name="email" type="email" placeholder=" [e-mail chráněný]" /›

Výsledek je uveden níže:

Tento příklad bude fungovat pouze v prohlížečích, které podporují HTML5

E-mail:

Autofokus

Bez pomocí javascriptu po načtení stránky můžete automaticky aktivovat prvek. Chcete-li to provést, musíte do pole, které je třeba zadat jako první, přidat atribut bez parametrů.

‹input name="name" type="text" autofocus /›

Pole pro jméno se automaticky aktivuje a bude připraveno k zadání textu.

Povinná pole

Pokud potřebujete označit některá pole jako povinná, nyní stačí zadat pouze atribut. Při odesílání formuláře tedy prohlížeč zkontroluje, zda povinná pole a pokud ne, zobrazí se zpráva.

‹input name="name" type="text" placeholder="John Smith" required /› !}

Níže je ilustrace výsledku tohoto kódu (Google Chrome):

Vstup rozsahu

HTML5 představuje absolutně nový prvek ovládací prvky – vstup rozsahu, což je posuvník, jehož hodnota se mění tažením speciální značky mezi přednastavenými hodnotami.

‹input type="range" name="quantity" min="0" max="100" step=".25" value="10" /›

Atributy min a max se používají k nastavení extrémních hodnot posuvníku, step je krok, ve kterém se hodnota mění. Prohlížeč Google Chrome zobrazuje tento ovládací prvek takto:

Tento příklad bude fungovat pouze v prohlížečích, které podporují HTML5

Místní úložiště

Místní úložiště umožňuje uložit informace zadané uživatelem, pokud je stránka prohlížeče zavřena nebo znovu načtena. To je velmi výhodné zejména v případech, kdy je formulář poměrně velký a web byl omylem uzavřen.

Sám od sebe Místní úložiště není součástí specifikace HTML5, ale úzce s ní souvisí.

Řízení místní úložiště dochází prostřednictvím objektu třídy localStorage pomocí dvou metod setData() a getData() . Níže je uveden příklad, který používá výše popsaný upravitelný seznam, ve kterém budou uloženy poslední zadané hodnoty.

‹h1›Seznam úkolů‹/h1› ‹ul contenteditable=true› ‹li›Sledování televize‹/li› ‹li›Poslouchejte hudbu‹/li› ‹li›Hrajte videohry‹/li› ‹/ul›

JavaScript (pomocí jQuery knihovny, ale je to volitelné):

$("#todo").blur(funkce () ( localStorage.setItem("todoData", this.html); )); if (localStorage.getItem("todoData")) ( $("#todo").html(localStorage.getItem("todoData")); )

Podpora multimédií

Nyní již není potřeba k připojení používat pluginy a knihovny třetích stran různé audio a video soubory. Všechny možnosti vkládání médií jsou nyní zahrnuty ve specifikaci HTML5.

Zvuk

Pro vložení na stránku zvukový soubor musíte použít značku ‹audio› s potřebnými atributy. Níže uvedený příklad zobrazuje na stránce ovládací blok pro zvukový soubor obsahující odkaz ke stažení tohoto souboru. Zvuk se přehraje automaticky.

‹ovládání automatického přehrávání zvuku›
‹source src="file.ogg" /›
‹source src="soubor.mp3" /›
‹a href="file.mp3"›Stáhnout tento soubor.‹/a›
‹/audio›

Na stránce tento blok může vypadat takto ( Prohlížeč Google Chrome)

U této značky Prohlížeče mají své vlastní podpůrné funkce. Například prohlížeč Mozilla Firefox pracuje se soubory .ogg, zatímco prohlížeče Webkit pracují se soubory .mp3

Video

Až donedávna bylo jediným způsobem, jak vložit videoobsah do stránky HTML, integrace obsahu Flash. Tuto schopnost však nyní poskytují samotné prohlížeče, které splňují specifikace HTML5. To získalo zvláštní popularitu, když největší web pro hostování videa YouTube.com přešel na formát HTML5.

Chcete-li úspěšně integrovat video na stránku, musíte použít značku ‹video›. Bohužel mezi výrobci prohlížečů nepanuje shoda, v jakém formátu by mělo být video prezentováno, takže každý z nich propaguje svůj vlastní formát. Zatímco IE a Safsri podporují video H.264 (které podporovaly přehrávače Flash), Opera a Firefox propagují open source Formáty Vorbis a Theora. Chrome na druhou stranu umí správně zobrazovat videa ve všech formátech, včetně WebM.

‹předběžné načtení ovládacích prvků videa› ‹source src="video.ogv" type="video/ogg; codecs="vorbis, theora"" /› ‹source src="video.mp4" type="video/mp4; codecs=" avc1.42E01E, mp4a.40.2"" /› ‹p›Váš prohlížeč je starý. ‹a href="video.mp4"›Stáhněte si místo toho toto video.‹/a› ‹/p› ‹/video›

Ne všechny prohlížeče umí zobrazit video HTML5, takže pod značkou ‹source› můžete zadat odkaz ke stažení videa nebo integrovat přehrávač Flash.

Atribut preload umožňuje prohlížeči automaticky zahájit načítání videa, což se může hodit, pokud je video dostatečně velké. Atribut controls umožňuje nastavit standardní prvky ovládání video streamu.

HTML5 vás opět ušetří hledání implementací JS. Pokud chcete, aby bylo výchozí zaostření nastaveno na konkrétní vstup, pak stačí nastavit atribut autofocus.

Oba styly psaní jsou zde také možné, ale já preferuji XHTML a píšu "autofocus=autofocus" . I když bylo možné napsat pouze název atributu.

13. Podpora zvuku

Pro výstup zvuku na stránky již nepotřebujeme pluginy třetích stran. HTML5 nám dává . Nyní se k tomu nemusíme starat o žádné pluginy. Bohužel ani podpora prohlížeče pro zvuk HTML5 není příliš plynulá. Dnes dobrý styl považovány za zpětně kompatibilní.

Stáhněte si tento soubor.

Mozilla a Webkit toto řešení plně nepodporují. Firefox chce vidět soubory .ogg nebo .wav. Proto by dnes měly být vytvořeny a specifikovány oba formáty.

Safari nepodporuje ogg, ale rozumí mp3 a wav. IE9+ přijímá AAC. MP3, starší verze tag nepodporují. Opera pracuje s ogg a wav.

14. Podpora videa

Stejně jako u , HTML5 video funguje pouze ve více či méně moderní prohlížeče. Mimochodem, není to tak dávno, co YouTube oznámil HTML5 přehrávač pro svá videa. Bohužel specifikace HTML5 nedefinují kodek pro video, takže prohlížeče se v tomto ohledu liší. IE9 a Safari podporují video H.264, zatímco Opera a Firefox podporují theora a formáty WebM. Pro zajištění provozu byste proto měli používat 2 formáty.