Domov › Služby › Struktura stránky HTML5. Nepoužívejte zbytečný atribut typu. Nepoužívejte jako obal na ozdobu

Struktura stránky HTML5. Nepoužívejte zbytečný atribut typu. Nepoužívejte jako obal na ozdobu

Od autora: Vítám vás opět na blogu webformyself. Nebo jste tu možná poprvé. Dnes se podíváme na to, z čeho se skládá struktura html5 stránky a jak se změnila s vydáním této nové specifikace.

Jak se změnila struktura

Nejprve bych rád řekl, že před příchodem html5 explicitní struktura jako taková vůbec neexistovala. Jak vznikaly všechny šablony? Ve většině případů byla použita metoda blokové rozložení, který se dnes stal standardem. Jako kontejnery pro prvky byly použity běžné divy s různými identifikátory.

Například hlavička byla obvykle označena jako div s hlavičkou identifikátoru, blok s hlavní informací se nazýval main nebo content a postranní sloupec obdržel postranní panel identifikátoru.

Obecně je velmi málo vývojářů, kteří zvolili jiné názvy tříd nebo jedinečné štítky. Co by vlastně mohlo být srozumitelnější a správnější označení pro postranní sloupec než slovo postranní panel? Dokonce i lidé, kteří umí anglicky velmi málo, tomu rozumí.

V tomto ohledu se objevily nové prvky v html5 - sémantické bloky, které byly navrženy tak, aby nahradily běžné divy a daly označení větší význam.

V první lekci se vlastně můžete dozvědět i historii jejich vzniku. Pokud toho o této specifikaci ještě moc nevíte, doporučuji vám to zkontrolovat. Nyní vám povím o některých z těchto nových prvků.

Nové sémantické bloky ve značení

Stojí za zmínku, že vhodný tag byl vynalezen pro téměř jakýkoli prvek na webové stránce. Například na klobouk. Podle standardu se to vždy dělalo takto: div id = “header”. Nyní to není potřeba - objevil se kontejner záhlaví. Ano spárovaná značka a veškerý obsah záhlaví je umístěn v něm.

To však neznamená, že k němu nelze připojit třídu nebo identifikátor. Samozřejmě je to možné a oni to udělají. Záhlaví má o něco větší roli než jen kontejner pro hlavní záhlaví webu.

Pokud se blíže podíváte na obsah zprávy nebo článku na téměř jakémkoli webovém zdroji, najdete tam nejen text, ale také Dodatečné informace. Například počet zhlédnutí, lajků, počet komentářů, úvod k článku, závěry, datum vydání a mnoho dalšího. Na každém webu je to jiné.

Takže, o čem to mluvím? Článek (novinka, recenze atd.) může mít i vlastní záhlaví, vlastní závěrečnou část atp. V souladu s tím může mít stránka několik záhlaví, z nichž každé má svou vlastní třídu.

Mimochodem, patička webu, jeho úplně spodní část, je tvořena v html5 s tagem patička. To vám bude zřejmé, pokud jste vytvořili alespoň několik typických rozvržení – to je třída, která se obvykle dává tomuto bloku.

Nyní o menu. Dříve také neměl vlastní, unikátní nádobu, která by jej dokázala odlišit. Vzniklo také v r pomocí div. Samozřejmě za tohle důležitý prvek Stránka také přišla s vlastním tagem – nav (navigace). Na stránce také nemusí být jen jeden – na některých webových zdrojích jich můžete vidět několik různá menu a přesto se v jeho významu doporučuje zahrnout nejvíce důležité odkazy Na stránce.

Všimli jste si někdy, jak se může hlavní obsah lišit od toho, co se zobrazuje na postranním panelu? Pokud se nad tím zamyslíte, jedná se obecně o různé části šablony. To je ono - sekce! Podobně jistě uvažovali i vývojáři specifikace html5, a proto vytvořili značku sekce. Jeho obecný význam je, že obsahuje část dokumentu (sekci), obecně nezávislou na ostatních, která může mít svůj vlastní název atd.

Příklad nového označení

Dobře, už jsme se dozvěděli o některých nových prvcích, zkusme je pomocí nich vytvořit značkování.

