{"id":1663,"date":"2012-09-17T10:37:01","date_gmt":"2012-09-17T06:37:01","guid":{"rendered":"http:\/\/blog.igloonet.cz\/?p=1663"},"modified":"2014-08-12T00:39:30","modified_gmt":"2014-08-11T22:39:30","slug":"zakladni-strukturalni-tagy-v-html5","status":"publish","type":"post","link":"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/","title":{"rendered":"Z\u00e1kladn\u00ed struktur\u00e1ln\u00ed tagy v&nbsp;HTML5"},"content":{"rendered":"<div id=\"fb-root\"><\/div>\n<p>Web se neust\u00e1le vyv\u00edj\u00ed. Jazyk HTML 4&nbsp;je tu s&nbsp;n\u00e1mi u\u017e p\u011bknou \u0159adu let a&nbsp;tv\u016frc\u016fm webov\u00e9ho obsahu slou\u017eil dob\u0159e. Av\u0161ak po \u010dase za\u010dali mnoz\u00ed nar\u00e1\u017eet na&nbsp;r\u016fzn\u00e1 omezen\u00ed. Bylo v&nbsp;podstat\u011b jen ot\u00e1zkou \u010dasu, kdy p\u0159ijde nov\u011bj\u0161\u00ed verze - HTML5. Ta s&nbsp;sebou p\u0159in\u00e1\u0161\u00ed nov\u00e9, \u00fa\u010dinn\u011bj\u0161\u00ed a&nbsp;hlavn\u011b jednodu\u0161\u0161\u00ed z\u00e1pisy. D\u00e1le zav\u00e1d\u00ed \u0161irokou \u0161k\u00e1lu funkc\u00ed pro pr\u00e1ci t\u0159eba s&nbsp;formul\u00e1\u0159i, multim\u00e9dii, strukturami a&nbsp;s\u00e9mantikou. Dobr\u00fdch \u010dl\u00e1nk\u016f na&nbsp;t\u00e9ma HTML5 koluj\u00ed po internetu spousty. Nechci se znovu pou\u0161t\u011bt do&nbsp;popisu samotn\u00e9ho jazyka HTML5.&nbsp;V&nbsp;tomto \u010dl\u00e1nku bych se r\u00e1d zam\u011b\u0159il na&nbsp;nov\u00e9 struktur\u00e1ln\u00ed tagy, kter\u00e9 p\u0159id\u00e1vaj\u00ed do&nbsp;str\u00e1nek dal\u0161\u00ed s\u00e9mantick\u00fd v\u00fdznam, a&nbsp;poskytl jejich z\u00e1kladn\u00ed p\u0159ehled.<!--more--><\/p>\n<h2>&lt;div&gt;<\/h2>\n<p>HTML5 se zam\u011b\u0159ilo p\u0159ev\u00e1\u017en\u011b na&nbsp;zv\u00fd\u0161en\u00ed p\u0159ehlednosti zdrojov\u00e9ho k\u00f3du a&nbsp;dopln\u011bn\u00ed chyb\u011bj\u00edc\u00ed s\u00e9mantiky. V\u011bt\u0161ina str\u00e1nek je dnes tvo\u0159ena obvykl\u00fdmi \u010d\u00e1stmi, jako je hlavi\u010dka, n\u011bjak\u00e9 sloupce a&nbsp;obvykle pati\u010dka. Tyto \u010d\u00e1sti jsou spojov\u00e1ny do&nbsp;logick\u00fdch celk\u016f pomoc\u00ed tagu &lt;div&gt; a&nbsp;jeho atribut\u016f <em>id<\/em> nebo <em>class<\/em>, proto\u017ee v&nbsp;sou\u010dasn\u00e9 verzi HTML 4&nbsp;\u017e\u00e1dn\u00e9 speci\u00e1ln\u00ed tagy na&nbsp;toto rozli\u0161en\u00ed nejsou. Ten ale nenese \u017e\u00e1dn\u00fd s\u00e9mantick\u00fd v\u00fdznam, a&nbsp;tak b\u00fdv\u00e1 obt\u00ed\u017en\u00e9 cel\u00fd dokument strojov\u011b zpracov\u00e1vat. Slou\u017e\u00ed tak prakticky jen k&nbsp;rozd\u011blen\u00ed dokumentu na&nbsp;\u010d\u00e1sti, kter\u00fdm pak d\u00e1v\u00e1me ur\u010dit\u00fd vzhled pomoc\u00ed CSS&nbsp;styl\u016f.<\/p>\n<p>Specifikace HTML5 p\u0159idala n\u011bkolik pom\u011brn\u011b zaj\u00edmav\u00fdch a&nbsp;u\u017eite\u010dn\u00fdch tag\u016f pro strukturov\u00e1n\u00ed va\u0161eho obsahu. Z&nbsp;velk\u00e9 \u010d\u00e1sti dok\u00e1\u017eou tyto zna\u010dky nahradit b\u011b\u017en\u00e9 pou\u017e\u00edv\u00e1n\u00ed &lt;div&gt; polo\u017eek v&nbsp;na\u0161em zdrojov\u00e9m k\u00f3du. Zde je jejich z\u00e1kladn\u00ed p\u0159ehled:<\/p>\n<ul>\n<li>section - reprezentuje r\u016fzn\u00e9 \u010d\u00e1sti str\u00e1nek, nap\u0159. kapitoly<\/li>\n<li>article - reprezentuje nez\u00e1visl\u00e9 textov\u00e9 \u010d\u00e1sti str\u00e1nky, nap\u0159. koment\u00e1\u0159e, \u010dl\u00e1nky<\/li>\n<li>header - reprezentuje hlavi\u010dku str\u00e1nky<\/li>\n<li>nav - reprezentuje \u010d\u00e1st str\u00e1nky, kter\u00e1 je ur\u010dena k&nbsp;navigaci, nej\u010dast\u011bji menu<\/li>\n<li>aside - reprezentuje obsah, kter\u00fd je n\u011bjak\u00fdm zp\u016fsobem spjat s&nbsp;hlavn\u00edm obsahem str\u00e1nky, ale nemus\u00ed b\u00fdt nutn\u011b jeho sou\u010d\u00e1st\u00ed<\/li>\n<li>footer - reprezentuje pati\u010dku str\u00e1nky, m\u016f\u017ee obsahovat informace o&nbsp;autorovi, autorsk\u00fdch pr\u00e1vech nebo odkazy na&nbsp;souvisej\u00edc\u00ed dokumenty<\/li>\n<\/ul>\n<h2>&lt;section&gt;<\/h2>\n<p>Element &lt;section&gt; pou\u017eijeme p\u0159esn\u011b v&nbsp;p\u0159\u00edpadech, kdy chceme sdru\u017eit dohromady \u010d\u00e1st dokumentu se souvisej\u00edc\u00edm obsahem. <a href=\"http:\/\/www.w3.org\/TR\/html5\/sections.html#the-section-element\">HTML5 specifikace<\/a> p\u0159esn\u011b \u0159\u00edk\u00e1:<\/p>\n<p><em>The section element represents a&nbsp;generic section of a&nbsp;document or application. A&nbsp;section, in this context, is a&nbsp;thematic grouping of content, typically with a&nbsp;heading.<\/em><\/p>\n<p>Tak\u017ee v&nbsp;podstat\u011b v\u0161e uvnit\u0159 elementu &lt;section&gt; by m\u011blo j\u00edt z\u00e1rove\u0148 uv\u00e9st jedn\u00edm spole\u010dn\u00fdm nadpisem.<\/p>\n<p>Dobr\u00e9 vysv\u011btlen\u00ed d\u00e1v\u00e1 nap\u0159\u00edklad Ian Devlin, autor n\u011bkolika zn\u00e1m\u00fdch publikac\u00ed o&nbsp;HTML5, na&nbsp;<a href=\"http:\/\/www.iandevlin.com\/blog\/2011\/04\/html5\/html5-section-or-article\">sv\u00e9m blogu<\/a>. Uv\u00e1d\u00ed, \u017ee&nbsp;dobrou analogii lze nal\u00e9zt tak\u00e9 v&nbsp;b\u011b\u017en\u00fdch novin\u00e1ch. Ty se obvykle d\u011bl\u00ed do&nbsp;sekc\u00ed: zpr\u00e1vy, sport, nemovitosti atd. Ka\u017ed\u00e1 z&nbsp;nich m\u00e1 sv\u016fj z\u00e1kladn\u00ed nadpis a&nbsp;obsahuje informace, kter\u00e9 se vztahuj\u00ed pr\u00e1v\u011b k&nbsp;tomuto nadpisu. Je ale tak\u00e9 pravd\u011bpodobn\u00e9, \u017ee&nbsp;ka\u017ed\u00e1 z&nbsp;t\u011bchto sekc\u00ed bude obsahovat \u010dl\u00e1nky, co\u017e n\u00e1s vede p\u011bkn\u011b k&nbsp;n\u00e1sleduj\u00edc\u00edmu elementu\u2026<\/p>\n<h2>&lt;article&gt;<\/h2>\n<p>Znovu si uka\u017eme co \u0159\u00edk\u00e1 <a href=\"http:\/\/www.w3.org\/TR\/html5\/the-article-element.html#the-article-element\">HTML5 specifikace<\/a> o&nbsp;tomto elementu:<\/p>\n<p><em>The article element represents a&nbsp;self-contained composition in a&nbsp;document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a&nbsp;forum post, a&nbsp;magazine or newspaper article, a&nbsp;blog entry, a&nbsp;user-submitted comment, an interactive widget or gadget, or any other independent item of content.<\/em><\/p>\n<p>Budeme-li pokra\u010dovat v&nbsp;na\u0161\u00ed novinov\u00e9 analogii, tak je pravda, \u017ee&nbsp;zm\u00edn\u011bn\u00e1 sportovn\u00ed sekce bude obsahovat \u010dl\u00e1nky, kter\u00e9 jsou v\u00fdhradn\u011b jen o&nbsp;sportu. Ka\u017ed\u00fd \u010dl\u00e1nek m\u00e1 sv\u016fj vlastn\u00ed nadpis, sv\u016fj odli\u0161n\u00fd p\u0159\u00edb\u011bh, je zcela samostatn\u00fd a&nbsp;nez\u00e1visl\u00fd za zbytku str\u00e1nky. Tento obsah by tedy m\u011blo b\u00fdt mo\u017en\u00e9 vyjmout a&nbsp;zobrazit nap\u0159\u00edklad v&nbsp;RSS \u010dte\u010dce.<\/p>\n<p>Vr\u00e1t\u00edme-li se k&nbsp;samotn\u00e9 struktu\u0159e str\u00e1nky, tak nic n\u00e1m nebr\u00e1n\u00ed tagy &lt;article&gt; a&nbsp;&lt;section&gt; do&nbsp;sebe libovoln\u011b zano\u0159ovat. Pokud si to dokument vy\u017e\u00e1d\u00e1, je mo\u017en\u00e9, aby \u010dl\u00e1nek obsahoval dal\u0161\u00ed sekce, ale tak\u00e9 je mo\u017en\u00e9, aby sekce obsahovala i&nbsp;dal\u0161\u00ed \u010dl\u00e1nky.<\/p>\n<pre>\n<section>\n  <article>\n    <header>\n      <h1><a href=\"#\">Nadpis<\/a><\/h1>\n    <\/header>\n    <section>\n      Bla bla bla...\n    <\/section>\n  <\/article>\n  <article>\n    <header>\n      <h1><a href=\"#\">Nadpis<\/a><\/h1>\n    <\/header>\n    <section>\n      Bla bla...\n    <\/section>\n  <\/article>\n<\/section>\n<\/pre>\n<h2>&lt;header&gt; a&nbsp;&lt;footer&gt;<\/h2>\n<p>T\u00e9m\u011b\u0159 ka\u017ed\u00fd HTML dokument m\u00e1 svoji hlavi\u010dku a&nbsp;pati\u010dku. Specifikace HTML5 i&nbsp;na&nbsp;toto pamatuje a&nbsp;p\u0159idala proto tyto dva elementy <a href=\"http:\/\/www.w3.org\/TR\/html5\/the-header-element.html\">&lt;header&gt;<\/a> a&nbsp;<a href=\"http:\/\/www.w3.org\/TR\/html5\/the-footer-element.html\">&lt;footer&gt;<\/a>, aby bylo mo\u017en\u00e9 s\u00e9manticky rozli\u0161it tyto \u010d\u00e1sti dokumentu. Neexistuje \u017e\u00e1dn\u00e9 omezen\u00ed na&nbsp;po\u010det pou\u017eit\u00ed t\u011bchto tag\u016f na&nbsp;str\u00e1nce. V&nbsp;podstat\u011b ka\u017ed\u00e1 sekce nebo \u010dl\u00e1nek m\u016f\u017ee m\u00edt sv\u016fj specifick\u00fd nadpis a&nbsp;pati\u010dku. Element &lt;header&gt; \u010dasto obsahuje nadpis &lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, \u2026 &lt;h6&gt;. B\u011b\u017en\u00e9 je i&nbsp;um\u00edst\u011bn\u00ed formul\u00e1\u0159e pro vyhled\u00e1v\u00e1n\u00ed nebo t\u0159eba loga str\u00e1nky.<\/p>\n<pre>\n<header>\n  <h1>Toto je nadpis<\/h1>\n  <span class=\"motto\">Rychl\u00fd pr\u016fvodce HTML5 elementy<\/span>\n<\/header>\n<\/pre>\n<p>Pati\u010dka obsahuje informace o&nbsp;dan\u00e9 sekci, ke&nbsp;kter\u00e9 se vztahuje. Obvykle se jedn\u00e1 o&nbsp;informace o&nbsp;autorovi, odkazy na&nbsp;dal\u0161\u00ed zdroje informac\u00ed, copyright \u010di r\u016fzn\u00e1 \u201elike-tla\u010d\u00edtka\u201c. Tento element se hod\u00ed i&nbsp;pro modern\u00ed ob\u0159\u00ed pati\u010dky.<\/p>\n<pre>\n<footer>Copyright \u00a9 2012<\/footer>\n<\/pre>\n<p>Nen\u00ed podm\u00ednkou aby element &lt;header&gt; musel b\u00fdt naho\u0159e v&nbsp;dokumentu. Stejn\u011b tak i&nbsp;pati\u010dka &lt;footer&gt; nemus\u00ed b\u00fdt nutn\u011b um\u00edst\u011bna na&nbsp;konci. Je v\u0161ak doporu\u010deno toto po\u0159ad\u00ed dodr\u017eet, proto\u017ee zdrojov\u00fd k\u00f3d dokumentu je pak l\u00e9pe \u010diteln\u00fd.<\/p>\n<h2>&lt;nav&gt;<\/h2>\n<p>Tento element ozna\u010duje tu \u010d\u00e1st str\u00e1nky, kter\u00e1 je ur\u010dena k&nbsp;navigaci \u010dten\u00e1\u0159e. Typicky se jedn\u00e1 o&nbsp;seznamy odkaz\u016f, kter\u00e9:<\/p>\n<ul>\n<li>slou\u017e\u00ed jako prim\u00e1rn\u00ed\/sekund\u00e1rn\u00ed navigace webu<\/li>\n<li>slou\u017e\u00ed k&nbsp;orientaci v&nbsp;dlouh\u00e9m textu<\/li>\n<\/ul>\n<p>M\u011bjte p\u0159itom na&nbsp;pam\u011bti, \u017ee&nbsp;ne v\u0161echny seznamy odkaz\u016f mus\u00ed b\u00fdt nutn\u011b uzav\u0159eny uvnit\u0159 tagu &lt;nav&gt;. Typick\u00fdm p\u0159\u00edkladem jsou dlouh\u00e9 pati\u010dky, kter\u00e9 obsahuj\u00ed \u0159adu informac\u00ed jako pravidla port\u00e1lu, copyright, odkazy na&nbsp;str\u00e1nku s&nbsp;kontakty apod. Pro tyto \u00fa\u010dely posta\u010d\u00ed, kdy\u017e je v\u0161e uzav\u0159eno uvnit\u0159 tagu &lt;footer&gt;. Uk\u00e1zkou m\u016f\u017ee b\u00fdt nap\u0159. web spole\u010dnosti <a href=\"http:\/\/www.snowboard-zezula.cz\/\">SNOWBOARD ZEZULA<\/a>, na&nbsp;jeho\u017e tvorb\u011b jsem se spolupod\u00edlel.<\/p>\n<h2>&lt;aside&gt;<\/h2>\n<p>Posledn\u00edm prvkem, o&nbsp;kter\u00e9m bych se r\u00e1d zm\u00ednil, je element &lt;aside&gt;. Reprezentuje takovou \u010d\u00e1st str\u00e1nky, kter\u00e1 je ur\u010dit\u00fdm zp\u016fsobem spjata s&nbsp;hlavn\u00edm obsahem, ale nemus\u00ed b\u00fdt nutn\u011b jeho sou\u010d\u00e1st\u00ed. \u010casto m\u016f\u017eeme vid\u011bt podobn\u00e9 \u010d\u00e1sti str\u00e1nky zobrazen\u00e9 jako lev\u00e9 \u010di prav\u00e9 sloupce vedle textu. Typick\u00fdm p\u0159\u00edkladem uplatn\u011bn\u00ed je zobrazen\u00ed sekund\u00e1rn\u00ed navigace, reklamn\u00edho banneru, odkaz\u016f pro sd\u00edlen\u00ed na&nbsp;soci\u00e1ln\u00edch s\u00edt\u00edch \u010di dal\u0161\u00edch vedlej\u0161\u00edch informac\u00ed.<\/p>\n<h2>Z\u00e1v\u011brem<\/h2>\n<p>V HTML5 se rozhodn\u011b nest\u00e1v\u00e1 pou\u017e\u00edv\u00e1n\u00ed oby\u010dejn\u00e9ho tagu &lt;div&gt; n\u011bjak\u00fdm p\u0159e\u017eitkem. Uplatn\u011bn\u00ed tento element st\u00e1le najde v&nbsp;situac\u00edch, kdy nepot\u0159ebujeme seskupen\u00fdm prvk\u016fm p\u0159id\u00e1vat n\u011bjakou dal\u0161\u00ed s\u00e9mantiku. Nap\u0159\u00edklad chceme \u010dist\u011b jen \u201eostylovat\u201c ur\u010ditou \u010d\u00e1st&nbsp;webu.<\/p>\n<p>Seznam nov\u00fdch HTML5 tag\u016f je samoz\u0159ejm\u011b v\u011bt\u0161\u00ed. J\u00e1 jsem vyjmenoval pouze z\u00e1kladn\u00edch \u0161est prvk\u016f. Ale u\u017e i&nbsp;pou\u017eit\u00ed t\u011bchto tag\u016f v\u00fdrazn\u011b m\u011bn\u00ed s\u00e9mantiku dokumentu a&nbsp;tak\u00e9 pro samotn\u00e9 v\u00fdvoj\u00e1\u0159e se st\u00e1v\u00e1 k\u00f3d webov\u00e9 str\u00e1nky \u010diteln\u011bj\u0161\u00ed.<\/p>\n<h2>Internetov\u00e9 a&nbsp;kni\u017en\u00ed zdroje<\/h2>\n<ul>\n<li><a href=\"http:\/\/www.iandevlin.com\/blog\/2011\/04\/html5\/html5-section-or-article\">HTML5: Section or Article?<\/a><\/li>\n<li><a href=\"http:\/\/www.zdrojak.cz\/clanky\/webdesigneruv-pruvodce-po-html5-nova-semantika\/\">Webdesign\u00e9r\u016fv pr\u016fvodce po HTML5 - nov\u00e1 s\u00e9mantika<\/a><\/li>\n<li><a href=\"http:\/\/orderedlist.com\/resources\/html-css\/structural-tags-in-html5\/\">STRUCTURAL TAGS IN&nbsp;HTML5<\/a><\/li>\n<li><a href=\"http:\/\/cs.wikipedia.org\/wiki\/HTML5\">HTML5<\/a><\/li>\n<li>HTML5 Multimedia Develop and Design; Ian Devlin; Peachpit Press; 2012<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Web se neust\u00e1le vyv\u00edj\u00ed. Jazyk HTML 4&nbsp;je tu s&nbsp;n\u00e1mi u\u017e p\u011bknou \u0159adu let a&nbsp;tv\u016frc\u016fm webov\u00e9ho obsahu slou\u017eil dob\u0159e. Av\u0161ak po \u010dase za\u010dali mnoz\u00ed nar\u00e1\u017eet na&nbsp;r\u016fzn\u00e1 omezen\u00ed. Bylo v&nbsp;podstat\u011b jen ot\u00e1zkou \u010dasu, kdy p\u0159ijde nov\u011bj\u0161\u00ed verze - HTML5. Ta s&nbsp;sebou p\u0159in\u00e1\u0161\u00ed nov\u00e9, \u00fa\u010dinn\u011bj\u0161\u00ed a&nbsp;hlavn\u011b jednodu\u0161\u0161\u00ed z\u00e1pisy. D\u00e1le zav\u00e1d\u00ed \u0161irokou \u0161k\u00e1lu funkc\u00ed pro pr\u00e1ci t\u0159eba s&nbsp;formul\u00e1\u0159i, multim\u00e9dii, strukturami a&nbsp;s\u00e9mantikou. Dobr\u00fdch \u010dl\u00e1nk\u016f na&nbsp;t\u00e9ma HTML5 koluj\u00ed po internetu spousty. Nechci se znovu pou\u0161t\u011bt do&nbsp;popisu samotn\u00e9ho jazyka HTML5.&nbsp;V&nbsp;tomto \u010dl\u00e1nku bych se r\u00e1d zam\u011b\u0159il na&nbsp;nov\u00e9 struktur\u00e1ln\u00ed<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wp_typography_post_enhancements_disabled":false,"footnotes":""},"categories":[71],"tags":[88],"class_list":["post-1663","post","type-post","status-publish","format-standard","hentry","category-vyvoj","tag-html5"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Z\u00e1kladn\u00ed struktur\u00e1ln\u00ed tagy v HTML5 | igloonet blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/\" \/>\n<meta property=\"og:locale\" content=\"cs_CZ\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Z\u00e1kladn\u00ed struktur\u00e1ln\u00ed tagy v HTML5 | igloonet blog\" \/>\n<meta property=\"og:description\" content=\"Web se neust\u00e1le vyv\u00edj\u00ed. Jazyk HTML 4&nbsp;je tu s&nbsp;n\u00e1mi u\u017e p\u011bknou \u0159adu let a&nbsp;tv\u016frc\u016fm webov\u00e9ho obsahu slou\u017eil dob\u0159e. Av\u0161ak po \u010dase za\u010dali mnoz\u00ed nar\u00e1\u017eet na&nbsp;r\u016fzn\u00e1 omezen\u00ed. Bylo v&nbsp;podstat\u011b jen ot\u00e1zkou \u010dasu, kdy p\u0159ijde nov\u011bj\u0161\u00ed verze - HTML5. Ta s&nbsp;sebou p\u0159in\u00e1\u0161\u00ed nov\u00e9, \u00fa\u010dinn\u011bj\u0161\u00ed a&nbsp;hlavn\u011b jednodu\u0161\u0161\u00ed z\u00e1pisy. D\u00e1le zav\u00e1d\u00ed \u0161irokou \u0161k\u00e1lu funkc\u00ed pro pr\u00e1ci t\u0159eba s&nbsp;formul\u00e1\u0159i, multim\u00e9dii, strukturami a&nbsp;s\u00e9mantikou. Dobr\u00fdch \u010dl\u00e1nk\u016f na&nbsp;t\u00e9ma HTML5 koluj\u00ed po internetu spousty. Nechci se znovu pou\u0161t\u011bt do&nbsp;popisu samotn\u00e9ho jazyka HTML5.&nbsp;V&nbsp;tomto \u010dl\u00e1nku bych se r\u00e1d zam\u011b\u0159il na&nbsp;nov\u00e9 struktur\u00e1ln\u00ed\" \/>\n<meta property=\"og:url\" content=\"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/\" \/>\n<meta property=\"og:site_name\" content=\"igloonet blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/igloonet\" \/>\n<meta property=\"article:published_time\" content=\"2012-09-17T06:37:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-08-11T22:39:30+00:00\" \/>\n<meta name=\"author\" content=\"Martin Pe\u0161out\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@martinpesout\" \/>\n<meta name=\"twitter:site\" content=\"@igloonet\" \/>\n<meta name=\"twitter:label1\" content=\"Napsal(a)\" \/>\n\t<meta name=\"twitter:data1\" content=\"Martin Pe\u0161out\" \/>\n\t<meta name=\"twitter:label2\" content=\"Odhadovan\u00e1 doba \u010dten\u00ed\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/\"},\"author\":{\"name\":\"Martin Pe\u0161out\",\"@id\":\"https:\/\/igloonet.cz\/blog\/#\/schema\/person\/8c731b61fb41d87a83ec347b7b85f17f\"},\"headline\":\"Z\u00e1kladn\u00ed struktur\u00e1ln\u00ed tagy v&nbsp;HTML5\",\"datePublished\":\"2012-09-17T06:37:01+00:00\",\"dateModified\":\"2014-08-11T22:39:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/\"},\"wordCount\":1391,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/#organization\"},\"keywords\":[\"HTML5\"],\"articleSection\":[\"V\u00fdvoj\"],\"inLanguage\":\"cs\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/\",\"url\":\"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/\",\"name\":\"Z\u00e1kladn\u00ed struktur\u00e1ln\u00ed tagy v HTML5 | igloonet blog\",\"isPartOf\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/#website\"},\"datePublished\":\"2012-09-17T06:37:01+00:00\",\"dateModified\":\"2014-08-11T22:39:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/#breadcrumb\"},\"inLanguage\":\"cs\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"V\u00fdvoj\",\"item\":\"https:\/\/igloonet.cz\/blog\/rubriky\/vyvoj\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Z\u00e1kladn\u00ed struktur\u00e1ln\u00ed tagy v&nbsp;HTML5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/igloonet.cz\/blog\/#website\",\"url\":\"https:\/\/igloonet.cz\/blog\/\",\"name\":\"igloonet blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/igloonet.cz\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"cs\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/igloonet.cz\/blog\/#organization\",\"name\":\"igloonet\",\"url\":\"https:\/\/igloonet.cz\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"cs\",\"@id\":\"https:\/\/igloonet.cz\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2015\/07\/RGB_LVPC_igloonet.png\",\"contentUrl\":\"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2015\/07\/RGB_LVPC_igloonet.png\",\"width\":650,\"height\":465,\"caption\":\"igloonet\"},\"image\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/igloonet\",\"https:\/\/x.com\/igloonet\",\"https:\/\/instagram.com\/igloonet\/\",\"https:\/\/www.linkedin.com\/company\/igloonet\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/igloonet.cz\/blog\/#\/schema\/person\/8c731b61fb41d87a83ec347b7b85f17f\",\"name\":\"Martin Pe\u0161out\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"cs\",\"@id\":\"https:\/\/igloonet.cz\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/032ee2fb90b35a9a451f30dac27d46caf09d97dea956a64a208abc47dfca3251?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/032ee2fb90b35a9a451f30dac27d46caf09d97dea956a64a208abc47dfca3251?s=96&d=retro&r=g\",\"caption\":\"Martin Pe\u0161out\"},\"description\":\"Jsem brn\u011bnsk\u00fd UI v\u00fdvoj\u00e1\u0159 p\u011bkn\u00e9ho frontendu. Od mali\u010dka si potrp\u00edm na detail, ale p\u0159itom kladu d\u016fraz na jednoduchost a p\u0159ehlednost. Zast\u00e1v\u00e1m n\u00e1zor, \u017ee jednodu\u0161\u0161\u00ed weby jsou ty nejkr\u00e1sn\u011bj\u0161\u00ed.\",\"sameAs\":[\"https:\/\/igloonet.cz\/vyvoj\",\"https:\/\/x.com\/martinpesout\"],\"url\":\"https:\/\/igloonet.cz\/blog\/author\/cheetah\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Z\u00e1kladn\u00ed struktur\u00e1ln\u00ed tagy v HTML5 | igloonet blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/","og_locale":"cs_CZ","og_type":"article","og_title":"Z\u00e1kladn\u00ed struktur\u00e1ln\u00ed tagy v HTML5 | igloonet blog","og_description":"Web se neust\u00e1le vyv\u00edj\u00ed. Jazyk HTML 4&nbsp;je tu s&nbsp;n\u00e1mi u\u017e p\u011bknou \u0159adu let a&nbsp;tv\u016frc\u016fm webov\u00e9ho obsahu slou\u017eil dob\u0159e. Av\u0161ak po \u010dase za\u010dali mnoz\u00ed nar\u00e1\u017eet na&nbsp;r\u016fzn\u00e1 omezen\u00ed. Bylo v&nbsp;podstat\u011b jen ot\u00e1zkou \u010dasu, kdy p\u0159ijde nov\u011bj\u0161\u00ed verze - HTML5. Ta s&nbsp;sebou p\u0159in\u00e1\u0161\u00ed nov\u00e9, \u00fa\u010dinn\u011bj\u0161\u00ed a&nbsp;hlavn\u011b jednodu\u0161\u0161\u00ed z\u00e1pisy. D\u00e1le zav\u00e1d\u00ed \u0161irokou \u0161k\u00e1lu funkc\u00ed pro pr\u00e1ci t\u0159eba s&nbsp;formul\u00e1\u0159i, multim\u00e9dii, strukturami a&nbsp;s\u00e9mantikou. Dobr\u00fdch \u010dl\u00e1nk\u016f na&nbsp;t\u00e9ma HTML5 koluj\u00ed po internetu spousty. Nechci se znovu pou\u0161t\u011bt do&nbsp;popisu samotn\u00e9ho jazyka HTML5.&nbsp;V&nbsp;tomto \u010dl\u00e1nku bych se r\u00e1d zam\u011b\u0159il na&nbsp;nov\u00e9 struktur\u00e1ln\u00ed","og_url":"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/","og_site_name":"igloonet blog","article_publisher":"https:\/\/www.facebook.com\/igloonet","article_published_time":"2012-09-17T06:37:01+00:00","article_modified_time":"2014-08-11T22:39:30+00:00","author":"Martin Pe\u0161out","twitter_card":"summary_large_image","twitter_creator":"@martinpesout","twitter_site":"@igloonet","twitter_misc":{"Napsal(a)":"Martin Pe\u0161out","Odhadovan\u00e1 doba \u010dten\u00ed":"7 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/#article","isPartOf":{"@id":"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/"},"author":{"name":"Martin Pe\u0161out","@id":"https:\/\/igloonet.cz\/blog\/#\/schema\/person\/8c731b61fb41d87a83ec347b7b85f17f"},"headline":"Z\u00e1kladn\u00ed struktur\u00e1ln\u00ed tagy v&nbsp;HTML5","datePublished":"2012-09-17T06:37:01+00:00","dateModified":"2014-08-11T22:39:30+00:00","mainEntityOfPage":{"@id":"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/"},"wordCount":1391,"commentCount":1,"publisher":{"@id":"https:\/\/igloonet.cz\/blog\/#organization"},"keywords":["HTML5"],"articleSection":["V\u00fdvoj"],"inLanguage":"cs","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/","url":"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/","name":"Z\u00e1kladn\u00ed struktur\u00e1ln\u00ed tagy v HTML5 | igloonet blog","isPartOf":{"@id":"https:\/\/igloonet.cz\/blog\/#website"},"datePublished":"2012-09-17T06:37:01+00:00","dateModified":"2014-08-11T22:39:30+00:00","breadcrumb":{"@id":"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/#breadcrumb"},"inLanguage":"cs","potentialAction":[{"@type":"ReadAction","target":["https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/igloonet.cz\/blog\/zakladni-strukturalni-tagy-v-html5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"V\u00fdvoj","item":"https:\/\/igloonet.cz\/blog\/rubriky\/vyvoj\/"},{"@type":"ListItem","position":2,"name":"Z\u00e1kladn\u00ed struktur\u00e1ln\u00ed tagy v&nbsp;HTML5"}]},{"@type":"WebSite","@id":"https:\/\/igloonet.cz\/blog\/#website","url":"https:\/\/igloonet.cz\/blog\/","name":"igloonet blog","description":"","publisher":{"@id":"https:\/\/igloonet.cz\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/igloonet.cz\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"cs"},{"@type":"Organization","@id":"https:\/\/igloonet.cz\/blog\/#organization","name":"igloonet","url":"https:\/\/igloonet.cz\/blog\/","logo":{"@type":"ImageObject","inLanguage":"cs","@id":"https:\/\/igloonet.cz\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2015\/07\/RGB_LVPC_igloonet.png","contentUrl":"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2015\/07\/RGB_LVPC_igloonet.png","width":650,"height":465,"caption":"igloonet"},"image":{"@id":"https:\/\/igloonet.cz\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/igloonet","https:\/\/x.com\/igloonet","https:\/\/instagram.com\/igloonet\/","https:\/\/www.linkedin.com\/company\/igloonet"]},{"@type":"Person","@id":"https:\/\/igloonet.cz\/blog\/#\/schema\/person\/8c731b61fb41d87a83ec347b7b85f17f","name":"Martin Pe\u0161out","image":{"@type":"ImageObject","inLanguage":"cs","@id":"https:\/\/igloonet.cz\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/032ee2fb90b35a9a451f30dac27d46caf09d97dea956a64a208abc47dfca3251?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/032ee2fb90b35a9a451f30dac27d46caf09d97dea956a64a208abc47dfca3251?s=96&d=retro&r=g","caption":"Martin Pe\u0161out"},"description":"Jsem brn\u011bnsk\u00fd UI v\u00fdvoj\u00e1\u0159 p\u011bkn\u00e9ho frontendu. Od mali\u010dka si potrp\u00edm na detail, ale p\u0159itom kladu d\u016fraz na jednoduchost a p\u0159ehlednost. Zast\u00e1v\u00e1m n\u00e1zor, \u017ee jednodu\u0161\u0161\u00ed weby jsou ty nejkr\u00e1sn\u011bj\u0161\u00ed.","sameAs":["https:\/\/igloonet.cz\/vyvoj","https:\/\/x.com\/martinpesout"],"url":"https:\/\/igloonet.cz\/blog\/author\/cheetah\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/posts\/1663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/comments?post=1663"}],"version-history":[{"count":2,"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/posts\/1663\/revisions"}],"predecessor-version":[{"id":2261,"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/posts\/1663\/revisions\/2261"}],"wp:attachment":[{"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/media?parent=1663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/categories?post=1663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/tags?post=1663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}