{"id":644,"date":"2024-04-18T21:50:42","date_gmt":"2024-04-19T00:50:42","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=644"},"modified":"2025-11-05T19:41:25","modified_gmt":"2025-11-05T22:41:25","slug":"container-tags-html","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/container-tags-html\/","title":{"rendered":"Container tags HTML"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Container tags HTML<\/strong>: Ao construir uma p\u00e1gina web, precisamos mais do que apenas elementos de texto e imagem; precisamos de <strong>estrutura<\/strong> e <strong>organiza\u00e7\u00e3o<\/strong>. As <strong>Container Tags<\/strong> (ou Tags Cont\u00eainer) em HTML5 desempenham esse papel, agindo como os <strong>compartimentos l\u00f3gicos<\/strong> que agrupam e d\u00e3o significado ao conte\u00fado.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Elas s\u00e3o as &#8220;paredes&#8221; e os &#8220;tetos&#8221; que delimitam \u00e1reas distintas da sua p\u00e1gina, fornecendo uma <strong>organiza\u00e7\u00e3o sem\u00e2ntica<\/strong> que \u00e9 vital para:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Acessibilidade:<\/strong> Leitores de tela podem navegar pela estrutura.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>SEO:<\/strong> Mecanismos de busca entendem a hierarquia do conte\u00fado.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Manuten\u00e7\u00e3o:<\/strong> Outros desenvolvedores conseguem ler e modificar o c\u00f3digo facilmente.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Neste artigo, vamos explorar as principais tags cont\u00eainer do HTML5, focando em suas fun\u00e7\u00f5es sem\u00e2nticas e nas melhores pr\u00e1ticas de uso.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">\ud83e\udde0 Entendendo a Sem\u00e2ntica em HTML5<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O conceito de <strong>Sem\u00e2ntica<\/strong> refere-se ao significado. No HTML, uma tag \u00e9 sem\u00e2ntica quando ela descreve o tipo de conte\u00fado que est\u00e1 agrupando.<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Tag<\/strong><\/td><td><strong>\u00c9 Sem\u00e2ntica?<\/strong><\/td><td><strong>Uso Recomendado<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong><code>&lt;h1&gt;<\/code><\/strong><\/td><td>Sim<\/td><td>Diz que o conte\u00fado \u00e9 o t\u00edtulo principal.<\/td><\/tr><tr><td><strong><code>&lt;section&gt;<\/code><\/strong><\/td><td>Sim<\/td><td>Diz que o conte\u00fado \u00e9 uma se\u00e7\u00e3o tem\u00e1tica.<\/td><\/tr><tr><td><strong><code>&lt;div&gt;<\/code><\/strong><\/td><td>N\u00e3o<\/td><td>\u00c9 apenas um recipiente gen\u00e9rico, sem significado.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">\ud83e\uddf1 As Principais Container Tags Estruturais<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Essas tags definem as \u00e1reas principais e l\u00f3gicas de qualquer layout de p\u00e1gina moderno.<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Tag<\/strong><\/td><td><strong>Fun\u00e7\u00e3o e Exemplo Did\u00e1tico<\/strong><\/td><td><strong>Exemplo de C\u00f3digo<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong><code>&lt;header&gt;<\/code><\/strong><\/td><td><strong>O Cabe\u00e7alho:<\/strong> Cont\u00e9m informa\u00e7\u00f5es introdut\u00f3rias ou links de navega\u00e7\u00e3o. Geralmente inclui o logo e o menu principal.<\/td><td><code>&lt;header&gt;&lt;h1&gt;Meu Site&lt;\/h1&gt;&lt;nav&gt;...&lt;\/nav&gt;&lt;\/header&gt;<\/code><\/td><\/tr><tr><td><strong><code>&lt;nav&gt;<\/code><\/strong><\/td><td><strong>A Navega\u00e7\u00e3o:<\/strong> Agrupa os principais links de navega\u00e7\u00e3o para outras p\u00e1ginas ou se\u00e7\u00f5es do site.<\/td><td><code>&lt;nav&gt;&lt;ul&gt;&lt;li&gt;Home&lt;\/li&gt;...&lt;\/ul&gt;&lt;\/nav&gt;<\/code><\/td><\/tr><tr><td><strong><code>&lt;main&gt;<\/code><\/strong><\/td><td><strong>O Conte\u00fado Principal:<\/strong> Cont\u00e9m o conte\u00fado exclusivo e central do documento (deve haver <strong>apenas um<\/strong> por p\u00e1gina e n\u00e3o deve ser aninhado em <code>&lt;header&gt;<\/code>, <code>&lt;footer&gt;<\/code>, <code>&lt;nav&gt;<\/code> ou <code>&lt;aside&gt;<\/code>).<\/td><td><code>&lt;main&gt;&lt;section&gt;...&lt;\/section&gt;&lt;\/main&gt;<\/code><\/td><\/tr><tr><td><strong><code>&lt;aside&gt;<\/code><\/strong><\/td><td><strong>Conte\u00fado \u00e0 Parte:<\/strong> Conte\u00fado relacionado ao principal, mas que pode ser considerado tangencial ou secund\u00e1rio (ex: barras laterais, blocos de an\u00fancios).<\/td><td><code>&lt;aside&gt;&lt;h3&gt;T\u00f3picos Relacionados&lt;\/h3&gt;...&lt;\/aside&gt;<\/code><\/td><\/tr><tr><td><strong><code>&lt;footer&gt;<\/code><\/strong><\/td><td><strong>O Rodap\u00e9:<\/strong> Cont\u00e9m informa\u00e7\u00f5es finais, como direitos autorais, links para pol\u00edticas de privacidade ou informa\u00e7\u00f5es de contato.<\/td><td><code>&lt;footer&gt;&lt;p&gt;&amp;copy; 2024&lt;\/p&gt;&lt;\/footer&gt;<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">\ud83d\udcdd Container Tags de Conte\u00fado Tem\u00e1tico<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Essas tags s\u00e3o usadas para quebrar o conte\u00fado do <code>&lt;main&gt;<\/code> em unidades l\u00f3gicas.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">1. <code>&lt;section&gt;<\/code> (Se\u00e7\u00e3o Tem\u00e1tica)<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Fun\u00e7\u00e3o:<\/strong> Representa uma <strong>se\u00e7\u00e3o tem\u00e1tica gen\u00e9rica<\/strong> de um documento, como um cap\u00edtulo, uma aba ou uma se\u00e7\u00e3o de introdu\u00e7\u00e3o\/contato.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Regra de Ouro:<\/strong> Uma <code>&lt;section><\/code> geralmente deve ser identificada por um t\u00edtulo (<code>&lt;h1><\/code> a <code>&lt;h6><\/code>).<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Exemplo:<\/strong> Uma se\u00e7\u00e3o &#8220;Sobre N\u00f3s&#8221; ou uma se\u00e7\u00e3o de &#8220;Recursos&#8221; em uma p\u00e1gina inicial.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">2. <code>&lt;article&gt;<\/code> (Conte\u00fado Independente)<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Fun\u00e7\u00e3o:<\/strong> Representa um <strong>conte\u00fado independente e aut\u00f4nomo<\/strong> que faria sentido ser distribu\u00eddo em outro lugar (ex: post de blog, artigo de not\u00edcia, coment\u00e1rio de usu\u00e1rio).<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Regra de Ouro:<\/strong> Um <code>&lt;article><\/code> deve ter significado completo por si s\u00f3, mesmo fora do contexto da p\u00e1gina.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Exemplo:<\/strong> Uma lista de posts de blog usaria v\u00e1rios <code>&lt;article><\/code> dentro de uma <code>&lt;section><\/code>.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">3. <code>&lt;div&gt;<\/code> (O Cont\u00eainer Gen\u00e9rico)<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Fun\u00e7\u00e3o:<\/strong> O container <strong>mais gen\u00e9rico<\/strong> e sem significado sem\u00e2ntico. Usado primariamente para:\n<ul class=\"wp-block-list\">\n<li><strong>Estiliza\u00e7\u00e3o (CSS):<\/strong> Criar ganchos espec\u00edficos para estilos (com <code>class<\/code> ou <code>id<\/code>).<\/li>\n\n\n\n<li><strong>Scripts (JavaScript):<\/strong> Delimitar \u00e1reas que ser\u00e3o manipuladas por scripts.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Melhor Pr\u00e1tica:<\/strong> <strong>Evite usar <code>&lt;div><\/code> em excesso.<\/strong> Sempre pergunte: &#8220;Existe uma tag sem\u00e2ntica mais adequada para isso (<code>&lt;section><\/code>, <code>&lt;nav><\/code>, <code>&lt;article><\/code>)?&#8221; Se a resposta for sim, use a tag sem\u00e2ntica.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">4. <code>&lt;figure&gt;<\/code> e <code>&lt;figcaption&gt;<\/code><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Fun\u00e7\u00e3o:<\/strong> Usadas para agrupar uma figura (imagem, diagrama, bloco de c\u00f3digo, v\u00eddeo) com sua legenda opcional.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Did\u00e1tico:<\/strong> A <code>&lt;figcaption><\/code> fornece a descri\u00e7\u00e3o do conte\u00fado da <code>&lt;figure><\/code>.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Exemplo:<\/strong>HTML<code>&lt;figure> &lt;img src=\"grafico.png\" alt=\"Gr\u00e1fico de vendas anual.\"> &lt;figcaption>Gr\u00e1fico 1.1: Crescimento em 2025.&lt;\/figcaption> &lt;\/figure><\/code><\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">\ud83c\udf1f Benef\u00edcios Cruciais da Estrutura Sem\u00e2ntica<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">A utiliza\u00e7\u00e3o correta das Container tags HTML n\u00e3o \u00e9 apenas uma quest\u00e3o de &#8220;c\u00f3digo limpo&#8221;; ela traz benef\u00edcios pr\u00e1ticos e mensur\u00e1veis:<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Benef\u00edcio<\/strong><\/td><td><strong>Como as Tags Cont\u00eainer Ajudam<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>SEO<\/strong><\/td><td>Os mecanismos de busca conseguem identificar o conte\u00fado prim\u00e1rio (<code>&lt;main&gt;<\/code>, <code>&lt;article&gt;<\/code>) e links de navega\u00e7\u00e3o (<code>&lt;nav&gt;<\/code>), ranqueando a p\u00e1gina com mais precis\u00e3o.<\/td><\/tr><tr><td><strong>Acessibilidade<\/strong><\/td><td>Tecnologias assistivas (leitores de tela) podem usar as tags para permitir que o usu\u00e1rio navegue <strong>diretamente<\/strong> para a se\u00e7\u00e3o desejada (ex: &#8220;V\u00e1 para o Rodap\u00e9&#8221; ou &#8220;V\u00e1 para o Conte\u00fado Principal&#8221;).<\/td><\/tr><tr><td><strong>Manuten\u00e7\u00e3o<\/strong><\/td><td>O c\u00f3digo se torna <strong>autodescritivo<\/strong>. Um novo desenvolvedor entende instantaneamente o prop\u00f3sito de uma <code>&lt;header&gt;<\/code> ou <code>&lt;aside&gt;<\/code>.<\/td><\/tr><tr><td><strong>Estilo (CSS)<\/strong><\/td><td>Proporcionam pontos de ancoragem l\u00f3gicos para o CSS, permitindo aplicar estilos a grandes blocos de conte\u00fado de forma organizada.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">\ud83d\udca1 Dicas Essenciais para o Uso de Containers<\/h2>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Priorize a Sem\u00e2ntica:<\/strong> Sempre use a tag que <strong>melhor descreve<\/strong> o conte\u00fado (<code>&lt;section><\/code>, <code>&lt;article><\/code>, <code>&lt;nav><\/code>) antes de recorrer ao <code>&lt;div><\/code>.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Aninhamento L\u00f3gico:<\/strong> Tags cont\u00eainer podem ser aninhadas, mas mantenha a l\u00f3gica. Por exemplo, voc\u00ea pode ter v\u00e1rios <code>&lt;article><\/code> dentro de uma <code>&lt;section><\/code>.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>T\u00edtulos em Se\u00e7\u00f5es:<\/strong> Evite usar <code>&lt;section><\/code> sem um t\u00edtulo expl\u00edcito que a descreva.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">\u2705 Conclus\u00e3o <strong>Container tags HTML<\/strong><\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">As container tags do HTML5 s\u00e3o a espinha dorsal de um desenvolvimento web de qualidade. Dominar a diferen\u00e7a entre elas \u2014 especialmente saber quando usar <code>&lt;section&gt;<\/code> em vez de <code>&lt;div&gt;<\/code>, ou <code>&lt;article&gt;<\/code> em vez de <code>&lt;p&gt;<\/code> \u2014 \u00e9 o que diferencia um novato de um desenvolvedor que cria p\u00e1ginas <strong>estruturalmente s\u00f3lidas, acess\u00edveis e otimizadas<\/strong> para os desafios da web moderna.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Toda jornada tem um in\u00edcio, e o in\u00edcio para se tornar um desenvolvedor web \u00e9 dominar as seguintes tecnologias, que voc\u00ea encontra aqui mesmo:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/html\"><img decoding=\"async\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.png\" alt=\"HTML\" class=\"wp-image-600\"\/><\/a><figcaption class=\"wp-element-caption\">HTML<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/css\"><img decoding=\"async\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.png\" alt=\"CSS\" class=\"wp-image-702\"\/><\/a><figcaption class=\"wp-element-caption\">CSS<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/javascript\"><img decoding=\"async\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript.png\" alt=\"Javascript\" class=\"wp-image-804\"\/><\/a><figcaption class=\"wp-element-caption\">JavaScript<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">E se voc\u00ea gosta do nosso conte\u00fado, n\u00e3o deixe de contribuir adquirindo os servi\u00e7os e produtos dos nossos apoiadores e empresas que somos associados:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/hostinger.com.br\/?REFERRALCODE=1THIAGO62\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/03\/hostinger.png\" alt=\"Hospedagem Hostinger\" class=\"wp-image-92\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNDYlc\"><img decoding=\"async\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/ofertas-amazon.png\" alt=\"Ofertas Amazon\" class=\"wp-image-1308\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNKmt0\"><img decoding=\"async\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/amazonprime.png\" alt=\"Amazon Prime\" class=\"wp-image-1307\"\/><\/a><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>Container tags HTML: Ao construir uma p\u00e1gina web, precisamos mais do que apenas elementos de&#8230;<\/p>\n","protected":false},"author":1,"featured_media":600,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-644","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","wpcat-6-id"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Container tags HTML - BLOG THIAGO ROSSI<\/title>\n<meta name=\"description\" content=\"Container tags HTML:Neste artigo, vamos explorar as principais container tags em HTML, suas fun\u00e7\u00f5es e como utiliz\u00e1-las para criar p\u00e1ginas ...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thiagorossi.com.br\/blog\/container-tags-html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Container tags HTML - BLOG THIAGO ROSSI\" \/>\n<meta property=\"og:description\" content=\"Container tags HTML:Neste artigo, vamos explorar as principais container tags em HTML, suas fun\u00e7\u00f5es e como utiliz\u00e1-las para criar p\u00e1ginas ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thiagorossi.com.br\/blog\/container-tags-html\/\" \/>\n<meta property=\"og:site_name\" content=\"BLOG THIAGO ROSSI\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-19T00:50:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-05T22:41:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"758\" \/>\n\t<meta property=\"og:image:height\" content=\"426\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Thiago Rossi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thiago Rossi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/container-tags-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/container-tags-html\\\/\"},\"author\":{\"name\":\"Thiago Rossi\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\"},\"headline\":\"Container tags HTML\",\"datePublished\":\"2024-04-19T00:50:42+00:00\",\"dateModified\":\"2025-11-05T22:41:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/container-tags-html\\\/\"},\"wordCount\":927,\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/container-tags-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/html.webp\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/container-tags-html\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/container-tags-html\\\/\",\"name\":\"Container tags HTML - BLOG THIAGO ROSSI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/container-tags-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/container-tags-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/html.webp\",\"datePublished\":\"2024-04-19T00:50:42+00:00\",\"dateModified\":\"2025-11-05T22:41:25+00:00\",\"description\":\"Container tags HTML:Neste artigo, vamos explorar as principais container tags em HTML, suas fun\u00e7\u00f5es e como utiliz\u00e1-las para criar p\u00e1ginas ...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/container-tags-html\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/container-tags-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/container-tags-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/html.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/html.webp\",\"width\":758,\"height\":426,\"caption\":\"HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/container-tags-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Container tags HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"name\":\"THIAGO ROSSI\",\"description\":\"Mais de 20 anos de experi\u00eancia no mercado de TI!\",\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"alternateName\":\"TR | CURSO WEB DEV\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\",\"name\":\"THIAGO ROSSI\",\"alternateName\":\"TR | CURSO WEB DEV\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"width\":300,\"height\":300,\"caption\":\"THIAGO ROSSI\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\",\"name\":\"Thiago Rossi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"caption\":\"Thiago Rossi\"},\"description\":\"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \\\"GDD \u2013 O Guia Definitivo\\\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.\",\"sameAs\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\",\"https:\\\/\\\/instagram.com\\\/thiagorossix86\",\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"],\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/author\\\/thiagorossi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Container tags HTML - BLOG THIAGO ROSSI","description":"Container tags HTML:Neste artigo, vamos explorar as principais container tags em HTML, suas fun\u00e7\u00f5es e como utiliz\u00e1-las para criar p\u00e1ginas ...","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:\/\/thiagorossi.com.br\/blog\/container-tags-html\/","og_locale":"pt_BR","og_type":"article","og_title":"Container tags HTML - BLOG THIAGO ROSSI","og_description":"Container tags HTML:Neste artigo, vamos explorar as principais container tags em HTML, suas fun\u00e7\u00f5es e como utiliz\u00e1-las para criar p\u00e1ginas ...","og_url":"https:\/\/thiagorossi.com.br\/blog\/container-tags-html\/","og_site_name":"BLOG THIAGO ROSSI","article_published_time":"2024-04-19T00:50:42+00:00","article_modified_time":"2025-11-05T22:41:25+00:00","og_image":[{"width":758,"height":426,"url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp","type":"image\/webp"}],"author":"Thiago Rossi","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Thiago Rossi","Est. tempo de leitura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thiagorossi.com.br\/blog\/container-tags-html\/#article","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/container-tags-html\/"},"author":{"name":"Thiago Rossi","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87"},"headline":"Container tags HTML","datePublished":"2024-04-19T00:50:42+00:00","dateModified":"2025-11-05T22:41:25+00:00","mainEntityOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/container-tags-html\/"},"wordCount":927,"publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/container-tags-html\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp","articleSection":["HTML"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/thiagorossi.com.br\/blog\/container-tags-html\/","url":"https:\/\/thiagorossi.com.br\/blog\/container-tags-html\/","name":"Container tags HTML - BLOG THIAGO ROSSI","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/container-tags-html\/#primaryimage"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/container-tags-html\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp","datePublished":"2024-04-19T00:50:42+00:00","dateModified":"2025-11-05T22:41:25+00:00","description":"Container tags HTML:Neste artigo, vamos explorar as principais container tags em HTML, suas fun\u00e7\u00f5es e como utiliz\u00e1-las para criar p\u00e1ginas ...","breadcrumb":{"@id":"https:\/\/thiagorossi.com.br\/blog\/container-tags-html\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thiagorossi.com.br\/blog\/container-tags-html\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/container-tags-html\/#primaryimage","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp","width":758,"height":426,"caption":"HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/thiagorossi.com.br\/blog\/container-tags-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thiagorossi.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Container tags HTML"}]},{"@type":"WebSite","@id":"https:\/\/thiagorossi.com.br\/blog\/#website","url":"https:\/\/thiagorossi.com.br\/blog\/","name":"THIAGO ROSSI","description":"Mais de 20 anos de experi\u00eancia no mercado de TI!","publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"alternateName":"TR | CURSO WEB DEV","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thiagorossi.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/thiagorossi.com.br\/blog\/#organization","name":"THIAGO ROSSI","alternateName":"TR | CURSO WEB DEV","url":"https:\/\/thiagorossi.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","width":300,"height":300,"caption":"THIAGO ROSSI"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/linkedin.com\/in\/thiagox86"]},{"@type":"Person","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87","name":"Thiago Rossi","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","caption":"Thiago Rossi"},"description":"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \"GDD \u2013 O Guia Definitivo\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.","sameAs":["https:\/\/thiagorossi.com.br\/blog","https:\/\/instagram.com\/thiagorossix86","https:\/\/linkedin.com\/in\/thiagox86"],"url":"https:\/\/thiagorossi.com.br\/blog\/author\/thiagorossi\/"}]}},"_links":{"self":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/comments?post=644"}],"version-history":[{"count":2,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/644\/revisions"}],"predecessor-version":[{"id":4315,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/644\/revisions\/4315"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media\/600"}],"wp:attachment":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media?parent=644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}