Záhlaví Hlavní nabídka Postranní panel Záhlaví Doplňkové informace o článku Samotný článek Zápatí

< header >Čepice< / header >

< nav >Hlavní menu< / nav >

< section id = “sidebar ”>Postranní panel< / section >

< section id = “content ”>

< h1 >Nadpis< / h1 >

< aside >Sekundární informace zbytek článku< / aside >

< article >Samastja< / article >

< / section >

< footer >Suterén< / footer >

Samozřejmě, toto je velmi jednoduchý příklad. Ve skutečnosti se k těmto prvkům přidávají některé další prvky stylové třídy. Zde jsme použili dva zcela nové tagy – článek a stranou. Jak víte, tag článku označuje hlavní informace na stránce a výhradně její text.

Důležité věci, jako je datum zveřejnění nebo počet komentářů, by měly být umístěny samostatně ve vedlejším bloku. Vzniká proto, aby se do ní umístily informace, které nejsou hlavní a jsou druhořadé oproti té hlavní.

Datum vydání je samozřejmě důležité, ale se smyslem samotného článku to nemá nic společného. Proto se doporučuje zarámovat jej do jiného tagu. Ve skutečnosti tato doporučení nejsou povinná. Pokud například do tagu článku uvedete celý článek s datem, počtem zobrazení a dalšími vedlejšími informacemi, nic špatného se nestane. Dokonce bych řekl, že se nestane vůbec nic, jen je potřeba se snažit to dělat správněji.

Konečně, pokud mluvíme o čase (datu), je vhodné jej zahrnout nový štítekčas. To prohlížeči umožní, aby s ním skutečně zacházel jako s datem a ne jen s nějakým náhodným prvkem na stránce.

Výše uvedené označení je samozřejmě jen jedním příkladem, každý skutečný web je jiný. Například v jakékoli sekci můžete přidat záhlaví a zápatí - budou označovat začátek a konec sekce, které mohou být umístěny pod samotným článkem, nikoli nad ním. Je toho tady hodně různé možnosti, a na jiných typech webových zdrojů teprve rozebíráme strukturu blogu, vše může být úplně jinak; Zde je například další možnost označení a má také právo na život:

Takže takhle rychle jsme prošli strukturou html5 – nové značky této specifikace, které pomáhají dělat označení webové stránky mnohem srozumitelnější. Pokud se chcete dále učit o tvorbě webových stránek, přihlaste se k odběru našeho blogu.

S příchodem nová verze HTML, bylo možné rozmístit stránky novým způsobem. HTML5 totiž zavedlo nové sémantické značky, které jasně zvýrazňují části stránky a činí její strukturu zcela transparentní. Jaké jsou tyto značky a proč je důležité je používat při kódování?

Dříve bylo možné stránku rozložit libovolným způsobem, například jednoduchým umístěním bloků div. V tomto případě byl sémantický význam vypočten vyhledávači a dalšími službami pomocí tříd a identifikátorů. Tento problém nyní řeší nejnovější tagy. Kromě sémantiky pomáhají vytvářet značky vzhled moderní webové aplikace nebo stránky úplněji.

Podle specifikace HTML5 každá nová značka patří do určité kategorie (0 nebo více) obsahu. Uveďme si tyto kategorie obsahu:

meta,
záhlaví,
Text,
streamování,
sekční,
Vestavěný
Interaktivní.

Jak vidíte, kategorií je velmi málo. Tato podmíněná rozdělení do kategorií jsou nezbytná pro přehlednější strukturování značek. Uveďme si samotné značky: header, nav, article, section, aside, footer, address, main, figure, figcaption, time, mark, bdi, wbr. Kromě těchto značek si také musíte pamatovat na prvky pro popis východoasijských znaků: ruby, rb, rt, rtc, rp. Níže se krátce podíváme na nové tagy, název a kategorie obsahu jsou uvedeny v závorkách.

značka záhlaví (streamování)

Tato značka umožňuje seskupit navigační a úvodní prvky. Do kterékoli části stránky můžete umístit libovolný počet těchto značek, nebo žádné. Nemůžete vnořovat značky zápatí a adresy ani samotnou značku záhlaví.

nav tag (streaming, sekční)

Jak je patrné z názvu značky, používá se k vytvoření navigačního bloku, různá menu a bloky odkazů. Lze použít vícekrát na stránce.

