Reklama

HTML5 je najnovšie a najväčšie Čo je to HTML5 a ako sa mení spôsob prehľadávania? [MakeUseOf vysvetľuje]V posledných rokoch ste možno počuli výraz HTML5 raz za čas. Či už viete niečo o vývoji webových stránok alebo nie, koncept môže byť trochu nejasný a mätúci. Je zrejmé, že ... Čítaj viac verzia najpoužívanejšieho značkovacieho jazyka na webe. V porovnaní s poslednou verziou jazyka došlo k veľkým zmenám. Ak ich nepoužívate, vynechávajú ste skutočne skvelú funkčnosť.

Nemáme priestor na pokrytie všetkých nových prvkov v piatej verzii HTML, ale týchto deväť je tých najdôležitejších. Ak chcete získať ďalšie informácie o nových prvkoch a rozhraniach API v jazyku HTML5, nezabudnite pozrite sa na W3Schools.

Úvod do sémantických prvkov

Podobne ako väčšina internetu, aj HTML5 sa presunul na sémantiku. Teraz sa namiesto formátovania značiek jednoducho používajú na formátovanie prehliadačov a vyhľadávače Top 7 sémantických vyhľadávacích nástrojov ako alternatíva k spoločnosti Google Čítaj viac význam toho, čo obklopujú.

instagram viewer

Napríklad,

jednoducho povie prehliadaču, že obsahuje odsek.

, o ktorej budeme chvíľu diskutovať, povie prehliadaču, že obsahuje hlavný obsah stránky.

Sémantický web sa stále vyvíja a my sme len začali poškriabať povrch toho, čo môže urobiť. HTML5 pomáha prinášať sémantické značenie Čo je sémantické značenie a ako to navždy zmení internet [vysvetlenie technológie] Čítaj viac do oveľa väčšej časti internetu, a to môže byť dobré iba pre budúcnosť sémantického spracovania.

1.

značka definuje „nezávislý a samostatný obsah“. Najjednoduchším príkladom je, samozrejme, článok. V prípade tohto konkrétneho článku sme značku otvorili pred predstavením a po jej uzavretí ju zavrieme.

Celý text v samostatnej časti.

Existujú však aj iné spôsoby, ako by ste ich mohli použiť. Napríklad veľa blogov na varenie obsahuje osobné príbehy o tom, ako recept vznikol alebo prečo je pre autora dôležitý. Potom nasleduje samotný recept. Dalo by sa argumentovať, že každý z týchto prvkov by mohol byť osamelý.

Vo fóre by sa každý príspevok alebo vlákno mohol považovať za samostatný a každý mohol byť označený svojím vlastným

tag. Z väčšej časti sa použije na hlavný obsah stránky. Majte však na pamäti, že ho môžete použiť aj kreatívnejšie.

2.

Úzko súvisí s

je
. Toto definuje „tematické zoskupenie obsahu, zvyčajne s nadpisom“. tak
bude vo vnútri
… správny?

Nie nevyhnutne. W3 poukazuje na to, že to závisí od štruktúry vášho webu. Môžete mať samostatný obsah v rôznych sekciách svojej stránky (napríklad na prednú stránku spravodajského webu). V tomto článku by ste potom mohli mať sekcie.

Prečo potrebujete DAC

Všetko znie lepšie.

Ako nastaviť DAC

Tu je to, čo musíte urobiť.. .

Môžete dokonca mať sekcie v rámci sekcií, ak sa zmestia na vašu stránku. Nezabudnite, že sekcia je jednoducho „tematické zoskupenie obsahu“ a nájdete veľa miest na jej použitie.

3.

Tento prvok „by sa mal používať ako kontajner na úvodný obsah“. Stručne povedané, je to časť vašej stránky, ktorá ľuďom pomáha porozumieť tomu, čo majú čítať.

Nenechajte sa zmiasť - tento kontajner môžete použiť viackrát. Môžete ho napríklad použiť na identifikáciu názvu stránky a úvodného odseku svojho blogového príspevku. Môžete ho však tiež použiť na označenie úvodného obsahu pre každú sekciu.

Všetko, čo potrebujete vedieť o DAC

Tu je užitočný úvod do DAC ...

Zvyšok článku tu nájdete.

Časti hlavičky zvyčajne obsahujú aspoň jednu značku nadpisu - H1, H2 atď. Nemusia, ale všeobecne, ak používate značku nadpisu, je tu dobrá stávka, že zahrňujete obsah hlavičky.

4.

W3 hovorí, že značky päty zvyčajne obsahujú „autora dokumentu, informácie o autorských právach, odkazy na podmienky použitia, kontaktné informácie atď.“ Môžete to považovať za „upratovacie“ veci.

