{"id":2162,"date":"2011-08-21T19:00:39","date_gmt":"2011-08-21T21:00:39","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=2162"},"modified":"2011-08-21T19:00:39","modified_gmt":"2011-08-21T21:00:39","slug":"html5-diferenca-de-section-e-article","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/html\/html5-diferenca-de-section-e-article","title":{"rendered":"HTML5: Diferen\u00e7a de section e article"},"content":{"rendered":"

Uma das grandes novidades introduzidas pelas especifica\u00e7\u00f5es da HTML5<\/strong> s\u00e3o os elementos SECTION<\/code> e ARTICLE<\/code>. Esses dois novos elementos que representam alguns problemas sem\u00e2nticos relativos \u00e0 sua utiliza\u00e7\u00e3o. A maioria dos desenvolvedores web se confundem com os elementos de SECTION<\/code> e ARTICLE<\/code>. Tentarei nesse artigo descrever a sem\u00e2ntica desses elementos.
\n<\/p>\n

Elemento section<\/h2>\n

A se\u00e7\u00e3o (elemento SECTION<\/code> ) \u00e9 uma parte mais gen\u00e9rica de um documento. \u00c9 geralmente usado para conter outras partes de sua p\u00e1gina. Como o pr\u00f3prio nome diz, ele pode conter qualquer tipo de conte\u00fado. Em um sentido mais amplo do termo, este elemento \u00e9 uma vers\u00e3o mais sem\u00e2ntica de uma div (que significa “divis\u00e3o”). Outro uso comum deste elemento est\u00e1 relacionado a estrutura do conte\u00fado. O objetivo desse elemento \u00e9 marcar uma se\u00e7\u00e3o da p\u00e1gina<\/strong>. Se\u00e7\u00e3o pode ser um grupo de conte\u00fado de um assunto espec\u00edfico.<\/p>\n

Artigo sobre Como usar o elemento SECTION do HTML5<\/a>.<\/p>\n

Exemplo:<\/strong><\/p>\n

\r\n<section id="ch1">\r\n  <header>\r\n    <hgroup>\r\n      <h1>Titulo<\/h1>\r\n      <h2>Descri\u00e7\u00e3o<\/h2>\r\n    <\/hgroup>\r\n  <\/header>\r\n  <!--conte\u00fado-->\r\n  <footer>\r\n    <!--rodap\u00e9 -->\r\n  <\/footer>\r\n<\/section>\r\n<\/pre>\n
Elemento article<\/h2>\n
Ao contr\u00e1rio de se\u00e7\u00e3o, artigo \u00e9 um componente mais espec\u00edfico. Sua finalidade \u00e9 envolver os principais conte\u00fados do seu documento em se\u00e7\u00f5es l\u00f3gicas. Entradas de blog, artigos, o conte\u00fado da p\u00e1gina podem ser inclu\u00eddos dentro deste elemento. Combinado com o elemento SECTION<\/code>, que completa a estrutura geral de um documento HTML5.<\/p>\n
Exemplo usando os dois elementos.<\/strong><\/p>\n
\r\n<section id="ch1">\r\n  <header>\r\n    <hgroup>\r\n      <h1>T\u00edtulo<\/h1>\r\n      <h2>Descri\u00e7\u00e3o<\/h2>\r\n    <\/hgroup>\r\n  <\/header>\r\n  <article>\r\n    <!--conte\u00fado-->\r\n  <\/article>\r\n  <footer>\r\n    <!--rodap\u00e9-->\r\n  <\/footer>\r\n<\/section>\r\n<\/pre>\n
Podemos usar esses elementos da seguinte forma tamb\u00e9m:
\nObserve o uso do elemento hgroup<\/code> que serve para agrupar os elementos de H1<\/code> a H6<\/code><\/p>\n
\r\n<article>\r\n <hgroup>\r\n   <h1>T\u00edtulo do artigo<\/h1>\r\n   <h2>subt\u00edtulo do artigo<\/h2>\r\n <\/hgroup>\r\n   <p>par\u00e1grafo...<\/p>\r\n <section>\r\n  <h3>T\u00edtulo da primeira se\u00e7\u00e3o<\/h3>\r\n  <p>Conte\u00fado da primeira se\u00e7\u00e3o<\/p>\r\n <\/section>\r\n\r\n <section>\r\n  <h3>T\u00edtulo da segunda se\u00e7\u00e3o<\/h3>\r\n  <p>Conte\u00fado da segunda se\u00e7\u00e3o<\/p>\r\n <\/section>\r\n<\/article>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Uma das grandes novidades introduzidas pelas especifica\u00e7\u00f5es da HTML5 s\u00e3o os elementos SECTION e ARTICLE. Esses dois novos elementos que representam alguns problemas sem\u00e2nticos relativos \u00e0 sua utiliza\u00e7\u00e3o. A maioria dos desenvolvedores web se confundem com os elementos de SECTION e ARTICLE. Tentarei nesse artigo descrever a sem\u00e2ntica desses elementos.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59],"tags":[],"class_list":["post-2162","post","type-post","status-publish","format-standard","hentry","category-html"],"yoast_head":"\nHTML5: Diferen\u00e7a de section e article<\/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:\/\/www.kadunew.com\/blog\/html\/html5-diferenca-de-section-e-article\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5: Diferen\u00e7a de section e article\" \/>\n<meta property=\"og:description\" content=\"Uma das grandes novidades introduzidas pelas especifica\u00e7\u00f5es da HTML5 s\u00e3o os elementos SECTION e ARTICLE. Esses dois novos elementos que representam alguns problemas sem\u00e2nticos relativos \u00e0 sua utiliza\u00e7\u00e3o. A maioria dos desenvolvedores web se confundem com os elementos de SECTION e ARTICLE. Tentarei nesse artigo descrever a sem\u00e2ntica desses elementos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/html\/html5-diferenca-de-section-e-article\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2011-08-21T21:00:39+00:00\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/html5-diferenca-de-section-e-article\",\"url\":\"https:\/\/www.kadunew.com\/blog\/html\/html5-diferenca-de-section-e-article\",\"name\":\"HTML5: Diferen\u00e7a de section e article\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"datePublished\":\"2011-08-21T21:00:39+00:00\",\"dateModified\":\"2011-08-21T21:00:39+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/html5-diferenca-de-section-e-article#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/html\/html5-diferenca-de-section-e-article\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/html5-diferenca-de-section-e-article#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/html\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5: Diferen\u00e7a de section e article\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5: Diferen\u00e7a de section e article","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:\/\/www.kadunew.com\/blog\/html\/html5-diferenca-de-section-e-article","og_locale":"pt_BR","og_type":"article","og_title":"HTML5: Diferen\u00e7a de section e article","og_description":"Uma das grandes novidades introduzidas pelas especifica\u00e7\u00f5es da HTML5 s\u00e3o os elementos SECTION e ARTICLE. Esses dois novos elementos que representam alguns problemas sem\u00e2nticos relativos \u00e0 sua utiliza\u00e7\u00e3o. A maioria dos desenvolvedores web se confundem com os elementos de SECTION e ARTICLE. Tentarei nesse artigo descrever a sem\u00e2ntica desses elementos.","og_url":"https:\/\/www.kadunew.com\/blog\/html\/html5-diferenca-de-section-e-article","og_site_name":"KADUNEW","article_published_time":"2011-08-21T21:00:39+00:00","author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/html\/html5-diferenca-de-section-e-article","url":"https:\/\/www.kadunew.com\/blog\/html\/html5-diferenca-de-section-e-article","name":"HTML5: Diferen\u00e7a de section e article","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"datePublished":"2011-08-21T21:00:39+00:00","dateModified":"2011-08-21T21:00:39+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/html\/html5-diferenca-de-section-e-article#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/html\/html5-diferenca-de-section-e-article"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/html\/html5-diferenca-de-section-e-article#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/www.kadunew.com\/blog\/category\/html"},{"@type":"ListItem","position":3,"name":"HTML5: Diferen\u00e7a de section e article"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2162"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=2162"}],"version-history":[{"count":7,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2162\/revisions"}],"predecessor-version":[{"id":2169,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2162\/revisions\/2169"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=2162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=2162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=2162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}