Značka článku (streamování, sekce)

Značka je určena pro seskupování článků na stránce; měla by být použita, pokud je na jedné stránce několik článků, ale pokud je pouze jeden článek, nemusíte tuto značku používat.

Značka sekce (streamování, sekce)

Značka je určena k rozdělení stránky na části a sekce a zvýraznění určitých částí na stránce. Na jedné stránce můžete například vytvořit sekci článků, sekci komentářů, sekci galerie atd.

stranou tag (streaming, sekční)

Tato značka vám umožňuje oddělit jakýkoli obsah stránky do samostatné logické části, můžete ji například použít k vytvoření postranního sloupce, jako v knize.

Značka v zápatí (streamování)

Tag slouží k vytvoření patičky na webu, místa, kde jsou obvykle umístěny informace o webu, autorských právech atd. Lze použít vícekrát na stránce.

Značka adresy (streamování)

Značka je užitečná pro vytvoření bloku s informacemi o adrese, zvláště důležitý pro propagaci ve vyhledávačích. Obsah v této značce je v prohlížečích obvykle psán kurzívou.

Hlavní značka (streamování)

Prvek může být použit k definování hlavní části stránky, nemůže být potomkem značek: article, aside, footer, header, nav.

značka postavy (streaming, root)

Tento tag se používá ke zvýraznění autonomního obsahu, můžete jej použít například k vytvoření bloku obsahujícího fotografii a její popis.

značka figcaption (-)

Značka je potomkem značky obrázku a umožňuje vám umístit popis nebo popisek, stejně jako další informace požadovaný prvek Na stránce.

Časová značka (streamování, text)

Důležitá značka, která umožňuje zadat datum a čas. To může být užitečné pro vyhledávače i pro uživatele. S příchodem této značky, bylo možné nastavit datum ve standardních formátech času.

Označit značku (streamování, text)

Značka vám umožňuje zvýraznit obsah na stránce barvou, jako je značka na papíře. Obvykle toto žlutá, ale barvu můžete změnit pomocí stylů.

Tag bdi (streaming, text) Tag wbr (streaming, text)

Jediný tag umožňuje určit místo, kde může prohlížeč přerušit dlouhou čáru.

Nové tagy tedy umožňují efektivní označování stránek, což je nesmírně důležité propagace vyhledávače a používat webové stránky v různých službách.

Lachlan Hunt

Původní článek v angličtině: http://www.alistapart.com/articles/previewofhtml5

Ilustrace: Kevin Cornell

Překlad: Vlad Merzhevich

Síť se neustále vyvíjí. Každý den vznikají nové a inovativní webové stránky, které se rozšiřují HTML hranice v každém směru. HTML4 je kolem nás téměř deset let a vydavatelé hledají nové metody, jak poskytnout pokročilé funkce, které jsou brzděny omezeními jazyka a prohlížeče.

S cílem poskytnout autorům větší flexibilitu a interoperabilitu, díky čemuž jsou jejich weby a aplikace interaktivnější a působivější, HTML5 zavádí a rozšiřuje řadu funkcí, které zahrnují prvky formuláře, rozhraní API, média, strukturu a sémantiku.

Práce na HTML5 začala v roce 2004 a v současné době je společným úsilím W3C HTML WG a WHATWG. Na práci W3C se podílí mnoho klíčových hráčů, včetně zástupců čtyř hlavních výrobců prohlížečů: Apple, Mozilla, Opera a Microsoft, jakož i řady dalších organizací a jednotlivců s vlastními zájmy a odbornými znalostmi.

Všimněte si, že specifikace je stále ve vývoji a není zdaleka kompletní. Je tedy možné, že některé funkce popsané v tomto článku se mohou v budoucnu změnit. Tento článek je určen ke stručnému popisu některých hlavních funkcí, které v aktuálním projektu existují.

Struktura

HTML5 přináší řadu nových prvků, které zjednodušují strukturu stránek. Většina stránek HTML4 obsahuje běžné prvky, jako je záhlaví, zápatí a sloupce. V současné době jsou zpravidla v kódu dokumentu označovány pomocí prvků, které popisují každý atributem id nebo class.

