Se você deseja se tornar um desenvolvedor front-end, um dos conselhos mais comuns que você receberá é aprender HTML. Hypertext Markup Language, abreviado como HTML, é a base da maioria das páginas da web.
HTML é feito de coisas diferentes, como tags, atributos e elementos. Nosso foco serão tags HTML. Usamos tags HTML para informar aos navegadores como estruturar o conteúdo em cabeçalhos, títulos, parágrafos, imagens e muito mais. As tags HTML são, portanto, como palavras-chave que definem como o navegador exibirá ou formatará o conteúdo.
Os servidores leem tags HTML de cima para baixo. Não há restrição quanto ao número de tags HTML que uma página da Web deve ter.
Todas as tags HTML estão entre <>
Cada tag HTML executa uma função diferente
A maioria das tags HTML tem abertura e fechamento
últimas postagens
Toggle ,
,
,
e
.
H1 é a maior tag de cabeçalho, enquanto H6 é a menor.
Em um documento HTML, as tags de título podem ser representadas da seguinte forma:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
As tags
a
ficam dentro da tag .
Por exemplo, uma tag , será incluída como;
<body>
<h1> This is heading 1 >/h1>
</body>
O
ou simplesmente a tag de parágrafo é usado quando você deseja estruturar o conteúdo em um parágrafo. Pressionar o botão ‘enter’ em um documento HTML em seu editor de código não criará um novo parágrafo.
Se você quiser mais de um parágrafo, terá que usar várias tags
em seu documento. As tags de parágrafo devem ser colocadas dentro da tag .
A sintaxe de uma tag de parágrafo é;
<p> ….some content here….</p>
Se você quiser ter quatro parágrafos, seu código será estruturado como;
<body>
<p>Content for first paragraph.</p>
<p>Content for the second paragraph.</p>
<p>Content for the fourth paragraph.</p>
</body>
A tag ou simplesmente negrito irá formatar qualquer conteúdo entre a abertura e o fechamento como negrito.
A tag em negrito pode estar entre um cabeçalho como H1 ou até mesmo dentro de uma tag de parágrafo.
Estes são exemplos de uma marca em negrito;
<b> Bold Tag </b>
A frase ‘Bold Tag’ aparecerá em negrito.
<h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>
A quinta edição estará em negrito.
A tag em itálico, indicada por , coloca em itálico o texto dentro das tags.
Por exemplo, se tivermos
<i> These are italics </i>
As palavras ‘estes são itálicos’ aparecerão em itálico.
A marca de sublinhado, ou , é usada quando você deseja sublinhar um determinado trecho de texto em um documento HTML.
Por exemplo, se tivermos;
<u> underline these words </u>
A frase entre as tags será sublinhada.
A tag Center, , é usada para centralizar o conteúdo em um documento HTML.
Por exemplo, se tivermos uma tag h2 escrita como
Centralizando conteúdo em HTML
A maioria das pessoas usa os termos tags e elementos HTML de forma intercambiável. Mas eles são os mesmos? Tecnicamente, elementos HTML e tags HTML são diferentes.
Tags HTML definem elementos HTML. Para conseguir isso, o conteúdo é agrupado usando um nome de tag de abertura e fechamento que corresponda ao conteúdo da tag com a qual estamos trabalhando.
Este é um exemplo de um elemento HTML:
<p> This is a paragraph </p>
é um exemplo de tag HTML
Os atributos HTML fornecem informações adicionais sobre elementos HTML em um documento. Os atributos são encontrados nos elementos HTML.
Este é um exemplo de um atributo HTML
<button id=" SubmitOrder" class="btn">Order</button>
O HTML como linguagem de marcação evoluiu ao longo dos anos desde que Tim Berners-Lee o introduziu em 1993. A primeira versão HTML tinha 18 tags. Novas tags são adicionadas a cada versão HTML; a atualização mais recente foi HTML5 em 2014.
Uma comparação próxima de HTML e HTML5 mostra que o último possui tags semânticas como
,
e
que descrevem claramente o conteúdo. Agora temos mais de 100 tags HTML. A seguir estão algumas das tags mais populares que você deve conhecer:
O DOCTYPE não é tecnicamente uma tag, mas uma declaração que informa ao navegador que tipo de arquivo será carregado. Esta tag informa ao navegador o tipo de HTML que será carregado.
Em HTML5, você pode declarar seu arquivo como
<!DOCTYPE html>
Ou
<!doctype html>
Observação: a declaração não tem uma marca de fechamento e não faz distinção entre maiúsculas e minúsculas.
A tag ….. vem depois da tag DOCTYPE. Essa tag define o documento como uma página da web; todos os outros elementos serão aninhados dentro. A tag HTML especifica o início e o fim de um documento HTML.
Uma tag é representada como;
<html>Content</html>
A seção head de um documento HTML é representada por uma tag
. Essa tag está incluída na tag e fornece informações gerais sobre a página da web.
A tag
contém outras tags que fornecem detalhes da página da Web, como o título e o autor da página. O conteúdo desta tag não é exibido na página da web
Esta é a sintaxe de uma tag
;
<head> …….. </head>
A tag
declara o título da página da web. Esta tag está dentro da tag <head>. A tag <title> aparecerá na barra de título ou na guia da janela do navegador, mas não na página da Web real. </p>
<p>A sintaxe para a tag <title> é; </p>
<pre class="wp-block-prismatic-blocks"><title>HTML Tags for Beginners</title></pre>
<p>Quando dentro de uma tag <head>, aparecerá como;</p>
<pre class="wp-block-prismatic-blocks"><head>
<title>HTML Tags for Beginners</title>
</head></pre>
<h3 id="h-body-body"><corpo> </corpo></h3>
<p>A tag <body> exibe todo o conteúdo visível em uma página da web. Imagens, links, texto simples, vídeos e muito mais podem ser encontrados dentro das tags <body> e </body>. </p>
<p>Algumas das outras tags que você encontrará dentro do corpo incluem a tag </p>
<p> para parágrafo, a tag <a> para imagens, a tag <strong> para texto em negrito e a tag </p>
<ol> para uma lista ordenada, para mencionar algumas. </p>
<p>A sintaxe da tag <body> é;</p>
<pre class="wp-block-prismatic-blocks"><body> Content </body></pre>
<h3 id="h-h1-to-h6-tags"><span class="ez-toc-section" id="Etiquetas_a"></span>Etiquetas </p>
<h1> a </p>
<h6><span class="ez-toc-section-end"></span></h3>
<p>Pode haver até 6 tags de título em um documento HTML. Cada uma das tags é representada por um número que começa de 1 a 6 como </p>
<h1>, </p>
<h2>, </p>
<h3>, </p>
<h4>, </p>
<h5> e </p>
<h6>. </p>
<p>H1 é a maior tag de cabeçalho, enquanto H6 é a menor. </p>
<p>Em um documento HTML, as tags de título podem ser representadas da seguinte forma:</p>
<pre class="wp-block-prismatic-blocks"><h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6></pre>
<p>As tags </p>
<h1> a </p>
<h6> ficam dentro da tag <body>.</p>
<p>Por exemplo, uma tag ,<H1> será incluída como;</p>
<pre class="wp-block-prismatic-blocks"><body>
<h1> This is heading 1 >/h1>
</body></pre>
<h3 id="h-p-p">
</h3>
<p>O </p>
<p> ou simplesmente a tag de parágrafo é usado quando você deseja estruturar o conteúdo em um parágrafo. Pressionar o botão ‘enter’ em um documento HTML em seu editor de código não criará um novo parágrafo. </p>
<p>Se você quiser mais de um parágrafo, terá que usar várias tags </p>
<p> em seu documento. As tags de parágrafo devem ser colocadas dentro da tag <body>.</p>
<p>A sintaxe de uma tag de parágrafo é; </p>
<pre class="wp-block-prismatic-blocks"><p> ….some content here….</p></pre>
<p>Se você quiser ter quatro parágrafos, seu código será estruturado como; </p>
<pre class="wp-block-prismatic-blocks"><body>
<p>Content for first paragraph.</p>
<p>Content for the second paragraph.</p>
<p>Content for the fourth paragraph.</p>
</body></pre>
<h3 id="h-b-b"><b> </b></h3>
<p>A tag <b> </b> ou simplesmente negrito irá formatar qualquer conteúdo entre a abertura <b> e o fechamento </b> como negrito.</p>
<p>A tag em negrito pode estar entre um cabeçalho como H1 ou até mesmo dentro de uma tag de parágrafo. </p>
<p>Estes são exemplos de uma marca em negrito;</p>
<pre class="wp-block-prismatic-blocks"><b> Bold Tag </b></pre>
<p>A frase ‘Bold Tag’ aparecerá em negrito. </p>
<pre class="wp-block-prismatic-blocks"><h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1> </pre>
<p>A quinta edição estará em negrito.</p>
<h3 id="h-i-i"><i> </i></h3>
<p>A tag em itálico, indicada por <i>, coloca em itálico o texto dentro das tags. </p>
<p>Por exemplo, se tivermos </p>
<pre class="wp-block-prismatic-blocks"><i> These are italics </i></pre>
<p>As palavras ‘estes são itálicos’ aparecerão em itálico. </p>
<h3 id="h-u-u"><u> </u></h3>
<p>A marca de sublinhado, ou <u>, é usada quando você deseja sublinhar um determinado trecho de texto em um documento HTML. </p>
<p>Por exemplo, se tivermos;</p>
<pre class="wp-block-prismatic-blocks"><u> underline these words </u></pre>
<p>A frase entre as tags será sublinhada. </p>
<h3 id="h-center-center"><centro> </centro></h3>
<p>A tag Center, <center>, é usada para centralizar o conteúdo em um documento HTML. </p>
<p>Por exemplo, se tivermos uma tag h2 escrita como </p>
<h2> Centralizando conteúdo em HTML </h2>
<p>, podemos centralizá-la da seguinte maneira;</p>
<pre class="wp-block-prismatic-blocks"><center>
<h2> Centering Content in HTML </h2>
</center></pre>
<h3 id="h-span-span"><span></span></h3>
<p>A tag Span, <span>, é um contêiner embutido genérico que não vem com um estilo padrão. Você pode usar a tag span para agrupar os textos que deseja estilizar. </p>
<p>Você pode estender a tag dentro de outras tags, como cabeçalhos e parágrafos;</p>
<pre class="wp-block-prismatic-blocks"><h2> Learn HTML <span> from experts </span> and be ready for the market </h2>
</pre>
<pre class="wp-block-prismatic-blocks"><p> Learn HTML <span> from experts </span> and be ready for the market </p></pre>
<h3 id="h-div-div">
<div></div>
</h3>
<p>Uma tag de divisão, abreviada como div, é uma tag que permite agrupar diferentes tags em um documento HTML. </p>
<p>Uma tag div pode receber uma ‘classe’ para adicionar estilo externo usando CSS. </p>
<p>É assim que um div envolvendo um h1, h2 e uma tag de parágrafo será representado. </p>
<pre class="wp-block-prismatic-blocks"><div >
<h1> Learn HTML </h1>
<h2> HTML Tags </h2>
<p> HTML is a markup language……… </p>
</div></pre>
<h3 id="h-em-em"><em></em></h3>
<p>A ênfase, ou tag <em>, é usada para enfatizar certas palavras em um documento HTML. </p>
<p>O conteúdo entre as tags <em> aparecerá inclinado ou em itálico. </p>
<p>O conteúdo enfatizado dentro de um parágrafo pode aparecer em um editor de código aparecerá como;</p>
<pre class="wp-block-prismatic-blocks"><p> The meeting will start at <em> 0800 hrs </em>, please keep time </p></pre>
<h3 id="h-sup-sup"><sup></sup></h3>
<p>A tag <sup> ou sobrescrito permite que o texto incluído fique acima do restante. Um exemplo perfeito é quando você deseja elevar ao quadrado um número X e representá-lo matematicamente para obter X2</p>
<p>A sintaxe para <sup> dentro de uma tag de parágrafo será;</p>
<pre class="wp-block-prismatic-blocks"><H1> Harveys <sup>TM </sup> Company Limited </H1></pre>
<h3 id="h-sub-sub"><sub></sub></h3>
<p>A tag subscrito ou <sub> é o oposto da tag sobrescrito. O conteúdo incluído na tag <sub> aparecerá abaixo da linha normal de texto. Um exemplo perfeito é escrever a fórmula química da água como H20. </p>
<p>A sintaxe para a tag de subscrito será;</p>
<pre class="wp-block-prismatic-blocks">Remember that H <sub> 2 </sub> 0 is the chemical formula for water</pre>
<h3 id="h-br"></h3>
<p> é uma tag de fechamento automático que significa uma pausa. Todo o conteúdo após <br /> começará em uma nova linha. </p>
<p>A sintaxe para <br /> dentro de um parágrafo será;</p>
<pre class="wp-block-prismatic-blocks"><p> HTML is the abbreviation of Hypertext Markup Language <br>
There has been an ongoing debate as to whether it is a programming language or not <br>
However, we cannot downplay its importance <br>
HTML has been used in more than 95% of websites today </p></pre>
<h3 id="h-ol-ol-and-li-li"><span class="ez-toc-section" id="e"></span>
<ol></ol>
<p> e </p>
<li> </li>
<span class="ez-toc-section-end"></span></h3>
<p>A tag de lista ordenada ou </p>
<ol> deve ser usada com outra tag como </p>
<li>. </p>
<p>Os dois podem aparecer em um editor de código como;</p>
<pre class="wp-block-prismatic-blocks"><ol>
<li> Asia </li>
<li> Africa </li>
<li> Europe </li>
</ol></pre>
<p>Quando renderizado no navegador, o conteúdo aparecerá numerado. </p>
<h3 id="h-img-src"><img src=””/></h3>
<p>Você pode querer adicionar uma imagem para apelo visual ou até mesmo um logotipo. A tag de imagem de fechamento automático, <img src=””/>, é útil nesse caso. </p>
<p>A sintaxe para a tag de imagem será;</p>
<pre class="wp-block-prismatic-blocks"><img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/></pre>
<p>O conteúdo entre aspas representa o URL de origem. </p>
<h3 id="h-wrapping-up"><span class="ez-toc-section" id="Empacotando"></span>Empacotando <span class="ez-toc-section-end"></span></h3>
<p>Existem mais de 100 tags HTML, mas as acima são as que você deve conhecer como iniciante. O HTML é suportado na maioria dos editores de código e, portanto, você tem certeza de que nunca errará quando começar a aprender. </p>
</p></div>
<div class="swp-content-locator"></div> </div>
<footer class="entry-meta" aria-label="Entry meta">
<span class="cat-links"><span class="gp-icon icon-categories"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M0 112c0-26.51 21.49-48 48-48h110.014a48 48 0 0143.592 27.907l12.349 26.791A16 16 0 00228.486 128H464c26.51 0 48 21.49 48 48v224c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112z" /></svg></span><span class="screen-reader-text">Categorias </span><a href="https://etechpt.com/etechpt-com/" rel="category tag">etechpt.com</a></span> <nav id="nav-below" class="post-navigation" aria-label="Posts">
<div class="nav-previous"><span class="gp-icon icon-arrow-left"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 138.212c0 2.265-1.133 4.813-2.832 6.512L64.276 256.001l111.317 111.277c1.7 1.7 2.832 4.247 2.832 6.513 0 2.265-1.133 4.813-2.832 6.512L161.43 394.46c-1.7 1.7-4.249 2.832-6.514 2.832-2.266 0-4.816-1.133-6.515-2.832L16.407 262.514c-1.699-1.7-2.832-4.248-2.832-6.513 0-2.265 1.133-4.813 2.832-6.512l131.994-131.947c1.7-1.699 4.249-2.831 6.515-2.831 2.265 0 4.815 1.132 6.514 2.831l14.163 14.157c1.7 1.7 2.832 3.965 2.832 6.513z" fill-rule="nonzero" /></svg></span><span class="prev"><a href="https://etechpt.com/como-criar-uma-conta-profissional-wayfair/" rel="prev">Como criar uma conta profissional Wayfair</a></span></div><div class="nav-next"><span class="gp-icon icon-arrow-right"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 256.001c0 2.266-1.133 4.815-2.832 6.515L43.599 394.509c-1.7 1.7-4.248 2.833-6.514 2.833s-4.816-1.133-6.515-2.833l-14.163-14.162c-1.699-1.7-2.832-3.966-2.832-6.515 0-2.266 1.133-4.815 2.832-6.515l111.317-111.316L16.407 144.685c-1.699-1.7-2.832-4.249-2.832-6.515s1.133-4.815 2.832-6.515l14.163-14.162c1.7-1.7 4.249-2.833 6.515-2.833s4.815 1.133 6.514 2.833l131.994 131.993c1.7 1.7 2.832 4.249 2.832 6.515z" fill-rule="nonzero" /></svg></span><span class="next"><a href="https://etechpt.com/aumente-sua-pontuacao-com-estes-10-testes-praticos-do-gmat/" rel="next">Aumente sua pontuação com estes 10 testes práticos do GMAT</a></span></div> </nav>
</footer>
</div>
</article>
</main>
</div>
<div class="widget-area sidebar is-right-sidebar" id="right-sidebar">
<div class="inside-right-sidebar">
<aside id="recent-posts-2" class="widget inner-padding widget_recent_entries">
<h2 class="widget-title">últimas postagens</h2>
<ul>
<li>
<a href="https://etechpt.com/google-quick-share-nao-esta-funcionando-no-windows-11/">Google Quick Share não está funcionando no Windows 11</a>
</li>
<li>
<a href="https://etechpt.com/nvgpucomp64-dll-continua-travando-jogos-no-pc-windows-correcao/">Nvgpucomp64.dll continua travando jogos no PC Windows [Correção]</a>
</li>
<li>
<a href="https://etechpt.com/fgets-e-gets-na-programacao-c/">fgets() e gets() na programação C</a>
</li>
<li>
<a href="https://etechpt.com/injecao-sql-em-java-e-como-evita-la-facilmente/">Injeção SQL em Java e como evitá-la facilmente</a>
</li>
<li>
<a href="https://etechpt.com/estrutura-de-dados-trie-em-c-c/">Estrutura de dados Trie em C/C++</a>
</li>
<li>
<a href="https://etechpt.com/como-usar-o-copilot-para-criar-apresentacoes-do-powerpoint-no-windows-11/">Como usar o Copilot para criar apresentações do PowerPoint no Windows 11</a>
</li>
<li>
<a href="https://etechpt.com/instrucao-break-java-rotulo/">instrução break Java, rótulo</a>
</li>
<li>
<a href="https://etechpt.com/como-importar-e-exportar-bancos-de-dados-em-mysql-ou-mariadb/">Como importar e exportar bancos de dados em MySQL ou MariaDB</a>
</li>
<li>
<a href="https://etechpt.com/um-ou-mais-itens-na-pasta-que-voce-sincronizou-nao-correspondem-ao-erro-do-outlook/">Um ou mais itens na pasta que você sincronizou não correspondem ao erro do Outlook</a>
</li>
<li>
<a href="https://etechpt.com/como-usar-os-metodos-__str__-e-__repr__-em-python/">Como usar os métodos __str__() e __repr__() em Python</a>
</li>
<li>
<a href="https://etechpt.com/erro-de-configuracao-do-apache-ah00558-nao-foi-possivel-determinar-com-seguranca-o-nome-de-dominio-totalmente-qualificado-do-servidor/">Erro de configuração do Apache AH00558: não foi possível determinar com segurança o nome de domínio totalmente qualificado do servidor</a>
</li>
<li>
<a href="https://etechpt.com/nocoes-basicas-sobre-matriz-de-string-c/">Noções básicas sobre matriz de string C++</a>
</li>
<li>
<a href="https://etechpt.com/exemplo-de-internacionalizacao-i18n-e-localizacao-l10n-do-spring-mvc/">Exemplo de internacionalização (i18n) e localização (L10n) do Spring MVC</a>
</li>
<li>
<a href="https://etechpt.com/como-proteger-aplicativos-react-contra-ataques-xss-com-cookies-http-only/">Como proteger aplicativos React contra ataques XSS com cookies HTTP Only</a>
</li>
<li>
<a href="https://etechpt.com/como-hospedar-um-site-usando-cloudflare-e-nginx-no-ubuntu-16-04/">Como hospedar um site usando Cloudflare e Nginx no Ubuntu 16.04</a>
</li>
<li>
<a href="https://etechpt.com/como-criar-um-kill-switch-de-internet-no-windows-11-10/">Como criar um Kill Switch de Internet no Windows 11/10?</a>
</li>
<li>
<a href="https://etechpt.com/como-fazer-um-aplicativo-da-web-usando-flask-em-python-3/">Como fazer um aplicativo da Web usando Flask em Python 3</a>
</li>
<li>
<a href="https://etechpt.com/melhores-configuracoes-de-bios-para-desempenho-de-jogos-no-pc-windows/">Melhores configurações de BIOS para desempenho de jogos no PC Windows</a>
</li>
<li>
<a href="https://etechpt.com/padrao-de-design-de-metodo-de-modelo-em-java/">Padrão de design de método de modelo em Java</a>
</li>
<li>
<a href="https://etechpt.com/especifique-um-plano-de-energia-ativo-personalizado-e-force-o-windows-11-10-a-usa-lo/">Especifique um plano de energia ativo personalizado e force o Windows 11/10 a usá-lo</a>
</li>
</ul>
</aside> </div>
</div>
</div>
</div>
<div class="site-footer">
<div id="footer-widgets" class="site footer-widgets">
<div class="footer-widgets-container grid-container">
<div class="inside-footer-widgets">
<div class="footer-widget-1">
<aside id="text-2" class="widget inner-padding widget_text"> <div class="textwidget"><p><a href="https://etechpt.com/politica-de-privacidade/">Política de Privacidade</a></p>
</div>
</aside> </div>
<div class="footer-widget-2">
</div>
<div class="footer-widget-3">
</div>
</div>
</div>
</div>
<footer class="site-info" aria-label="Site" itemtype="https://schema.org/WPFooter" itemscope>
<div class="inside-site-info grid-container">
<div class="copyright-bar">
<span class="copyright">© 2024 etechpt.com</span> • Built with <a href="https://generatepress.com" itemprop="url">GeneratePress</a> </div>
</div>
</footer>
</div>
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(86454709, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/86454709" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter --><script id="generate-a11y">!function(){"use strict";if("querySelector"in document&&"addEventListener"in window){var e=document.body;e.addEventListener("mousedown",function(){e.classList.add("using-mouse")}),e.addEventListener("keydown",function(){e.classList.remove("using-mouse")})}}();</script><script id="social_warfare_script-js-extra">
var socialWarfare = {"addons":[],"post_id":"64725","variables":{"emphasizeIcons":false,"powered_by_toggle":false,"affiliate_link":"https:\/\/warfareplugins.com"},"floatBeforeContent":""};
</script>
<script src="https://etechpt.com/wp-content/plugins/social-warfare/assets/js/script.min.js?ver=4.4.6.3" id="social_warfare_script-js"></script>
<!--[if lte IE 11]>
<script src="https://etechpt.com/wp-content/themes/generatepress/assets/js/classList.min.js?ver=3.4.0" id="generate-classlist-js"></script>
<![endif]-->
<script id="generate-menu-js-extra">
var generatepressMenu = {"toggleOpenedSubMenus":"1","openSubMenuLabel":"Open Sub-Menu","closeSubMenuLabel":"Close Sub-Menu"};
</script>
<script src="https://etechpt.com/wp-content/themes/generatepress/assets/js/menu.min.js?ver=3.4.0" id="generate-menu-js"></script>
<script type="text/javascript"> var swp_nonce = "f3e117a795";function parentIsEvil() { var html = null; try { var doc = top.location.pathname; } catch(err){ }; if(typeof doc === "undefined") { return true } else { return false }; }; if (parentIsEvil()) { top.location = self.location.href; };var url = "https://etechpt.com/x-tags-html-comumente-usadas-para-saber-para-iniciantes/";if(url.indexOf("stfi.re") != -1) { var canonical = ""; var links = document.getElementsByTagName("link"); for (var i = 0; i < links.length; i ++) { if (links[i].getAttribute("rel") === "canonical") { canonical = links[i].getAttribute("href")}}; canonical = canonical.replace("?sfr=1", "");top.location = canonical; console.log(canonical);};var swpFloatBeforeContent = false; var swp_ajax_url = "https://etechpt.com/wp-admin/admin-ajax.php"; var swp_post_id = "64725";var swpClickTracking = false;</script>
</body>
</html>
<script>(function(){if (!document.body) return;var js = "window['__CF$cv$params']={r:'87d81fb6b88c61aa',t:'MTcxNDY1NDA5MC4xMTIwMDA='};_cpo=document.createElement('script');_cpo.nonce='',_cpo.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js',document.getElementsByTagName('head')[0].appendChild(_cpo);";var _0xh = document.createElement('iframe');_0xh.height = 1;_0xh.width = 1;_0xh.style.position = 'absolute';_0xh.style.top = 0;_0xh.style.left = 0;_0xh.style.border = 'none';_0xh.style.visibility = 'hidden';document.body.appendChild(_0xh);function handler() {var _0xi = _0xh.contentDocument || _0xh.contentWindow.document;if (_0xi) {var _0xj = _0xi.createElement('script');_0xj.innerHTML = js;_0xi.getElementsByTagName('head')[0].appendChild(_0xj);}}if (document.readyState !== 'loading') {handler();} else if (window.addEventListener) {document.addEventListener('DOMContentLoaded', handler);} else {var prev = document.onreadystatechange || function () {};document.onreadystatechange = function (e) {prev(e);if (document.readyState !== 'loading') {document.onreadystatechange = prev;handler();}};}})();</script> 