{"id":629,"date":"2024-04-18T21:48:09","date_gmt":"2024-04-19T00:48:09","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=629"},"modified":"2025-11-05T12:58:29","modified_gmt":"2025-11-05T15:58:29","slug":"html-body","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/html-body\/","title":{"rendered":"HTML body"},"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>HTML body<\/strong>: Se o elemento <code>&lt;head><\/code> representa o c\u00e9rebro da sua p\u00e1gina web, armazenando metadados e instru\u00e7\u00f5es, o elemento <strong><code>&lt;body><\/code><\/strong> \u00e9 o <strong>corpo<\/strong>: a estrutura f\u00edsica onde reside <strong>todo o conte\u00fado vis\u00edvel e interativo<\/strong> para o usu\u00e1rio.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Neste artigo, vamos explorar a fundo o elemento <code>&lt;body&gt;<\/code>, sua fun\u00e7\u00e3o, como ele deve ser estruturado e a import\u00e2ncia da <strong>Sem\u00e2ntica HTML<\/strong> para a acessibilidade, o SEO e a manuten\u00e7\u00e3o do c\u00f3digo.<\/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\uddf1 A Fun\u00e7\u00e3o Central do Elemento HTML body<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O elemento <code>&lt;body&gt;<\/code> define a principal \u00e1rea de visualiza\u00e7\u00e3o de uma p\u00e1gina HTML. Tudo o que o usu\u00e1rio v\u00ea, l\u00ea e interage \u2014 textos, imagens, navega\u00e7\u00f5es, formul\u00e1rios, v\u00eddeos, bot\u00f5es \u2014 deve estar contido dentro das tags <code>&lt;body&gt;<\/code> e <code>&lt;\/body&gt;<\/code>.<\/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\"><strong>A Estrutura Completa:<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n  &lt;title>Corpo do Documento&lt;\/title>\n&lt;\/head>\n&lt;body>\n  &lt;h1>T\u00edtulo Principal Vis\u00edvel&lt;\/h1>\n  &lt;p>Este \u00e9 um par\u00e1grafo de texto.&lt;\/p>\n  &lt;img src=\"logo.png\" alt=\"Logotipo do site\">\n  &lt;\/body>\n&lt;\/html>\n\n<\/code><\/pre>\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\">Atributos Especiais do <code>&lt;body&gt;<\/code> (Opcional)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Embora a estiliza\u00e7\u00e3o e a interatividade moderna sejam geralmente tratadas por CSS e JavaScript, o <code>&lt;body&gt;<\/code> pode aceitar atributos importantes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Atributos Globais:<\/strong> Como <code>class<\/code> e <code>id<\/code>, usados para aplicar estilos ou vincular a scripts.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Manipuladores de Eventos:<\/strong> Atributos para disparar c\u00f3digo JavaScript em eventos espec\u00edficos (embora seja uma pr\u00e1tica antiga).\n<ul class=\"wp-block-list\">\n<li><code>onload<\/code>: Executa um script assim que a p\u00e1gina \u00e9 completamente carregada.<\/li>\n\n\n\n<li><code>onunload<\/code>: Executa um script quando o usu\u00e1rio sai da p\u00e1gina (raramente usado).<\/li>\n<\/ul>\n<\/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\">\ud83d\uddc2\ufe0f Elementos Comuns e a Import\u00e2ncia da Sem\u00e2ntica<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">A chave para um bom c\u00f3digo HTML5 \u00e9 usar o elemento <strong>certo<\/strong> para o prop\u00f3sito <strong>certo<\/strong> \u2013 isso \u00e9 a <strong>Sem\u00e2ntica<\/strong>. Em vez de usar apenas o gen\u00e9rico <code>&lt;div&gt;<\/code>, o HTML5 nos deu tags que definem o <strong>significado<\/strong> do conte\u00fado.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Abaixo, os elementos essenciais, organizados por fun\u00e7\u00e3o:<\/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. Elementos Estruturais (Layout e Sem\u00e2ntica)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">S\u00e3o os blocos que dividem a p\u00e1gina em se\u00e7\u00f5es l\u00f3gicas:<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Elemento<\/strong><\/td><td><strong>Fun\u00e7\u00e3o Sem\u00e2ntica<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong><code>&lt;header&gt;<\/code><\/strong><\/td><td>Cont\u00e9m o cabe\u00e7alho de uma se\u00e7\u00e3o (geralmente logotipo, t\u00edtulo e navega\u00e7\u00e3o principal).<\/td><\/tr><tr><td><strong><code>&lt;nav&gt;<\/code><\/strong><\/td><td>Cont\u00e9m links de navega\u00e7\u00e3o (menus).<\/td><\/tr><tr><td><strong><code>&lt;main&gt;<\/code><\/strong><\/td><td>Cont\u00e9m o <strong>conte\u00fado principal<\/strong> e exclusivo do documento. Deve haver apenas um por p\u00e1gina.<\/td><\/tr><tr><td><strong><code>&lt;section&gt;<\/code><\/strong><\/td><td>Agrupa conte\u00fado tematicamente relacionado.<\/td><\/tr><tr><td><strong><code>&lt;article&gt;<\/code><\/strong><\/td><td>Conte\u00fado aut\u00f4nomo e independente (como um <em>post<\/em> de blog ou uma not\u00edcia).<\/td><\/tr><tr><td><strong><code>&lt;aside&gt;<\/code><\/strong><\/td><td>Conte\u00fado relacionado, mas \u00e0 parte do conte\u00fado principal (como uma barra lateral ou an\u00fancios).<\/td><\/tr><tr><td><strong><code>&lt;footer&gt;<\/code><\/strong><\/td><td>Rodap\u00e9 da se\u00e7\u00e3o ou da p\u00e1gina (contato, direitos autorais, links secund\u00e1rios).<\/td><\/tr><tr><td><strong><code>&lt;div&gt;<\/code><\/strong><\/td><td><strong>Divis\u00e3o gen\u00e9rica.<\/strong> Use-o apenas quando nenhuma tag sem\u00e2ntica for apropriada (\u00e9 um cont\u00eainer neutro para estiliza\u00e7\u00e3o).<\/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<h3 class=\"wp-block-heading\">2. Elementos de N\u00edvel de Bloco (Fluxo de Texto)<\/h3>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Elemento<\/strong><\/td><td><strong>Fun\u00e7\u00e3o<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong><code>&lt;h1&gt;<\/code> a <code>&lt;h6&gt;<\/code><\/strong><\/td><td>T\u00edtulos de diferentes n\u00edveis, estabelecendo a hierarquia do conte\u00fado. <strong>(Did\u00e1tico: Use apenas um <code>&lt;h1&gt;<\/code> por p\u00e1gina)<\/strong>.<\/td><\/tr><tr><td><strong><code>&lt;p&gt;<\/code><\/strong><\/td><td>Par\u00e1grafos de texto.<\/td><\/tr><tr><td><strong><code>&lt;ul&gt;<\/code> e <code>&lt;ol&gt;<\/code><\/strong><\/td><td>Listas N\u00e3o Ordenadas (<code>&lt;ul&gt;<\/code>) e Ordenadas (<code>&lt;ol&gt;<\/code>).<\/td><\/tr><tr><td><strong><code>&lt;table&gt;<\/code><\/strong><\/td><td>Cria uma tabela para dados tabulares.<\/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<h3 class=\"wp-block-heading\">3. Elementos Em Linha (Conte\u00fado Interno)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Estes elementos afetam o conte\u00fado dentro de outros blocos e n\u00e3o causam quebra de linha:<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Elemento<\/strong><\/td><td><strong>Fun\u00e7\u00e3o<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong><code>&lt;a&gt;<\/code><\/strong><\/td><td>Links (\u00e2ncoras) para navega\u00e7\u00e3o.<\/td><\/tr><tr><td><strong><code>&lt;img&gt;<\/code><\/strong><\/td><td>Inser\u00e7\u00e3o de imagens.<\/td><\/tr><tr><td><strong><code>&lt;span&gt;<\/code><\/strong><\/td><td>Cont\u00eainer gen\u00e9rico para elementos em linha (neutro para estiliza\u00e7\u00e3o).<\/td><\/tr><tr><td><strong><code>&lt;strong&gt;<\/code><\/strong><\/td><td>Aplica forte import\u00e2ncia ao texto (sem\u00e2ntica).<\/td><\/tr><tr><td><strong><code>&lt;em&gt;<\/code><\/strong><\/td><td>Enfatiza o texto (sem\u00e2ntica).<\/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<h3 class=\"wp-block-heading\">4. Elementos de Formul\u00e1rio<\/h3>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Elemento<\/strong><\/td><td><strong>Fun\u00e7\u00e3o<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong><code>&lt;form&gt;<\/code><\/strong><\/td><td>Cont\u00eainer para todos os controles de formul\u00e1rio.<\/td><\/tr><tr><td><strong><code>&lt;input&gt;<\/code><\/strong><\/td><td>Campos de entrada de dados (texto, senha, data, etc.).<\/td><\/tr><tr><td><strong><code>&lt;label&gt;<\/code><\/strong><\/td><td>R\u00f3tulo (descri\u00e7\u00e3o) para um campo de formul\u00e1rio, crucial para acessibilidade.<\/td><\/tr><tr><td><strong><code>&lt;button&gt;<\/code><\/strong><\/td><td>Bot\u00f5es (para envio, reset ou a\u00e7\u00f5es via JavaScript).<\/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\udcc8 O <code>&lt;body&gt;<\/code> e a Otimiza\u00e7\u00e3o para SEO e Acessibilidade<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">A forma como voc\u00ea estrutura o conte\u00fado dentro do <code>&lt;body&gt;<\/code> \u00e9 o que realmente define a qualidade da sua p\u00e1gina para motores de busca e usu\u00e1rios com necessidades especiais.<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Hierarquia de T\u00edtulos (SEO):<\/strong> A ordem correta dos t\u00edtulos (<code>&lt;h1><\/code> seguido por <code>&lt;h2><\/code>, <code>&lt;h3><\/code>, etc.) ajuda os rob\u00f4s a entenderem a <strong>estrutura do t\u00f3pico<\/strong> e a priorizarem o conte\u00fado.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Sem\u00e2ntica (Acessibilidade e SEO):<\/strong> O uso de tags como <code>&lt;nav><\/code>, <code>&lt;main><\/code> e <code>&lt;article><\/code> permite que leitores de tela e rob\u00f4s de busca identifiquem rapidamente o <strong>papel<\/strong> de cada se\u00e7\u00e3o, melhorando a navega\u00e7\u00e3o e a indexa\u00e7\u00e3o.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Leitura e Escaneabilidade:<\/strong> Uma estrutura l\u00f3gica (com uso adequado de par\u00e1grafos, listas e quebras de se\u00e7\u00e3o) facilita a leitura e aumenta a reten\u00e7\u00e3o do usu\u00e1rio, um fator positivo de ranqueamento.<\/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\">\u2699\ufe0f Boas Pr\u00e1ticas de Estrutura no <code>&lt;body&gt;<\/code><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Use Sem\u00e2ntica, N\u00e3o Apenas <code>&lt;div><\/code>:<\/strong> Sempre opte por tags sem\u00e2nticas (<code>&lt;section><\/code>, <code>&lt;nav><\/code>, <code>&lt;header><\/code>) em vez do <code>&lt;div><\/code> sempre que houver um significado apropriado para o conte\u00fado.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Apenas Um <code>&lt;h1><\/code>:<\/strong> Idealmente, use apenas um <code>&lt;h1><\/code> por p\u00e1gina para identificar o t\u00f3pico principal do documento.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Ordem de Conte\u00fado:<\/strong> Coloque o conte\u00fado mais importante e relevante (aquele que resolve a inten\u00e7\u00e3o do usu\u00e1rio) no topo do <code>&lt;body><\/code>.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Valida\u00e7\u00e3o Constante:<\/strong> Use o validador HTML do W3C para garantir que todas as suas tags estejam aninhadas corretamente, abertas e fechadas sem erros.<\/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\">\u2705 Conclus\u00e3o HTML body<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O <strong><code>&lt;body&gt;<\/code><\/strong> \u00e9 o cora\u00e7\u00e3o da experi\u00eancia do usu\u00e1rio na web. Ao entender a fun\u00e7\u00e3o de seus elementos e dominar a <strong>sem\u00e2ntica do HTML5<\/strong>, voc\u00ea estar\u00e1 apto a criar p\u00e1ginas web que s\u00e3o n\u00e3o apenas <strong>visualmente agrad\u00e1veis<\/strong>, mas tamb\u00e9m <strong>bem estruturadas, acess\u00edveis e otimizadas<\/strong> para os mecanismos de busca. O dom\u00ednio do <code>&lt;body&gt;<\/code> \u00e9 o passo definitivo para a constru\u00e7\u00e3o de conte\u00fado de alta qualidade.<\/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>HTML body: Se o elemento &lt;head> representa o c\u00e9rebro da sua p\u00e1gina web, armazenando metadados&#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-629","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>HTML body - BLOG THIAGO ROSSI<\/title>\n<meta name=\"description\" content=\"HTML body: Neste artigo, vamos explorar a fundo a tag , sua fun\u00e7\u00e3o, os elementos que podem ser inseridos dentro dela e como ela influencia...\" \/>\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\/html-body\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML body - BLOG THIAGO ROSSI\" \/>\n<meta property=\"og:description\" content=\"HTML body: Neste artigo, vamos explorar a fundo a tag , sua fun\u00e7\u00e3o, os elementos que podem ser inseridos dentro dela e como ela influencia...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thiagorossi.com.br\/blog\/html-body\/\" \/>\n<meta property=\"og:site_name\" content=\"BLOG THIAGO ROSSI\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-19T00:48:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-05T15:58:29+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\\\/html-body\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/html-body\\\/\"},\"author\":{\"name\":\"Thiago Rossi\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\"},\"headline\":\"HTML body\",\"datePublished\":\"2024-04-19T00:48:09+00:00\",\"dateModified\":\"2025-11-05T15:58:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/html-body\\\/\"},\"wordCount\":935,\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/html-body\\\/#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\\\/html-body\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/html-body\\\/\",\"name\":\"HTML body - BLOG THIAGO ROSSI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/html-body\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/html-body\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/html.webp\",\"datePublished\":\"2024-04-19T00:48:09+00:00\",\"dateModified\":\"2025-11-05T15:58:29+00:00\",\"description\":\"HTML body: Neste artigo, vamos explorar a fundo a tag , sua fun\u00e7\u00e3o, os elementos que podem ser inseridos dentro dela e como ela influencia...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/html-body\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/html-body\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/html-body\\\/#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\\\/html-body\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML body\"}]},{\"@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":"HTML body - BLOG THIAGO ROSSI","description":"HTML body: Neste artigo, vamos explorar a fundo a tag , sua fun\u00e7\u00e3o, os elementos que podem ser inseridos dentro dela e como ela influencia...","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\/html-body\/","og_locale":"pt_BR","og_type":"article","og_title":"HTML body - BLOG THIAGO ROSSI","og_description":"HTML body: Neste artigo, vamos explorar a fundo a tag , sua fun\u00e7\u00e3o, os elementos que podem ser inseridos dentro dela e como ela influencia...","og_url":"https:\/\/thiagorossi.com.br\/blog\/html-body\/","og_site_name":"BLOG THIAGO ROSSI","article_published_time":"2024-04-19T00:48:09+00:00","article_modified_time":"2025-11-05T15:58:29+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\/html-body\/#article","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/html-body\/"},"author":{"name":"Thiago Rossi","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87"},"headline":"HTML body","datePublished":"2024-04-19T00:48:09+00:00","dateModified":"2025-11-05T15:58:29+00:00","mainEntityOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/html-body\/"},"wordCount":935,"publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/html-body\/#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\/html-body\/","url":"https:\/\/thiagorossi.com.br\/blog\/html-body\/","name":"HTML body - BLOG THIAGO ROSSI","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/html-body\/#primaryimage"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/html-body\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp","datePublished":"2024-04-19T00:48:09+00:00","dateModified":"2025-11-05T15:58:29+00:00","description":"HTML body: Neste artigo, vamos explorar a fundo a tag , sua fun\u00e7\u00e3o, os elementos que podem ser inseridos dentro dela e como ela influencia...","breadcrumb":{"@id":"https:\/\/thiagorossi.com.br\/blog\/html-body\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thiagorossi.com.br\/blog\/html-body\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/html-body\/#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\/html-body\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thiagorossi.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML body"}]},{"@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\/629","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=629"}],"version-history":[{"count":2,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/629\/revisions"}],"predecessor-version":[{"id":4307,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/629\/revisions\/4307"}],"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=629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}