V dokumentácii sa tiež uvádza, že na svojej stránke môžete mať viac ako jednu časť päty. Pravdepodobne je však dobré uchovávať všetky tieto informácie na jednom mieste.

5.

Táto značka obsahuje navigačné odkazy pre danú stránku. Túto značku získa iba navigačná časť, nie všetky odkazy na vašej stránke. Je určený pre navigačné panely a podobné nástroje.

Toto je skutočne jednoduchá značka - to je všetko. Použite ho na definovanie navigačnej sekcie a už ju na svojej stránke nepoužívajte.

6.

Jeden z najzaujímavejších nových prvkov v HTML5 je bokom. W3 poskytuje trochu neužitočnú definíciu „nejakého obsahu okrem obsahu, v ktorom je umiestnený.“

Stručne povedané, bokom je čokoľvek, čo súvisí s okolitými informáciami (ale je od nich oddelené). Môže to byť bočný panel, ktorý pridáva podrobnosti k vášmu obsahu. Keď sa používa v rámci sady

poskytuje ďalšie informácie, ktoré nie sú potrebné na pochopenie hlavného obsahu.

Ak by sme napríklad do tohto článku zahrnuli bočný panel s informáciami o histórii HTML5, bolo by to bokom.

Ale

Tu je uvedený hlavný článok. Článok pokračuje tu.

Pretože pre túto značku existuje viac použití, môže to byť mätúce. Ak si pamätáte, že ide o „sekundárny obsah“ a nemusí to byť vždy bočný panel, budete mať lepšiu predstavu o tom, ako ho používať.

7.

Mnoho webových stránok obsahuje informácie, ktoré je potrebné zobraziť, ale nie výrazne. Možno ide o informácie o autorských právach k fotografii. Alebo jemnú tlač na súťaži. Tento druh informácií je presne tým, pre čo je značka podrobností.

Keď použijete značku podrobností, vytvoríte skrytý text, ktorý sa dá ľahko zobraziť. Tu je príklad:

Kliknutím sem zobrazíte informácie.

Tu sú podrobnejšie informácie, ktoré ihneď nepotrebujete.

Podrobnosti zobrazíte kliknutím na šípku. Jednoduchá. Vytvorenie je rovnako jednoduché. Tu je kód použitý v príklade uvedenom vyššie:

Kliknutím sem zobrazíte informácie. Tu sú podrobnejšie informácie, ktoré ihneď nepotrebujete.

tag definuje vetu, ktorá sa zobrazí, zatiaľ čo ďalší obsah je skrytý. Upozorňujeme, že v sekcii podrobností môžete použiť ďalšie značky: nadpisy, sekcie atď.

Existujú aj iné skvelé veci, ktoré môžete robiť s HTML 8 skvelých efektov HTML, ktoré môže ktokoľvek pridať na svoju webovú stránkuNemusíte poznať CSS alebo PHP, aby ste si vytvorili fantastický web. Pomocou týchto skvelých trikov HTML vytvoríte úžasné efekty. Čítaj viac , aj keď nepoznáte veľa CSS alebo JSON.

8-9.
a

Nerobte si starosti značka, ktorú ste používali celé roky, nezmizne.

obchádza značku obrázka a informuje prehliadač, že ide o samostatný obrázok, schému, zoznam kódov alebo iný obrázok.

Ak je zo stránky odstránená nejaká postava, neovplyvní to tok obsahu.

ide do značky obrázka a určuje popis obrázka. Môže to vyzerať takto:

Toto je naše logo!

Takto získate vstavaný spôsob, ako pridať k obrázkom nadpis. Už nemusíte prechádzať CMS.

Využite výkon HTML5

Nové prvky v HTML5 pridávajú veľa sily, najmä na sémantické účely. Existujú ďalšie prvky pre formátovanie, skalárne merania, postup úloh a ďalšie. Môžeš vidieť všetky nové prvky na W3Schools.

Ak však dokážete zvládnuť týchto deväť, budete na dobrej ceste k dobrému využitiu jazyka HTML5. A ak ste novým používateľom HTML, nezabudnite sa pozrieť príklady týchto kódov 17 jednoduchých príkladov kódu HTML, ktoré sa môžete naučiť za 10 minútChcete vytvoriť základnú webovú stránku? Naučte sa tieto príklady HTML a vyskúšajte ich v textovom editore, aby ste videli, ako vyzerajú v prehliadači. Čítaj viac !

Začali ste používať HTML5? Ktoré nové prvky považujete za najužitočnejšie? Podeľte sa o svoje myšlienky v komentároch nižšie!

Dann je konzultant pre obsahovú stratégiu a marketing, ktorý pomáha spoločnostiam vytvárať dopyt a vedie. Blogy venoval aj stratégii a marketingu obsahu na stránke dannalbright.com.