{"id":166,"date":"2019-01-17T21:10:34","date_gmt":"2019-01-17T19:10:34","guid":{"rendered":"http:\/\/tutorial.bernatcortina.cat\/?page_id=166"},"modified":"2019-01-17T21:10:34","modified_gmt":"2019-01-17T19:10:34","slug":"seccions-del-contingut","status":"publish","type":"page","link":"https:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/","title":{"rendered":"Seccions del contingut"},"content":{"rendered":"<p style=\"text-align: justify;\">Sempre que un document comen\u00e7a a cr\u00e9ixer en contingut, pot ser convenient o incl\u00fas necessari dividir-lo en seccions.<\/p>\n<p style=\"text-align: justify;\"><a href=\"http:\/\/www.htmlquick.com\/es\/reference\/tags.html#sections\">llista d&#8217;elements d&#8217;HTML<\/a><\/p>\n<h1 style=\"text-align: justify;\">Etiquetes sem\u00e0ntiques HTML5<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-167\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1.jpg\" alt=\"\" width=\"600\" height=\"338\" \/><\/h1>\n<h1 style=\"text-align: justify;\">Element header<\/h1>\n<p style=\"text-align: justify;\">L\u2019etiqueta header \u00e9s la forma de definir l\u2019encap\u00e7alament de la p\u00e0gina HTML. Pot contenir alguns elements de cap\u00e7alera, per\u00f2 tamb\u00e9 altres elements com un logotip, cap\u00e7aleres de secci\u00f3 embolicats, un formulari de recerca, i aix\u00ed successivament.<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-169\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-1.png\" alt=\"\" width=\"547\" height=\"134\" \/><\/p>\n<h1 style=\"text-align: justify;\">Element nav<\/h1>\n<p style=\"text-align: justify;\">L\u2019etiqueta nav \u00e9s\u00a0 la que s\u2019ocupa de definir prop\u00f2sits de navegaci\u00f3. Representa una secci\u00f3 de la p\u00e0gina que enlla\u00e7a a altres p\u00e0gines o parts dins la p\u00e0gina: una secci\u00f3 amb enlla\u00e7os de navegaci\u00f3.<\/p>\n<p style=\"text-align: justify;\">Tant podem trobar-lo a dins de l\u2019element header, com un propi element un cop s\u2019ha tancat el header.<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-170\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-2.png\" alt=\"\" width=\"540\" height=\"204\" \/><\/p>\n<h1 style=\"text-align: justify;\">L\u2019element section<\/h1>\n<p style=\"text-align: justify;\">L&#8217;\u00fas de l&#8217;element section \u00e9s la forma m\u00e9s gen\u00e8rica de <strong>dividir el contingut en diferents seccions<\/strong>. A difer\u00e8ncia d&#8217;altres elements m\u00e9s espec\u00edfics, section nom\u00e9s expressa que el contingut delimitat per les seves etiquetes ha estat agrupat (i separat de la resta del contingut) a causa de la seva <strong>tem\u00e0tica<\/strong>.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-171\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura.png\" alt=\"\" width=\"546\" height=\"130\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-172\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-3.png\" alt=\"\" width=\"1666\" height=\"1126\" \/><\/p>\n<p style=\"text-align: justify;\">Una bona pr\u00e0ctica, \u00e9s <strong>precedir<\/strong> els continguts de section amb una <strong>cap\u00e7alera<\/strong>. Aquesta pr\u00e0ctica pot millorar la llegibilitat i permetre a usuaris i navegadors (i altres processadors de documents) escanejar el document a la recerca de parts d&#8217;inter\u00e8s sense haver de processar tot el text per tal de trobar la informaci\u00f3 que estan buscant.<\/p>\n<h1 style=\"text-align: justify;\">Element article<\/h1>\n<p style=\"text-align: justify;\">L\u2019etiqueta article representa una composici\u00f3 aut\u00f2noma en un document, p\u00e0gina, aplicaci\u00f3 o lloc, que est\u00e0 destinada a ser distribuir de forma independent o reutilitzables.<\/p>\n<p style=\"text-align: justify;\">Aix\u00f2 podria ser un missatge del f\u00f2rum, un article d&#8217;una revista o un diari, una entrada de blog, un objecte, o qualsevol altre element independent del contingut.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-173\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-4.png\" alt=\"\" width=\"572\" height=\"127\" \/><\/p>\n<h1 style=\"text-align: justify;\">Element footer<\/h1>\n<p style=\"text-align: justify;\">L\u2019etiqueta footer marca el contingut que correspon al peu de p\u00e0gina del document.<\/p>\n<p style=\"text-align: justify;\">Un peu de p\u00e0gina sol contenir informaci\u00f3 sobre l&#8217;autor de la secci\u00f3, les dades de drets d&#8217;autor o enlla\u00e7os a documents relacionats.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-174\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-5.png\" alt=\"\" width=\"532\" height=\"139\" \/><\/p>\n<h1 style=\"text-align: justify;\">Encap\u00e7alaments i nivells<\/h1>\n<p style=\"text-align: justify;\">En versions pr\u00e8vies de l&#8217;est\u00e0ndard, els encap\u00e7alaments eren usats per definir seccions. Els navegadors i processadors de documents usaven la informaci\u00f3 prove\u00efda pels encap\u00e7alaments per crear un resum del contingut del document. Amb l&#8217;arribada d&#8217;HTML5 i els seus elements de secci\u00f3, aix\u00f2 ha canviat.<\/p>\n<p style=\"text-align: justify;\">En aquest nou escenari, els elements de secci\u00f3 s\u00f3n els responsables de la divisi\u00f3 del contingut mentre que els <strong>encap\u00e7alaments proveeixen un t\u00edtol<\/strong> per als continguts de cada secci\u00f3. Quan aquest enfocament \u00e9s utilitzat, l\u2019encap\u00e7alament (habitualment un h1) precedeix a tot el contingut en la secci\u00f3 i proveeix una descripci\u00f3 concisa sobre el mateix.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-175\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-6.png\" alt=\"\" width=\"1526\" height=\"1152\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-176\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-7.png\" alt=\"\" width=\"573\" height=\"339\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Ara afegirem una secci\u00f3 al voltant de tot el contingut de l&#8217;exemple anterior, per veure qu\u00e8 passa amb l\u2019encap\u00e7alament i els seus nivells.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-177\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-8.png\" alt=\"\" width=\"1894\" height=\"1268\" \/><\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-178\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-9.png\" alt=\"\" width=\"666\" height=\"369\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify;\">Com veus, els encap\u00e7alaments de les seccions que cont\u00e9 per la secci\u00f3 exterior (&#8220;Geografia&#8221; i &#8220;Poblaci\u00f3&#8221;) s\u00f3n ara de nivell dos. Aix\u00f2 t\u00e9 sentit ja que tots dos s\u00f3n <strong>sub-t\u00edtols del primer encap\u00e7alament<\/strong>. Per\u00f2 <strong>HTML5 no requereix que les coses siguin aix\u00ed.<\/strong> Una cap\u00e7alera h1 \u00e9s el principal t\u00edtol de la secci\u00f3 en la qual es troba, i no del document sencer, de manera que els autors s\u00f3n <strong>lliures de fer servir una o altra configuraci\u00f3<\/strong>.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-179\" src=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1.gif\" alt=\"\" width=\"219\" height=\"258\" \/><\/p>\n<h1 style=\"text-align: justify;\">Element main<\/h1>\n<p style=\"text-align: justify;\">L\u2019element main descriu el <strong>contingut principal d\u2019una p\u00e0gina<\/strong>.<\/p>\n<p style=\"text-align: justify;\">El prop\u00f2sit principal d&#8217;aquesta etiqueta \u00e9s des d&#8217;un punt de vista d&#8217;accessibilitat, ja que ajuda a que tecnologies assistencials puguin identificar on comen\u00e7a el contingut principal de la p\u00e0gina i on acaba.<\/p>\n<p style=\"text-align: justify;\"><strong>Segons l&#8217;especificaci\u00f3<\/strong>: l&#8217;element main representa el contingut principal del cos (body) d&#8217;un document.<\/p>\n<p style=\"text-align: justify;\">L\u2019element main nom\u00e9s pot ser usat una sola vegada per p\u00e0gina, cosa que sembla bastant obvi si pensem seu prop\u00f2sit. Utilitza m\u00e9s d&#8217;un element main, far\u00e0 que el nostre HTML sigui v\u00e0lid per a la W3C.<\/p>\n<p style=\"text-align: justify;\"><strong>Aquest element no pot ser fill de cap dels seg\u00fcents: header, nav, article, aside i footer.<\/strong><\/p>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/www.w3schools.com\/html\/html5_semantic_elements.asp\">Elements sem\u00e0ntics HTML5<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sempre que un document comen\u00e7a a cr\u00e9ixer en contingut, pot ser convenient o incl\u00fas necessari dividir-lo en seccions. llista d&#8217;elements d&#8217;HTML Etiquetes sem\u00e0ntiques HTML5 Element header L\u2019etiqueta header \u00e9s la forma de definir l\u2019encap\u00e7alament de la p\u00e0gina HTML. Pot contenir alguns elements de cap\u00e7alera, per\u00f2 tamb\u00e9 altres elements com un logotip, cap\u00e7aleres de secci\u00f3 embolicats, &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/\" class=\"more-link\">Continua llegint <span class=\"screen-reader-text\">\u00abSeccions del contingut\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-166","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Seccions del contingut | HTML &amp; CSS<\/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:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Seccions del contingut | HTML &amp; CSS\" \/>\n<meta property=\"og:description\" content=\"Sempre que un document comen\u00e7a a cr\u00e9ixer en contingut, pot ser convenient o incl\u00fas necessari dividir-lo en seccions. llista d&#8217;elements d&#8217;HTML Etiquetes sem\u00e0ntiques HTML5 Element header L\u2019etiqueta header \u00e9s la forma de definir l\u2019encap\u00e7alament de la p\u00e0gina HTML. Pot contenir alguns elements de cap\u00e7alera, per\u00f2 tamb\u00e9 altres elements com un logotip, cap\u00e7aleres de secci\u00f3 embolicats, &hellip; Continua llegint \u00abSeccions del contingut\u00bb\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML &amp; CSS\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/bernatcortina\" \/>\n<meta property=\"og:image\" content=\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@bernatcortina\" \/>\n<meta name=\"twitter:label1\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minuts\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/\",\"url\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/\",\"name\":\"Seccions del contingut | HTML &amp; CSS\",\"isPartOf\":{\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1.jpg\",\"datePublished\":\"2019-01-17T19:10:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/#breadcrumb\"},\"inLanguage\":\"ca\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/#primaryimage\",\"url\":\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1.jpg\",\"contentUrl\":\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inici\",\"item\":\"https:\/\/tutorial.bernatcortina.cat\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Seccions del contingut\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/#website\",\"url\":\"https:\/\/tutorial.bernatcortina.cat\/\",\"name\":\"HTML &amp; CSS\",\"description\":\"Fonaments d&#039;HTML i full d&#039;estils\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tutorial.bernatcortina.cat\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ca\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Seccions del contingut | HTML &amp; CSS","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:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/","og_locale":"ca_ES","og_type":"article","og_title":"Seccions del contingut | HTML &amp; CSS","og_description":"Sempre que un document comen\u00e7a a cr\u00e9ixer en contingut, pot ser convenient o incl\u00fas necessari dividir-lo en seccions. llista d&#8217;elements d&#8217;HTML Etiquetes sem\u00e0ntiques HTML5 Element header L\u2019etiqueta header \u00e9s la forma de definir l\u2019encap\u00e7alament de la p\u00e0gina HTML. Pot contenir alguns elements de cap\u00e7alera, per\u00f2 tamb\u00e9 altres elements com un logotip, cap\u00e7aleres de secci\u00f3 embolicats, &hellip; Continua llegint \u00abSeccions del contingut\u00bb","og_url":"https:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/","og_site_name":"HTML &amp; CSS","article_publisher":"https:\/\/www.facebook.com\/bernatcortina","og_image":[{"url":"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@bernatcortina","twitter_misc":{"Temps estimat de lectura":"3 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/","url":"https:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/","name":"Seccions del contingut | HTML &amp; CSS","isPartOf":{"@id":"https:\/\/tutorial.bernatcortina.cat\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/#primaryimage"},"image":{"@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/#primaryimage"},"thumbnailUrl":"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1.jpg","datePublished":"2019-01-17T19:10:34+00:00","breadcrumb":{"@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/#primaryimage","url":"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1.jpg","contentUrl":"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/seccions-del-contingut\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inici","item":"https:\/\/tutorial.bernatcortina.cat\/"},{"@type":"ListItem","position":2,"name":"Seccions del contingut"}]},{"@type":"WebSite","@id":"https:\/\/tutorial.bernatcortina.cat\/#website","url":"https:\/\/tutorial.bernatcortina.cat\/","name":"HTML &amp; CSS","description":"Fonaments d&#039;HTML i full d&#039;estils","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tutorial.bernatcortina.cat\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"}]}},"_links":{"self":[{"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/pages\/166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/comments?post=166"}],"version-history":[{"count":6,"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/pages\/166\/revisions"}],"predecessor-version":[{"id":184,"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/pages\/166\/revisions\/184"}],"wp:attachment":[{"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/media?parent=166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}