A estrutura básica de uma página HTML inclui elementos de cabeçalho e metadados que fornecem informações sobre o documento HTML em si. A “cabeça” do documento HTML contém metadados e outros tipos de informações, enquanto o “corpo” contém o conteúdo visível da página. Vamos explorar detalhadamente cada um desses elementos:
1. Elemento
O elemento
</code>:<span class="ez-toc-section-end"></span></h4>
<p>O elemento <code><title></code> define o título do documento, que é exibido na barra de título do navegador ou na guia do navegador. O texto dentro dessa tag fornece uma descrição concisa e significativa do conteúdo da página.</p>
<h4><span class="ez-toc-section" id="i-2"></span><code><meta></code>:<span class="ez-toc-section-end"></span></h4>
<p>Os elementos <code><meta></code> fornecem metadados adicionais sobre o documento HTML. Eles incluem informações como a codificação de caracteres, a descrição da página, palavras-chave relevantes e instruções para os mecanismos de pesquisa. Por exemplo:</p>
<pre><div class="dark bg-gray-950 rounded-md"><div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"description"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"Uma descrição da sua página"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"keywords"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"palavra-chave1, palavra-chave2, palavra-chave3"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"author"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"Nome do Autor"</span>></span>
</code></div></div></pre>
<h4><span class="ez-toc-section" id="i-3"></span><code><link></code>:<span class="ez-toc-section-end"></span></h4>
<p>O elemento <code><link></code> é usado para vincular recursos externos ao documento HTML. Isso pode incluir folhas de estilo CSS, fontes personalizadas, feeds RSS e muito mais. Por exemplo:</p>
<pre><div class="dark bg-gray-950 rounded-md"><div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"estilos.css"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"image/png"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"favicon.png"</span>></span>
</code></div></div></pre>
<h3><span class="ez-toc-section" id="2_Elemento"></span>2. Elemento <code><body></code>:<span class="ez-toc-section-end"></span></h3>
<p>O elemento <code><body></code> contém o conteúdo visível da página HTML. É dentro desta tag que os elementos como texto, imagens, vídeos, formulários e outros elementos são colocados para serem exibidos na página web.</p>
<h3><span class="ez-toc-section" id="Exemplo_de_Estrutura_HTML_Basica"></span>Exemplo de Estrutura HTML Básica:<span class="ez-toc-section-end"></span></h3>
<pre><div class="dark bg-gray-950 rounded-md"><div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"pt-BR"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"description"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"Descrição da página"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"keywords"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"palavra-chave1, palavra-chave2, palavra-chave3"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"author"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"Nome do Autor"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>Título da Página<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"estilos.css"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">header</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Meu Site<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-name">nav</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Página Inicial<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Sobre<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Contato<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"></<span class="hljs-name">nav</span>></span>
<span class="hljs-tag"></<span class="hljs-name">header</span>></span>
<span class="hljs-tag"><<span class="hljs-name">main</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Conteúdo Principal<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Este é um parágrafo de exemplo.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"exemplo.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Imagem de Exemplo"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">main</span>></span>
<span class="hljs-tag"><<span class="hljs-name">footer</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-symbol">©</span> 2024 Meu Site. Todos os direitos reservados.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">footer</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
</code></div></div></pre>
<p>Este exemplo representa a estrutura básica de uma página HTML, com os elementos <code><head></code> e <code><body></code> claramente definidos. A seção <code><head></code> contém metadados e informações sobre o documento, enquanto a seção <code><body></code> contém o conteúdo visível da página, incluindo cabeçalho, navegação, conteúdo principal e rodapé.</p>
</div>
</div>
<h2><span class="ez-toc-section" id="%E2%80%9CMais_Informacoes%E2%80%9D"></span>“Mais Informações”<span class="ez-toc-section-end"></span></h2>
<p><img decoding="async" src="https://meukultura.com/pic/more_info.png" class="center"></p>
<div data-message-author-role="assistant" data-message-id="66a6c122-ca1a-46f2-bcea-ff05161a9014" class="min-h-[20px] text-message flex flex-col items-start gap-3 whitespace-pre-wrap break-words [.text-message+&]:mt-5 overflow-x-auto">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>Claro, vamos expandir ainda mais sobre os elementos de cabeçalho e metadados em HTML, fornecendo informações detalhadas sobre sua utilidade e uso comum:</p>
<h3><span class="ez-toc-section" id="1_Elemento-2"></span>1. Elemento <code><head></code>:<span class="ez-toc-section-end"></span></h3>
<h4><span class="ez-toc-section" id="i-4"></span><code><title></code>:<span class="ez-toc-section-end"></span></h4>
<p>O elemento <code><title></code> é fundamental, pois define o título da página, que é exibido na barra de título do navegador. Um título claro e descritivo não apenas ajuda os usuários a entenderem o conteúdo da página, mas também é importante para os mecanismos de busca ao determinar a relevância do conteúdo para consultas de pesquisa.</p>
<h4><span class="ez-toc-section" id="i-5"></span><code><meta charset="UTF-8"></code>:<span class="ez-toc-section-end"></span></h4>
<p>Este meta tag define a codificação de caracteres do documento como UTF-8, que é amplamente utilizada e suporta uma ampla gama de caracteres especiais de diferentes idiomas. Garantir que a codificação de caracteres esteja corretamente definida é essencial para garantir que o texto seja exibido corretamente em diferentes navegadores e dispositivos.</p>
<h4><span class="ez-toc-section" id="i-6"></span><code><meta name="description" content="Uma descrição da sua página"></code>:<span class="ez-toc-section-end"></span></h4>
<p>A meta tag de descrição fornece uma breve descrição do conteúdo da página. Embora não tenha um impacto direto no posicionamento nos mecanismos de busca, uma descrição bem redigida pode influenciar a decisão dos usuários de clicarem ou não no link nos resultados da pesquisa.</p>
<h4><span class="ez-toc-section" id="i-7"></span><code><meta name="keywords" content="palavra-chave1, palavra-chave2, palavra-chave3"></code>:<span class="ez-toc-section-end"></span></h4>
<p>Embora não seja tão relevante para os mecanismos de busca quanto costumava ser, a meta tag de palavras-chave ainda é usada para indicar os principais tópicos ou temas abordados na página. No entanto, é importante usar palavras-chave relevantes e relacionadas ao conteúdo real da página.</p>
<h4><span class="ez-toc-section" id="i-8"></span><code><meta name="author" content="Nome do Autor"></code>:<span class="ez-toc-section-end"></span></h4>
<p>Esta meta tag permite que os autores identifiquem-se como os criadores do conteúdo da página. Embora não tenha um impacto significativo nos mecanismos de busca, pode ser útil para fins de atribuição e credibilidade.</p>
<h4><span class="ez-toc-section" id="i-9"></span><code><link></code>:<span class="ez-toc-section-end"></span></h4>
<p>O elemento <code><link></code> é usado para vincular recursos externos ao documento HTML. Além de folhas de estilo CSS e ícones, também pode ser usado para especificar a relação entre o documento atual e outros recursos relacionados, como feeds RSS ou versões alternativas do documento.</p>
<h3><span class="ez-toc-section" id="2_Elemento-2"></span>2. Elemento <code><body></code>:<span class="ez-toc-section-end"></span></h3>
<h4><span class="ez-toc-section" id="i-10"></span><code></p>
<header></code>:<span class="ez-toc-section-end"></span></h4>
<p>O elemento <code></p>
<header></code> é usado para representar o cabeçalho da página, que geralmente contém elementos como o logotipo do site, título principal e navegação. Ele fornece uma estrutura semântica para os elementos que compõem o cabeçalho da página.</p>
<h4><span class="ez-toc-section" id="i-11"></span><code></p>
<nav></code>:<span class="ez-toc-section-end"></span></h4>
<p>O elemento <code></p>
<nav></code> é usado para representar uma seção de navegação, que geralmente contém links para outras páginas do site ou seções relevantes. Usar <code></p>
<nav></code> ajuda os navegadores, leitores de tela e mecanismos de busca a entenderem a estrutura de navegação da página.</p>
<h4><span class="ez-toc-section" id="i-12"></span><code><main></code>:<span class="ez-toc-section-end"></span></h4>
<p>O elemento <code><main></code> é usado para envolver o conteúdo principal da página, excluindo cabeçalhos, rodapés, barras laterais e outros conteúdos que são repetitivos em várias páginas do site. Ele fornece uma maneira semântica de identificar o conteúdo principal da página.</p>
<h4><span class="ez-toc-section" id="i-13"></span><code></p>
<footer></code>:<span class="ez-toc-section-end"></span></h4>
<p>O elemento <code></p>
<footer></code> é usado para representar o rodapé da página, que geralmente contém informações de copyright, links para páginas relacionadas, informações de contato e outros elementos que são comuns a todas as páginas do site. Ele fornece uma estrutura semântica para o conteúdo do rodapé.</p>
<h3><span class="ez-toc-section" id="Exemplo_de_Estrutura_HTML_Basica_Continuacao"></span>Exemplo de Estrutura HTML Básica (Continuação):<span class="ez-toc-section-end"></span></h3>
<pre><div class="dark bg-gray-950 rounded-md"><div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"pt-BR"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"description"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"Descrição da página"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"keywords"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"palavra-chave1, palavra-chave2, palavra-chave3"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"author"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"Nome do Autor"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>Título da Página<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"estilos.css"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">header</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Meu Site<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-name">nav</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Página Inicial<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Sobre<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Contato<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"></<span class="hljs-name">nav</span>></span>
<span class="hljs-tag"></<span class="hljs-name">header</span>></span>
<span class="hljs-tag"><<span class="hljs-name">main</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Conteúdo Principal<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Este é um parágrafo de exemplo.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"exemplo.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Imagem de Exemplo"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">main</span>></span>
<span class="hljs-tag"><<span class="hljs-name">footer</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-symbol">©</span> 2024 Meu Site. Todos os direitos reservados.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">footer</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
</code></div></div></pre>
<p>Este exemplo oferece uma visão mais abrangente sobre a estrutura básica de uma página HTML, destacando a importância dos elementos de cabeçalho e metadados na organização e na apresentação do conteúdo da página. Ao usar corretamente esses elementos, os desenvolvedores podem criar páginas HTML acessíveis, semânticas e otimizadas para mecanismos de busca.</p>
</div>
</div>
</p>
<div class="stream-item stream-item-below-post-content"><div class="stream-item-size" style="">
<div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893"
crossorigin="anonymous"></script>
<!-- defults -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3293364314201893"
data-ad-slot="2303082872"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div></div>
</div><!-- .entry-content /-->
<div id="post-extra-info">
<div class="theiaStickySidebar">
<div class="single-post-meta post-meta clearfix"><span class="meta-item last-updated">Última Actualização 26/02/2024</span><div class="tie-alignright"><span class="meta-reading-time meta-item"><span class="tie-icon-bookmark" aria-hidden="true"></span> lido 3 minutos</span> </div></div><!-- .post-meta -->
<div id="share-buttons-top" class="share-buttons share-buttons-top">
<div class="share-links share-centered icons-only share-rounded">
<a href="https://www.facebook.com/sharer.php?u=https://meukultura.com/guia-completo-de-html-2/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}">
<span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span>
</a>
<a href="https://twitter.com/intent/tweet?text=Guia%20Completo%20de%20HTML&url=https://meukultura.com/guia-completo-de-html-2/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}">
<span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://meukultura.com/guia-completo-de-html-2/&title=Guia%20Completo%20de%20HTML" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}">
<span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span>
</a>
<a href="https://api.whatsapp.com/send?text=Guia%20Completo%20de%20HTML%20https://meukultura.com/guia-completo-de-html-2/" rel="external noopener nofollow" title="WhatsApp" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}">
<span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span>
</a> </div><!-- .share-links /-->
</div><!-- .share-buttons /-->
</div>
</div>
<div class="clearfix"></div>
<script id="tie-schema-json" type="application/ld+json">{"@context":"http:\/\/schema.org","@type":"BlogPosting","dateCreated":"2024-02-26T07:32:39+03:00","datePublished":"2024-02-26T07:32:39+03:00","dateModified":"2024-02-26T07:32:39+03:00","headline":"Guia Completo de HTML","name":"Guia Completo de HTML","keywords":[],"url":"https:\/\/meukultura.com\/guia-completo-de-html-2\/","description":"A estrutura b\u00e1sica de uma p\u00e1gina HTML inclui elementos de cabe\u00e7alho e metadados que fornecem informa\u00e7\u00f5es sobre o documento HTML em si. A \"cabe\u00e7a\" do documento HTML cont\u00e9m metadados e outros tipos de i","copyrightYear":"2024","articleSection":"programa\u00e7\u00e3o","articleBody":"A estrutura b\u00e1sica de uma p\u00e1gina HTML inclui elementos de cabe\u00e7alho e metadados que fornecem informa\u00e7\u00f5es sobre o documento HTML em si. A \"cabe\u00e7a\" do documento HTML cont\u00e9m metadados e outros tipos de informa\u00e7\u00f5es, enquanto o \"corpo\" cont\u00e9m o conte\u00fado vis\u00edvel da p\u00e1gina. Vamos explorar detalhadamente cada um desses elementos:1. Elemento :O elemento \u00e9 uma se\u00e7\u00e3o do documento HTML que cont\u00e9m metadados e outras informa\u00e7\u00f5es sobre o documento. Esta se\u00e7\u00e3o n\u00e3o \u00e9 exibida diretamente na p\u00e1gina web, mas fornece dados importantes para os navegadores da web e mecanismos de pesquisa. Alguns dos elementos comuns encontrados dentro da tag incluem::O elemento define o t\u00edtulo do documento, que \u00e9 exibido na barra de t\u00edtulo do navegador ou na guia do navegador. O texto dentro dessa tag fornece uma descri\u00e7\u00e3o concisa e significativa do conte\u00fado da p\u00e1gina.:Os elementos fornecem metadados adicionais sobre o documento HTML. Eles incluem informa\u00e7\u00f5es como a codifica\u00e7\u00e3o de caracteres, a descri\u00e7\u00e3o da p\u00e1gina, palavras-chave relevantes e instru\u00e7\u00f5es para os mecanismos de pesquisa. Por exemplo:htmlCopy code\n\n\n\n:O elemento \u00e9 usado para vincular recursos externos ao documento HTML. Isso pode incluir folhas de estilo CSS, fontes personalizadas, feeds RSS e muito mais. Por exemplo:htmlCopy code\n\n2. Elemento :O elemento cont\u00e9m o conte\u00fado vis\u00edvel da p\u00e1gina HTML. \u00c9 dentro desta tag que os elementos como texto, imagens, v\u00eddeos, formul\u00e1rios e outros elementos s\u00e3o colocados para serem exibidos na p\u00e1gina web.Exemplo de Estrutura HTML B\u00e1sica:htmlCopy code\n\n\n \n \n \n \n T\u00edtulo da P\u00e1gina\n \n\n\n \n Meu Site\n \n \n P\u00e1gina Inicial\n Sobre\n Contato\n \n \n \n \n Conte\u00fado Principal\n Este \u00e9 um par\u00e1grafo de exemplo.\n \n \n \n © 2024 Meu Site. Todos os direitos reservados.\n \n\n\nEste exemplo representa a estrutura b\u00e1sica de uma p\u00e1gina HTML, com os elementos e claramente definidos. A se\u00e7\u00e3o cont\u00e9m metadados e informa\u00e7\u00f5es sobre o documento, enquanto a se\u00e7\u00e3o cont\u00e9m o conte\u00fado vis\u00edvel da p\u00e1gina, incluindo cabe\u00e7alho, navega\u00e7\u00e3o, conte\u00fado principal e rodap\u00e9.\"Mais Informa\u00e7\u00f5es\"\n\nClaro, vamos expandir ainda mais sobre os elementos de cabe\u00e7alho e metadados em HTML, fornecendo informa\u00e7\u00f5es detalhadas sobre sua utilidade e uso comum:1. Elemento ::O elemento \u00e9 fundamental, pois define o t\u00edtulo da p\u00e1gina, que \u00e9 exibido na barra de t\u00edtulo do navegador. Um t\u00edtulo claro e descritivo n\u00e3o apenas ajuda os usu\u00e1rios a entenderem o conte\u00fado da p\u00e1gina, mas tamb\u00e9m \u00e9 importante para os mecanismos de busca ao determinar a relev\u00e2ncia do conte\u00fado para consultas de pesquisa.:Este meta tag define a codifica\u00e7\u00e3o de caracteres do documento como UTF-8, que \u00e9 amplamente utilizada e suporta uma ampla gama de caracteres especiais de diferentes idiomas. Garantir que a codifica\u00e7\u00e3o de caracteres esteja corretamente definida \u00e9 essencial para garantir que o texto seja exibido corretamente em diferentes navegadores e dispositivos.:A meta tag de descri\u00e7\u00e3o fornece uma breve descri\u00e7\u00e3o do conte\u00fado da p\u00e1gina. Embora n\u00e3o tenha um impacto direto no posicionamento nos mecanismos de busca, uma descri\u00e7\u00e3o bem redigida pode influenciar a decis\u00e3o dos usu\u00e1rios de clicarem ou n\u00e3o no link nos resultados da pesquisa.:Embora n\u00e3o seja t\u00e3o relevante para os mecanismos de busca quanto costumava ser, a meta tag de palavras-chave ainda \u00e9 usada para indicar os principais t\u00f3picos ou temas abordados na p\u00e1gina. No entanto, \u00e9 importante usar palavras-chave relevantes e relacionadas ao conte\u00fado real da p\u00e1gina.:Esta meta tag permite que os autores identifiquem-se como os criadores do conte\u00fado da p\u00e1gina. Embora n\u00e3o tenha um impacto significativo nos mecanismos de busca, pode ser \u00fatil para fins de atribui\u00e7\u00e3o e credibilidade.:O elemento \u00e9 usado para vincular recursos externos ao documento HTML. Al\u00e9m de folhas de estilo CSS e \u00edcones, tamb\u00e9m pode ser usado para especificar a rela\u00e7\u00e3o entre o documento atual e outros recursos relacionados, como feeds RSS ou vers\u00f5es alternativas do documento.2. Elemento ::O elemento \u00e9 usado para representar o cabe\u00e7alho da p\u00e1gina, que geralmente cont\u00e9m elementos como o logotipo do site, t\u00edtulo principal e navega\u00e7\u00e3o. Ele fornece uma estrutura sem\u00e2ntica para os elementos que comp\u00f5em o cabe\u00e7alho da p\u00e1gina.:O elemento \u00e9 usado para representar uma se\u00e7\u00e3o de navega\u00e7\u00e3o, que geralmente cont\u00e9m links para outras p\u00e1ginas do site ou se\u00e7\u00f5es relevantes. Usar ajuda os navegadores, leitores de tela e mecanismos de busca a entenderem a estrutura de navega\u00e7\u00e3o da p\u00e1gina.:O elemento \u00e9 usado para envolver o conte\u00fado principal da p\u00e1gina, excluindo cabe\u00e7alhos, rodap\u00e9s, barras laterais e outros conte\u00fados que s\u00e3o repetitivos em v\u00e1rias p\u00e1ginas do site. Ele fornece uma maneira sem\u00e2ntica de identificar o conte\u00fado principal da p\u00e1gina.:O elemento \u00e9 usado para representar o rodap\u00e9 da p\u00e1gina, que geralmente cont\u00e9m informa\u00e7\u00f5es de copyright, links para p\u00e1ginas relacionadas, informa\u00e7\u00f5es de contato e outros elementos que s\u00e3o comuns a todas as p\u00e1ginas do site. Ele fornece uma estrutura sem\u00e2ntica para o conte\u00fado do rodap\u00e9.Exemplo de Estrutura HTML B\u00e1sica (Continua\u00e7\u00e3o):htmlCopy code\n\n\n \n \n \n \n T\u00edtulo da P\u00e1gina\n \n\n\n \n Meu Site\n \n \n P\u00e1gina Inicial\n Sobre\n Contato\n \n \n \n \n Conte\u00fado Principal\n Este \u00e9 um par\u00e1grafo de exemplo.\n \n \n \n © 2024 Meu Site. Todos os direitos reservados.\n \n\n\nEste exemplo oferece uma vis\u00e3o mais abrangente sobre a estrutura b\u00e1sica de uma p\u00e1gina HTML, destacando a import\u00e2ncia dos elementos de cabe\u00e7alho e metadados na organiza\u00e7\u00e3o e na apresenta\u00e7\u00e3o do conte\u00fado da p\u00e1gina. Ao usar corretamente esses elementos, os desenvolvedores podem criar p\u00e1ginas HTML acess\u00edveis, sem\u00e2nticas e otimizadas para mecanismos de busca.","publisher":{"@id":"#Publisher","@type":"Organization","name":"Meu Kultura","logo":{"@type":"ImageObject","url":"https:\/\/meukultura.com\/wp-content\/uploads\/2023\/12\/meu-kultura-high-resolution-logo-transparent-1.png"},"sameAs":["https:\/\/www.facebook.com\/MeuKultura\/"]},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/meukultura.com\/guia-completo-de-html-2\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"admin","url":"https:\/\/meukultura.com\/author\/admin\/"},"image":{"@type":"ImageObject","url":"https:\/\/meukultura.com\/wp-content\/uploads\/2023\/12\/cropped-meu-kultura-high-resolution-logo.png","width":1200,"height":512}}</script>
<div id="share-buttons-bottom" class="share-buttons share-buttons-bottom">
<div class="share-links share-centered icons-only share-rounded">
<a href="https://www.facebook.com/sharer.php?u=https://meukultura.com/guia-completo-de-html-2/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}">
<span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span>
</a>
<a href="https://twitter.com/intent/tweet?text=Guia%20Completo%20de%20HTML&url=https://meukultura.com/guia-completo-de-html-2/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}">
<span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://meukultura.com/guia-completo-de-html-2/&title=Guia%20Completo%20de%20HTML" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}">
<span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span>
</a> </div><!-- .share-links /-->
</div><!-- .share-buttons /-->
</article><!-- #the-post /-->
<div class="post-components">
<div class="prev-next-post-nav container-wrapper media-overlay">
<div class="tie-col-xs-6 prev-post">
<a href="https://meukultura.com/scratch-no-raspberry-pi-aprendizado-interativo/" style="background-image: url(https://meukultura.com/wp-content/uploads/2023/12/cropped-meu-kultura-high-resolution-logo-390x220.png)" class="post-thumb" rel="prev">
<div class="post-thumb-overlay-wrap">
<div class="post-thumb-overlay">
<span class="tie-icon tie-media-icon"></span>
</div>
</div>
</a>
<a href="https://meukultura.com/scratch-no-raspberry-pi-aprendizado-interativo/" rel="prev">
<h3 class="post-title">Scratch no Raspberry Pi: Aprendizado Interativo</h3>
</a>
</div>
<div class="tie-col-xs-6 next-post">
<a href="https://meukultura.com/instalacao-do-go-no-ubuntu-2/" style="background-image: url(https://meukultura.com/wp-content/uploads/2023/12/cropped-meu-kultura-high-resolution-logo-390x220.png)" class="post-thumb" rel="next">
<div class="post-thumb-overlay-wrap">
<div class="post-thumb-overlay">
<span class="tie-icon tie-media-icon"></span>
</div>
</div>
</a>
<a href="https://meukultura.com/instalacao-do-go-no-ubuntu-2/" rel="next">
<h3 class="post-title">Instalação do Go no Ubuntu</h3>
</a>
</div>
</div><!-- .prev-next-post-nav /-->
<div id="related-posts" class="container-wrapper">
<div class="mag-box-title the-global-title">
<h3>Artigos Relacionados</h3>
</div>
<div class="related-posts-list">
<div class="related-item tie-standard">
<a aria-label="Introdução Abrangente ao Python" href="https://meukultura.com/introducao-abrangente-ao-python/" class="post-thumb">
<div class="post-thumb-overlay-wrap">
<div class="post-thumb-overlay">
<span class="tie-icon tie-media-icon"></span>
</div>
</div>
<img width="390" height="220" src="https://meukultura.com/wp-content/uploads/2023/12/cropped-meu-kultura-high-resolution-logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large" alt="" decoding="async" fetchpriority="high" /></a>
<h3 class="post-title"><a href="https://meukultura.com/introducao-abrangente-ao-python/">Introdução Abrangente ao Python</a></h3>
<div class="post-meta clearfix"></div><!-- .post-meta --> </div><!-- .related-item /-->
<div class="related-item tie-standard">
<a aria-label="Manipulação Avançada do DOM" href="https://meukultura.com/manipulacao-avancada-do-dom/" class="post-thumb">
<div class="post-thumb-overlay-wrap">
<div class="post-thumb-overlay">
<span class="tie-icon tie-media-icon"></span>
</div>
</div>
<img width="390" height="220" src="https://meukultura.com/wp-content/uploads/2023/12/cropped-meu-kultura-high-resolution-logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large" alt="" decoding="async" /></a>
<h3 class="post-title"><a href="https://meukultura.com/manipulacao-avancada-do-dom/">Manipulação Avançada do DOM</a></h3>
<div class="post-meta clearfix"></div><!-- .post-meta --> </div><!-- .related-item /-->
<div class="related-item tie-standard">
<a aria-label="Guia PHP para WordPress" href="https://meukultura.com/guia-php-para-wordpress/" class="post-thumb">
<div class="post-thumb-overlay-wrap">
<div class="post-thumb-overlay">
<span class="tie-icon tie-media-icon"></span>
</div>
</div>
<img width="390" height="220" src="https://meukultura.com/wp-content/uploads/2023/12/cropped-meu-kultura-high-resolution-logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large" alt="" decoding="async" /></a>
<h3 class="post-title"><a href="https://meukultura.com/guia-php-para-wordpress/">Guia PHP para WordPress</a></h3>
<div class="post-meta clearfix"></div><!-- .post-meta --> </div><!-- .related-item /-->
<div class="related-item tie-standard">
<a aria-label="Otimizando a Navegação do Site" href="https://meukultura.com/otimizando-a-navegacao-do-site/" class="post-thumb">
<div class="post-thumb-overlay-wrap">
<div class="post-thumb-overlay">
<span class="tie-icon tie-media-icon"></span>
</div>
</div>
<img width="390" height="220" src="https://meukultura.com/wp-content/uploads/2023/12/cropped-meu-kultura-high-resolution-logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large" alt="" decoding="async" loading="lazy" /></a>
<h3 class="post-title"><a href="https://meukultura.com/otimizando-a-navegacao-do-site/">Otimizando a Navegação do Site</a></h3>
<div class="post-meta clearfix"></div><!-- .post-meta --> </div><!-- .related-item /-->
</div><!-- .related-posts-list /-->
</div><!-- #related-posts /-->
</div><!-- .post-components /-->
</div><!-- .main-content -->
</div><!-- .main-content-row /--></div><!-- #content /--><div class="stream-item stream-item-above-footer"><div class="stream-item-size" style="">
<div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893"
crossorigin="anonymous"></script>
<!-- defults -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3293364314201893"
data-ad-slot="2303082872"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div></div>
<footer id="footer" class="site-footer dark-skin dark-widgetized-area">
<div id="footer-widgets-container">
<div class="container">
</div><!-- .container /-->
</div><!-- #Footer-widgets-container /-->
<div id="site-info" class="site-info">
<div class="container">
<div class="tie-row">
<div class="tie-col-md-12">
<div class="copyright-text copyright-text-first"><footer>
<span>
© Direitos autorais 2026, Todos os direitos reservados | <span style="color:red;" class="tie-icon-heart"></span>
| <a href="https://meukultura.com/about-us/">Sobre Nós</a>
| <a href="https://meukultura.com/informacoes-politicas-e-condicoes/">Informações, políticas e condições</a>
| <a href="https://meukultura.com/contact-us/">Entre em Contato</a>
</span>
<br>
<span>
<a href="https://meukultura.com/aviso-legal/">Aviso legal</a>
| <a href="https://meukultura.com/privacy-policy/">Política de Privacidade</a>
| <a href="https://meukultura.com/politica-de-cookies/">Política de cookies</a>
| <a href="https://meukultura.com/terms-and-conditions/">Termos e Condições</a>
| <a href="https://meukultura.com/faq/">Perguntas Frequentes</a>
</span>
</footer></div><ul class="social-icons"><li class="social-icons-item"><a class="social-link facebook-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.facebook.com/MeuKultura/"><span class="tie-social-icon tie-icon-facebook"></span><span class="screen-reader-text">Facebook</span></a></li></ul>
</div><!-- .tie-col /-->
</div><!-- .tie-row /-->
</div><!-- .container /-->
</div><!-- #site-info /-->
</footer><!-- #footer /-->
<div id="share-buttons-mobile" class="share-buttons share-buttons-mobile">
<div class="share-links icons-only">
<a href="https://www.facebook.com/sharer.php?u=https://meukultura.com/guia-completo-de-html-2/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}">
<span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span>
</a>
<a href="https://twitter.com/intent/tweet?text=Guia%20Completo%20de%20HTML&url=https://meukultura.com/guia-completo-de-html-2/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}">
<span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://meukultura.com/guia-completo-de-html-2/&title=Guia%20Completo%20de%20HTML" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}">
<span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span>
</a>
<a href="https://www.tumblr.com/share/link?url=https://meukultura.com/guia-completo-de-html-2/&name=Guia%20Completo%20de%20HTML" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}">
<span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span>
</a>
<a href="https://pinterest.com/pin/create/button/?url=https://meukultura.com/guia-completo-de-html-2/&description=Guia%20Completo%20de%20HTML&media=" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}">
<span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span>
</a>
<a href="https://reddit.com/submit?url=https://meukultura.com/guia-completo-de-html-2/&title=Guia%20Completo%20de%20HTML" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}">
<span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span>
</a>
<a href="fb-messenger://share?app_id=5303202981&display=popup&link=https://meukultura.com/guia-completo-de-html-2/&redirect_uri=https://meukultura.com/guia-completo-de-html-2/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-mob-share-btn messenger-share-btn " data-raw="fb-messenger://share?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}">
<span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span>
</a>
<a href="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link=https://meukultura.com/guia-completo-de-html-2/&redirect_uri=https://meukultura.com/guia-completo-de-html-2/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-desktop-share-btn messenger-share-btn " data-raw="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}">
<span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span>
</a>
<a href="https://api.whatsapp.com/send?text=Guia%20Completo%20de%20HTML%20https://meukultura.com/guia-completo-de-html-2/" rel="external noopener nofollow" title="WhatsApp" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}">
<span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span>
</a>
<a href="https://telegram.me/share/url?url=https://meukultura.com/guia-completo-de-html-2/&text=Guia%20Completo%20de%20HTML" rel="external noopener nofollow" title="Telegram" target="_blank" class="telegram-share-btn " data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}">
<span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">Telegram</span>
</a>
<a href="viber://forward?text=Guia%20Completo%20de%20HTML%20https://meukultura.com/guia-completo-de-html-2/" rel="external noopener nofollow" title="Viber" target="_blank" class="viber-share-btn " data-raw="viber://forward?text={post_title}%20{post_link}">
<span class="share-btn-icon tie-icon-phone"></span> <span class="screen-reader-text">Viber</span>
</a>
<a href="https://line.me/R/msg/text/?Guia%20Completo%20de%20HTML%20https://meukultura.com/guia-completo-de-html-2/" rel="external noopener nofollow" title="Linha" target="_blank" class="line-share-btn " data-raw="https://line.me/R/msg/text/?{post_title}%20{post_link}">
<span class="share-btn-icon tie-icon-line"></span> <span class="screen-reader-text">Linha</span>
</a> </div><!-- .share-links /-->
</div><!-- .share-buttons /-->
<div class="mobile-share-buttons-spacer"></div>
<a id="go-to-top" class="go-to-top-button" href="#go-to-tie-body">
<span class="tie-icon-angle-up"></span>
<span class="screen-reader-text">Botão Voltar ao Topo</span>
</a>
</div><!-- #tie-wrapper /-->
<aside class=" side-aside normal-side dark-skin dark-widgetized-area is-fullwidth appear-from-left" aria-label="Sidebar Secundária" style="visibility: hidden;">
<div data-height="100%" class="side-aside-wrapper has-custom-scroll">
<a href="#" class="close-side-aside remove big-btn">
<span class="screen-reader-text">Fechar</span>
</a><!-- .close-side-aside /-->
<div id="mobile-container">
<div id="mobile-menu" class="">
</div><!-- #mobile-menu /-->
<div id="mobile-social-icons" class="social-icons-widget solid-social-icons">
<ul><li class="social-icons-item"><a class="social-link facebook-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.facebook.com/MeuKultura/"><span class="tie-social-icon tie-icon-facebook"></span><span class="screen-reader-text">Facebook</span></a></li></ul>
</div><!-- #mobile-social-icons /-->
<div id="mobile-search">
<form role="search" method="get" class="search-form" action="https://meukultura.com/">
<label>
<span class="screen-reader-text">Pesquisar por:</span>
<input type="search" class="search-field" placeholder="Pesquisar …" value="" name="s" />
</label>
<input type="submit" class="search-submit" value="Pesquisar" />
</form> </div><!-- #mobile-search /-->
</div><!-- #mobile-container /-->
</div><!-- .side-aside-wrapper /-->
</aside><!-- .side-aside /-->
</div><!-- #tie-container /-->
</div><!-- .background-overlay /-->
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/jannah/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script id="ckyBannerTemplate" type="text/template"><div class="cky-btn-revisit-wrapper cky-revisit-hide" data-cky-tag="revisit-consent" data-tooltip="Consent Preferences" style="background-color:#DC7218"> <button class="cky-btn-revisit" aria-label="Consent Preferences"> <img src="https://meukultura.com/wp-content/plugins/cookie-law-info/lite/frontend/images/revisit.svg" alt="Revisit consent button"> </button></div><div class="cky-consent-container cky-hide" tabindex="0"> <div class="cky-consent-bar" data-cky-tag="notice" style="background-color:#FFFFFF;border-color:#f4f4f4"> <div class="cky-notice"> <p class="cky-title" role="heading" aria-level="2" data-cky-tag="title" style="color:#DC7218">We value your privacy</p><div class="cky-notice-group"> <div class="cky-notice-des" data-cky-tag="description" style="color:#DC7218"> <p>We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic. By clicking "Accept All", you consent to our use of cookies.</p> </div><div class="cky-notice-btn-wrapper" data-cky-tag="notice-buttons"> <button class="cky-btn cky-btn-customize" aria-label="Customize" aria-haspopup="true" aria-controls="ckyPreferenceCenter" data-cky-tag="settings-button" style="color:#DC7218;background-color:transparent;border-color:#DC7218">Customize</button> <button class="cky-btn cky-btn-reject" aria-label="Reject All" data-cky-tag="reject-button" style="color:#DC7218;background-color:transparent;border-color:#DC7218">Reject All</button> <button class="cky-btn cky-btn-accept" aria-label="Accept All" data-cky-tag="accept-button" style="color:#FFFFFF;background-color:#DC7218;border-color:#DC7218">Accept All</button> </div></div></div></div><div class="cky-preference-wrapper" data-cky-tag="detail" style="color:#DC7218;background-color:#FFFFFF;border-color:#f4f4f4"> <div class="cky-preference-center" id="ckyPreferenceCenter"> <div class="cky-preference"> <div class="cky-preference-header"> <span class="cky-preference-title" role="heading" aria-level="2" data-cky-tag="detail-title" style="color:#DC7218">Customize Consent Preferences</span> <button class="cky-btn-close" aria-label="Close" data-cky-tag="detail-close"> <img src="https://meukultura.com/wp-content/plugins/cookie-law-info/lite/frontend/images/close.svg" alt=""> </button> </div><div class="cky-preference-body-wrapper"> <div class="cky-preference-content-wrapper" data-cky-tag="detail-description" style="color:#DC7218"> <p>We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.</p><p>The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. </p><p>We also use third-party cookies that help us analyze how you use this website, store your preferences, and provide the content and advertisements that are relevant to you. These cookies will only be stored in your browser with your prior consent.</p><p>You can choose to enable or disable some or all of these cookies but disabling some of them may affect your browsing experience.</p> </div><div class="cky-accordion-wrapper" data-cky-tag="detail-categories"> <div class="cky-accordion" id="ckyDetailCategorynecessary"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Necessary" data-cky-tag="detail-category-title" style="color:#DC7218">Necessary</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchnecessary"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#DC7218"> <p>Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryfunctional"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Functional" data-cky-tag="detail-category-title" style="color:#DC7218">Functional</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchfunctional"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#DC7218"> <p>Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryanalytics"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Analytics" data-cky-tag="detail-category-title" style="color:#DC7218">Analytics</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchanalytics"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#DC7218"> <p>Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryperformance"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Performance" data-cky-tag="detail-category-title" style="color:#DC7218">Performance</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchperformance"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#DC7218"> <p>Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryadvertisement"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Advertisement" data-cky-tag="detail-category-title" style="color:#DC7218">Advertisement</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchadvertisement"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#DC7218"> <p>Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div> </div></div></div><div class="cky-footer-wrapper"> <span class="cky-footer-shadow"></span> <div class="cky-prefrence-btn-wrapper" data-cky-tag="detail-buttons"> <button class="cky-btn cky-btn-accept" aria-label="Accept All" data-cky-tag="detail-accept-button" style="color:#FFFFFF;background-color:#DC7218;border-color:#DC7218"> Accept All </button> <button class="cky-btn cky-btn-preferences" aria-label="Save My Preferences" data-cky-tag="detail-save-button" style="color:#DC7218;background-color:transparent;border-color:#DC7218"> Save My Preferences </button> <button class="cky-btn cky-btn-reject" aria-label="Reject All" data-cky-tag="detail-reject-button" style="color:#DC7218;background-color:transparent;border-color:#DC7218"> Reject All </button> </div></div></div></div></div></script><div id="reading-position-indicator"></div><div id="is-scroller-outer"><div id="is-scroller"></div></div><div id="fb-root"></div> <div id="tie-popup-search-desktop" class="tie-popup tie-popup-search-wrap" style="display: none;">
<a href="#" class="tie-btn-close remove big-btn light-btn">
<span class="screen-reader-text">Fechar</span>
</a>
<div class="popup-search-wrap-inner">
<div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="Pesquisar">
<form method="get" class="tie-popup-search-form" action="https://meukultura.com/">
<input class="tie-popup-search-input " inputmode="search" type="text" name="s" title="Pesquisar por" autocomplete="off" placeholder="Digite e tecle Enter" />
<button class="tie-popup-search-submit" type="submit">
<span class="tie-icon-search tie-search-icon" aria-hidden="true"></span>
<span class="screen-reader-text">Pesquisar por</span>
</button>
</form>
</div><!-- .pop-up-live-search /-->
</div><!-- .popup-search-wrap-inner /-->
</div><!-- .tie-popup-search-wrap /-->
<div id="tie-popup-search-mobile" class="tie-popup tie-popup-search-wrap" style="display: none;">
<a href="#" class="tie-btn-close remove big-btn light-btn">
<span class="screen-reader-text">Fechar</span>
</a>
<div class="popup-search-wrap-inner">
<div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="Pesquisar">
<form method="get" class="tie-popup-search-form" action="https://meukultura.com/">
<input class="tie-popup-search-input " inputmode="search" type="text" name="s" title="Pesquisar por" autocomplete="off" placeholder="Pesquisar por" />
<button class="tie-popup-search-submit" type="submit">
<span class="tie-icon-search tie-search-icon" aria-hidden="true"></span>
<span class="screen-reader-text">Pesquisar por</span>
</button>
</form>
</div><!-- .pop-up-live-search /-->
</div><!-- .popup-search-wrap-inner /-->
</div><!-- .tie-popup-search-wrap /-->
<script type="module">
import { Workbox } from "https:\/\/meukultura.com\/wp-content\/plugins\/pwa\/wp-includes\/js\/workbox-v7.3.0\/workbox-window.prod.js";
if ( 'serviceWorker' in navigator ) {
window.wp = window.wp || {};
window.wp.serviceWorkerWindow = new Workbox(
"https:\/\/meukultura.com\/wp.serviceworker",
{"scope":"\/"} );
window.wp.serviceWorkerWindow.register();
}
</script>
<script id="wp-hooks-js" src="https://meukultura.com/wp-includes/js/dist/hooks.min.js?ver=f0f188028580e8dc1255"></script>
<script id="wp-i18n-js" src="https://meukultura.com/wp-includes/js/dist/i18n.min.js?ver=1dfe7db3940c23ea9216"></script>
<script id="wp-i18n-js-after">
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
//# sourceURL=wp-i18n-js-after
</script>
<script id="swv-js" src="https://meukultura.com/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.1.7"></script>
<script id="contact-form-7-js-translations">
( function( domain, translations ) {
var localeData = translations.locale_data[ domain ] || translations.locale_data.messages;
localeData[""].domain = domain;
wp.i18n.setLocaleData( localeData, domain );
} )( "contact-form-7", {"translation-revision-date":"2024-08-13 18:06:19+0000","generator":"GlotPress\/4.0.1","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=2; plural=n != 1;","lang":"pt"},"This contact form is placed in the wrong place.":["Este formul\u00e1rio de contacto est\u00e1 colocado no s\u00edtio errado."],"Error:":["Erro:"]}},"comment":{"reference":"includes\/js\/index.js"}} );
//# sourceURL=contact-form-7-js-translations
</script>
<script id="contact-form-7-js-before">
var wpcf7 = {
"api": {
"root": "https:\/\/meukultura.com\/wp-json\/",
"namespace": "contact-form-7\/v1"
}
};
//# sourceURL=contact-form-7-js-before
</script>
<script id="contact-form-7-js" src="https://meukultura.com/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.1.7"></script>
<script id="eztoc-scroll-scriptjs-js-extra">
var eztoc_smooth_local = {"scroll_offset":"30","add_request_uri":"","add_self_reference_link":""};
//# sourceURL=eztoc-scroll-scriptjs-js-extra
</script>
<script id="eztoc-scroll-scriptjs-js" src="https://meukultura.com/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js?ver=2.0.85"></script>
<script id="eztoc-js-cookie-js" src="https://meukultura.com/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1"></script>
<script id="eztoc-jquery-sticky-kit-js" src="https://meukultura.com/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2"></script>
<script id="eztoc-js-js-extra">
var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","scroll_offset":"30","fallbackIcon":"\u003Cspan class=\"\"\u003E\u003Cspan class=\"eztoc-hide\" style=\"display:none;\"\u003EToggle\u003C/span\u003E\u003Cspan class=\"ez-toc-icon-toggle-span\"\u003E\u003Csvg style=\"fill: #999;color:#999\" xmlns=\"http://www.w3.org/2000/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"\u003E\u003Cpath d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"\u003E\u003C/path\u003E\u003C/svg\u003E\u003Csvg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"\u003E\u003Cpath d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"/\u003E\u003C/svg\u003E\u003C/span\u003E\u003C/span\u003E","chamomile_theme_is_on":""};
//# sourceURL=eztoc-js-js-extra
</script>
<script id="eztoc-js-js" src="https://meukultura.com/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.85-1781436313"></script>
<script id="tie-scripts-js-extra">
var tie = {"is_rtl":"","ajaxurl":"https://meukultura.com/wp-admin/admin-ajax.php","is_side_aside_light":"","is_taqyeem_active":"","is_sticky_video":"","mobile_menu_top":"","mobile_menu_active":"area_1","mobile_menu_parent":"","lightbox_all":"true","lightbox_gallery":"true","lightbox_skin":"dark","lightbox_thumb":"horizontal","lightbox_arrows":"true","is_singular":"1","autoload_posts":"","reading_indicator":"true","lazyload":"","select_share":"","select_share_twitter":"","select_share_facebook":"","select_share_linkedin":"","select_share_email":"","facebook_app_id":"5303202981","twitter_username":"","responsive_tables":"true","ad_blocker_detector":"","sticky_behavior":"upwards","sticky_desktop":"true","sticky_mobile":"true","sticky_mobile_behavior":"default","ajax_loader":"\u003Cdiv class=\"loader-overlay\"\u003E\u003Cdiv class=\"spinner-circle\"\u003E\u003C/div\u003E\u003C/div\u003E","type_to_search":"1","lang_no_results":"Nada Encontrado","sticky_share_mobile":"true","sticky_share_post":"","sticky_share_post_menu":""};
//# sourceURL=tie-scripts-js-extra
</script>
<script id="tie-scripts-js" src="https://meukultura.com/wp-content/themes/jannah/assets/js/scripts.min.js?ver=7.0.2"></script>
<script id="tie-js-ilightbox-js" src="https://meukultura.com/wp-content/themes/jannah/assets/ilightbox/lightbox.js?ver=7.0.2"></script>
<script id="tie-js-sliders-js" src="https://meukultura.com/wp-content/themes/jannah/assets/js/sliders.min.js?ver=7.0.2"></script>
<script id="tie-js-shortcodes-js" src="https://meukultura.com/wp-content/themes/jannah/assets/js/shortcodes.js?ver=7.0.2"></script>
<script id="tie-js-desktop-js" src="https://meukultura.com/wp-content/themes/jannah/assets/js/desktop.min.js?ver=7.0.2"></script>
<script id="tie-js-single-js" src="https://meukultura.com/wp-content/themes/jannah/assets/js/single.min.js?ver=7.0.2"></script>
<script>
WebFontConfig ={
google:{
families: [ 'Poppins:600,regular:latin&display=swap' ]
}
};
(function(){
var wf = document.createElement('script');
wf.src = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.defer = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
</body>
</html>