Obrázek ukazuje typické rozložení dvou sloupců rozmístěných pomocí atributů id a class. Rozložení obsahuje záhlaví, zápatí a vodorovnou navigaci pod záhlavím. Hlavní obsah zahrnuje článek a postranní panel vpravo (boční panel).

Je správné používat elementy, protože HTML4 postrádá potřebnou sémantiku k přesnějšímu popisu těchto částí. HTML5 tento problém řeší zavedením nových prvků, které reprezentují každou z těchto různých částí.

Prvky lze nahradit novými prvky , , , a

Kód tohoto dokumentu je následující.

... ... ... ... ...

Zde jsou některé výhody používání těchto prvků. Při použití v kombinaci s prvky nadpisu (to ) umožňují rozvržení vnořených sekcí podle úrovní nadpisu až do šesté. Specifikace obsahuje , který zohledňuje strukturu těchto prvků a zohledňuje zpětnou kompatibilitu s předchozími verzemi. Jak vývojové nástroje, tak prohlížeče to mohou použít k vytvoření obsahu, který uživatelům usnadní orientaci v dokumentu.

Například následující kód je strukturován s vnořenými prvky a prvky.

Úroveň 1 Úroveň 2 Úroveň 3

Všimněte si, že pro lepší kompatibilitu s stávající prohlížeče, můžete také použít jiné prvky záhlaví (od do) místo odpovídajícího .

Označením cílených částí stránky speciálními značkami mohou asistenční technologie pomoci uživateli snadno procházet stránkou. Mohou například jednoduše přeskočit navigační sekci nebo rychle přejít z jednoho článku do druhého. Autor by k tomu nemusel poskytovat mechanismus vytváření odkazů. Autoři také získávají výhodu, protože nahrazují sadu několika různé prvky pomáhá dělat zdroj jasnější a jednodušší.

Prvek definuje název sekce, který může obsahovat více než jen název sekce. Například může mít smysl, aby název obsahoval podnadpis, informace o verzi příběhu nebo uvedení zdroje.

Náhled HTML5

Lachlan Hunt

Blog Zde vložte slogan.

Prvek definuje zápatí sekce, do které je přidán. Zápatí obvykle obsahuje informace jako: kdo to napsal, odkazy na příslušné dokumenty, autorská práva a podobně.

Prvek představuje sekci navigačních odkazů, vhodnou pro navigaci na webu nebo obsah.

Prvek má obsahovat obsah, který nepřímo souvisí s obsahem vedle něj, obvykle se používá k označení postranního panelu.

Archiv

Prvek definuje obecnou část dokumentu nebo aplikace, jako je například kapitola.

Kapitola 1: Tenkrát

Bylo to nejlepší ze všech dob, bylo to nejhorší ze všech dob; byl to věk moudrosti, byl to věk hlouposti; byla to éra víry, byla to éra nevíry; to byly roky Světla, to byly roky Temnoty; ...

(Výňatek z "Příběh dvou měst")

Prvek je nezávislá část dokumentu, stránky nebo webu. Je vhodný pro obsah, jako jsou zprávy, články na blogu, příspěvky na fóru nebo jednotlivé komentáře.

Komentář #2 Jack O'Neal

29. srpna 2007 v 13:58

To je skvělý článek!

Video a audio

V minulé roky Video a audio na internetu jsou stále životaschopnější a stránky jako YouTube, Viddler, Revver, MySpace a desítky dalších usnadňují život těm, kteří publikují video a audio. Protože HTML v současnosti chybí potřebné finanční prostředky Pro úspěšnou implementaci a správu multimédií spoléhá mnoho webů na Flash, který poskytuje tuto funkci. Ačkoli je možné vkládat média pomocí různých pluginů (jako je QuickTime, Windows Media atd.), Flash je nyní jediným široce používaným pluginem, který poskytuje kompatibilitu napříč prohlížeči s rozhraními API požadovanými vývojáři.

Jak dokazují různé přehrávače médií na Na bázi Flash, jejich autoři mají zájem podporovat své vlastní uživatelská rozhraní, který obvykle umožňuje uživatelům přehrávat, pozastavovat, zastavovat, vyhledávat a upravovat hlasitost. Plánem je poskytnout tuto funkcionalitu v prohlížečích přidáním nativní podpory pro video a zvuk a poskytnutím API skripty pro ovládání přehrávání.

Nové prvky to velmi zjednodušují. Většina rozhraní API je pro tyto dva prvky stejná, rozdíl je způsoben inherentními rozdíly mezi vizuálními a nevizuálními médii.

Prezentace dokumentu

Na rozdíl od předchozích verzí HTML a XHTML, které byly definovány z hlediska jejich syntaxe, je HTML5 v současnosti definován z hlediska objektový model dokument (DOM) – strom prezentace, který prohlížeče používají k zobrazení dokumentu. Vezměme si například velmi jednoduchý dokument skládající se z nadpisu, nadpisu a odstavce. strom DOM může vypadat nějak takto.

Strom DOM obsahuje prvek uvnitř , stejně jako

Výhodou definování HTML5 z hlediska DOM je, že samotný jazyk lze definovat nezávisle na syntaxi. Existují dvě syntaxe, které lze použít k reprezentaci dokumentů HTML: publikování HTML (známé jako HTML5) a publikování XML (známé jako XHTML5).

Syntaxe HTML je založena na SGML, raném HTML verze, ale je definována tak, aby byla v praxi více kompatibilní s prohlížeči.

Příklad HTML dokumentu

Toto je příklad HTML dokumentu

Všimněte si, že stejně jako v předchozích verzích HTML jsou některé značky volitelné a jsou automaticky zahrnuty.

Publikování do XML je založeno na syntaxi s pomocí XML 1.0 a jmenný prostor XHTML 1.0.

Příklad HTML dokumentu

Toto je příklad HTML dokumentu

S výjimkou uzavřená značka a přítomnost atributu xmlns, tyto dva příklady jsou totožné.

Prohlížeče používají k odlišení typ MIME. Jakýkoli dokument odeslaný jako text/html musí splňovat požadavky pro publikování v HTML a dokument odeslaný pomocí typu MIME application/xhtml+xml musí splňovat požadavky pro publikování v XML.

Autoři se musí informovaně rozhodnout, kterou možnost použít, což závisí na řadě různých faktorů. Autoři by neměli používat jednu nebo druhou možnost bez výhrad, každá je optimalizována pro různé situace.

Výhody používání HTML

Zpětně kompatibilní se stávajícími prohlížeči.
Autoři jsou již obeznámeni se syntaxí.
Shovívavá syntaxe nevyvolá " Žlutá obrazovka smrt“, když dojde k náhodné chybě.
Pohodlná syntaxe zkratek, autoři mohou například vynechat některé značky a hodnoty atributů.

Výhody používání XHTML

Přísný XML syntaxe povzbuzuje autory k psaní správný kód, pro některé autory je jednodušší na údržbu.
Přímo se integruje s dalšími technologiemi XML, jako je SVG a MathML.
Umožňuje použití XML procesoru, který někteří autoři při své práci využívají.

Jak pomoci

Práce na HTML5 postupují rychle, ale stále se očekává, že jejich dokončení potrvá několik let. Vzhledem k požadavku na provedení série testů a dosažení interoperability implementací by práce na současných hodnoceních měly být dokončeny za 10–15 let. Během tohoto procesu vyžaduje úspěch velká důležitost Zpětná vazba s širokou škálou lidí, včetně webových designérů, CMS a vývojářů prohlížečů. Každý příspěvek do HTML5 je aktivně podporován.

Kromě specifikace existuje několik dalších projektů, které lidem pomohou lépe porozumět této práci.

The Differences from HTML 4 popisuje změny, které od té doby nastaly předchozí verze HTML.
Principy návrhu HTML pojednávají o principech používaných k rozhodování a pomohou vám pochopit důvody mnoha současných návrhových rozhodnutí.
Web Developer's Guide to HTML 5 je napsán tak, aby pomohl webovým designérům a vývojářům porozumět všemu, co potřebují vědět, aby mohli napsat vhodné HTML5 dokumenty a uvést tyto principy do praxe.

Existuje mnoho komunit, jejichž prostřednictvím můžete přispět. Můžete se připojit k W3C HTML a přihlásit se k odběru mailing listu nebo wiki. Můžete se také přihlásit k odběru a přispívat do kteréhokoli z nich

Dnes si povíme něco o sémantice v HTML5. Už jsem malou psal recenzní příspěvek o . Doporučuji, abyste se s ním seznámili před přečtením tohoto článku. Nyní se na tuto problematiku podíváme podrobněji, jak správně a kompetentně sestavit sémantickou strukturu dokumentu HTML5.

V tomto článku budeme postupně tvořit html stránku a navrhněte jej pomocí sémantických značek HTML5.

Výkres - Sémantická struktura pro stránku HTML5.

DOCTYPE a meta tagy v názvu stránky

Začněme s standardní šablona HTML5 dokumentu a do hlavičky přidejte metaznačky:

Název stránky

Přidal jsem značku, která je zodpovědná klíčová slova. A značku, která je zodpovědná za popis stránky. Pro SEO optimalizaci jsou tyto značky vyžadovány. Je také nutné správně vyplnit štítek. Název stránky musí být unikátní pro celý web a obsahovat v názvu celou podstatu stránky, pro kterou je specifikován.

Pojďme dále. HTML5 má nové značky, které se používají sémantické označení dokument. Jedná se o tagy header, nav, main, article, aside, footer atd. Pokud jde o zobrazení, fungují stejně jako běžné značky, tj. blokové prvky. Ale pokud to nemá sémantickou zátěž, tak header, nav, main a další by se měly používat jen smysluplně.

Název stránky

Záhlaví stránky je formátováno v tagu header. Vezměte prosím na vědomí, že název stránky je napsán pomocí značky h1.

Titulek webové stránky

Pokud máme u nadpisu i slogan, pak jej umístíme do p, div nebo span.

Titulek webové stránky

slogan webu

Poznámka ke značce H1

Je třeba poznamenat, že v HTML5 se značka H1 používá k označení názvu kontejneru, ve kterém se nachází (může to být záhlaví, sekce, článek atd.)

Před příchodem HTML5 značek byla sémantika poněkud odlišná a odlišná. Takže v HTML4 mohl být pouze jeden nadpis H1 na stránku! Zpravidla se jednalo o nadpis článku nebo nadpis stránky (např. jde-li o stránku kategorie, na které je zobrazeno několik článků.) H2 se používal pro podnadpisy, případně pro sekce hlavního článku. H3 pro podsekce a tak dále.

Navigace na stránce

Návrh hlavní navigace webu by měl být obsažen v značce nav. Měli byste také pamatovat na to, že se považuje za dobrou praxi navrhnout navigaci s prvky seznamu.

Domov
Portfolio
Galerie
Kontakty

Obsah na stránce

Hlavní obsah stránky je naformátován v hlavním tagu. Může to být jeden článek nebo několik náhledových článků mluvíme o tom o stránce blogu s více položkami. Do hlavní značky nemůžete umístit postranní panel, záhlaví stránky, zápatí nebo hlavní navigaci!

...obsah hlavní stránky...

Design článku

Tag článku se používá k zalamování článků. Obecně tato značka obsahuje blok obsahu, který lze vyjmout z kontextu stránky a použít samostatně jinde. Může to být článek (celý text článku nebo náhled), příspěvek na fóru atd.

V níže uvedeném příkladu jsem ukázal design článku v kontextu, uvnitř hlavní značky. Článek má blok záhlaví s názvem článku. Datum zveřejnění článku je stanoveno se speciálním štítkemčas, který se zobrazuje jako obvykle vložený prvek. Časová značka má speciální atribut, ve kterém musí být uveden čas publikace ve strojovém formátu. Může to být jen datetime="2015-09-30" nebo hodiny, minuty a sekundy datetime="2015-09-30T15:25:55" . Parametr pubdate označuje, že článek byl publikován ve stejnou dobu jako byl napsán. Pokud se jedná o zprávy, může se stát, že čas zpráv je jedna a čas zveřejnění je jiný, proto musíte zadat časový tag dvakrát a zadat pubdate pouze do tagu, kde je uveden čas zveřejnění.

... Název článku 30. září Podnázev článku

Lorem ipsum dolor sit amet, consectetur adipisicing elita. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?

Z výše uvedeného příkladu můžete vidět, že značky záhlaví a zápatí byly použity uvnitř článku ke zvýraznění nadpisu a zápatí článku.

Postranní panel nebo sloupec s widgety

Pro každého individuální prvek postranní panel používáme blok stranou. Uvnitř je název naformátován pomocí značky h1. Sloupec postranního panelu tedy může vypadat takto:

Název widgetu... Nejnovější příspěvky... Oblíbené komentáře...

Značka sekce

Značka sekce se používá k reprezentaci skupiny nebo sekce tematicky souvisejícího obsahu. Její použití je podobné jako u článku s tím hlavním rozdílem, že obsah v prvku může být mimo kontext samotné stránky bezvýznamný. Pro označení tématu sekce se doporučuje používat značky ( – ).

Chcete-li uvést příklad článku, který právě čtete, můžete každý odstavec zabalit do značky. Značku sekce lze například použít ke zvýraznění bloků obsahu na vstupní stránce. Zní to podobně jako definice prvek div, který se často používá jako kontejner pro obsah. Rozdíl je v tom, že div nemá sémantický význam a neříká nic o obsahu uvnitř. Značka sekce se naopak používá k jasnému označení toho, že obsah v ní souvisí významem. Některé ze svých značek div můžete nahradit značkami sekcí, ale vždy si položte otázku: „Souvisí tento obsah nebo ne?“

Příklad použití značky sekce v seznamu měst:

An Event Apart Cities

Přidejte se k nám v těchto městech v roce 2010.

Seattle

Pokračujte po žluté cihlové cestě.

Boston

To je Beantown svým přátelům.

Minneapolis

To je milé.

Ubytování není zajištěno.

Zápatí webu - Zápatí

Zápatí webu je navrženo se značkou

Závěr

Ke kontrole struktury stránky můžete použít nástroj HTML5 outliner. Zobrazuje strukturu stránky podle bloků a nadpisů.

Sémantika v HTML5 není omezena na značky uvedené výše v článku. Pomocí uvedených příkladů však můžete aktualizovat své označení a učinit web uživatelsky přívětivější. vyhledávače, což ovlivní vyšší hodnocení webu ve výsledcích vyhledávání.

Chcete-li pokračovat v tomto tématu, můžete prozkoumat další nové značky HTML5. Stejně jako mikroformáty pro navrhování a strukturování dat, jako je schema.org

Důležitá poznámka k používání značek HTML5. Specifikace nespecifikuje striktní pravidla pro použití sémantických značek, poskytuje pouze doporučení pro jejich použití. Pokud nerozumíte nebo nevíte, kde a kterou značku HTML5 použít, je lepší použít div, abyste nepoškodili nebo neporušili strukturu dokumentu.

Články a materiály

Jednoduchý dokument HTML5

Podívejme se na jeden z nejjednodušších HTML5 dokumentů. Začíná určením typu dokumentu pomocí speciálního kódu popisu typu dokumentu (význam tohoto kódu je vysvětlen v další části), následuje 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 koncová značka není ve skutečnosti vyžadována ve standardu HTML5, protože prohlížeče vědí, jak zavřít všechny otevřené prvky na konci dokumentu (a standard HTML5 toto chování vynucuje). 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ářů je toho názoru, ž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 tomto stádiu Tato ukázková stránka je někde mezi nejzákladnějším HTML5 dokumentem a pokročilým výchozím bodem pro praktickou HTML5 webovou stránku. V dalších částech k němu přidáme zbytek potřebné prvky a ponořit se hlouběji do označ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 XHTML dokument 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 číslo. oficiální verze HTML (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í a tak dále.

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, když ji zobrazí kdokoli moderní prohlížeč. 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

Skriptovací jazyk JavaScript byl původně vytvořen jako časově náročný způsob, jak přidat lesk a kouzlo nudným webovým stránkám. V současné době hlavní oblast JavaScript aplikace se posunul od vývoje rozhraní zvonků a píšťalek k vývoji vlastních webových aplikací, včetně superefektivních e-mailových klientů, 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 JavaScript 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 síť- š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 zvláštní zacházení blokuje, zobrazí na panelu zpráv bezpečnostní varování a odmítne spustit jakýkoli kód JavaScript, 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.

Oblíbené v kategorii: