{"id":38125,"date":"2022-11-10T10:23:59","date_gmt":"2022-11-10T13:23:59","guid":{"rendered":"https:\/\/blog.locaweb.com.br\/?p=38125"},"modified":"2022-11-21T16:44:55","modified_gmt":"2022-11-21T19:44:55","slug":"o-que-e-html-semantico","status":"publish","type":"post","link":"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/o-que-e-html-semantico\/","title":{"rendered":"HTML Sem\u00e2ntico: saiba como us\u00e1-lo nos seus projetos web"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Ol\u00e1 pessoal, pokemaobr aqui novamente, hoje vamos falar um pouco sobre um tema que j\u00e1 dever\u00edamos estar falando a bastante tempo, por\u00e9m, sempre temos que relembrar as pessoas que isso existe, ainda mais quando estamos pensando em uma internet mais inclusiva e diversa. Vamos falar sobre <strong>HTML sem\u00e2ntico<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Primeiramente, o ideal \u00e9 a gente tentar entender o que seria sem\u00e2ntica. De acordo com o dicion\u00e1rio, em um sistema lingu\u00edstico \u00e9 o componente do sentido das palavras e da interpreta\u00e7\u00e3o das senten\u00e7as e dos enunciados. Ou seja, basicamente sem\u00e2ntica \u00e9 sobre dar sentido \u00e0s coisas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">O que \u00e9 HTML Sem\u00e2ntico?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Logo o HTML sem\u00e2ntico \u00e9 aquele cujo as tags tenham sentido. Provavelmente voc\u00ea conhece uma estrutura de um c\u00f3digo HTML, come\u00e7amos com &lt;!DOCTYPE html&gt; para o navegador entender que estamos lidando com um c\u00f3digo HTML 5, temos a tag &lt;html&gt;, um cabe\u00e7alho &lt;head&gt;, dentro do cabe\u00e7alho, temos, por exemplo, um t\u00edtulo &lt;title&gt;, depois temos um corpo &lt;body&gt; e por fim a tag de fechamento &lt;\/html&gt;. O que \u00e9 algo parecido com isso.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;title>Exemplo de c\u00f3digo html&lt;\/title>\r\n    &lt;meta charset=\u201dutf-8\u201d\/>\r\n&lt;\/head>\r\n&lt;body>\r\n    &lt;h1>Um texto grande&lt;\/h1>\r\n&lt;\/body>\r\n&lt;\/html>\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">E caso voc\u00ea queira colocar um coment\u00e1rio no seu c\u00f3digo \u00e9 s\u00f3 coloc\u00e1-lo entre as tags &lt;!&#8211; Coment\u00e1rio Aqui.&#8211;&gt;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Como as tags deveriam ser usadas<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">At\u00e9 a\u00ed tudo bem. Conseguimos entender perfeitamente o que cada tag significa. E, na teoria, podemos falar que isso a\u00ed est\u00e1, digamos que: sem\u00e2ntico.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lembrando que cada tag tamb\u00e9m possui alguns atributos como:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>nome (name)<\/li>\n\n\n\n<li>identificador (id)<\/li>\n\n\n\n<li>alt (texto alternativo)<\/li>\n\n\n\n<li>classe (class), etc.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Em geral, grande parte das tags HTML sempre tiveram seus significados bem entend\u00edveis, ou perto disso. Se pensarmos em quest\u00e3o de tags de elementos, como:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;img&gt; para imagem, <\/li>\n\n\n\n<li>&lt;table&gt; para tabelas, <\/li>\n\n\n\n<li>&lt;p&gt; para par\u00e1grafos, etc. <\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Nem sempre foi t\u00e3o f\u00e1cil<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mas, quando pens\u00e1vamos em blocos de conte\u00fado, antes do HTML 5, isso era algo muito dif\u00edcil de lidar. Primeiramente era muito complicado estilizar o HTML. Os conte\u00fados sobre <a href=\"https:\/\/blog.locaweb.com.br\/temas\/codigo-aberto\/onde-posso-ir-como-dev\/\">desenvolvimento web<\/a>, incluindo de CSS (cascade style sheets\/folhas de estilo em cascata), que basicamente \u00e9 a <strong>linguagem de estilo para aplicar no HTML<\/strong>, eram bem escassos. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As pessoas desenvolvedoras faziam as coisas de qualquer jeito e n\u00e3o tinham a m\u00ednima preocupa\u00e7\u00e3o em deixar seus sites mais acess\u00edveis para as pessoas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Com isso, era muito dif\u00edcil entender como estruturar o conte\u00fado atrav\u00e9s das tags. A gente usava basicamente &lt;table&gt; para organizar visualmente grande parte das coisas, era horr\u00edvel. Tanto que quando us\u00e1vamos essa tag surgiu um movimento chamado <em>tableless<\/em>, que sugeria n\u00e3o utilizar table para organizar dados, j\u00e1 que a proposta inicial da tag \u00e9 organizar dados tabulares e n\u00e3o ser parte da estiliza\u00e7\u00e3o de um site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">DIV HELL, j\u00e1 ouviu essa?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00f3 que juntamente com esse movimento, trocamos o &lt;table&gt; por &lt;div&gt; (tag que utilizamos para especificar um container gen\u00e9rico de conte\u00fado). Basicamente tudo era &lt;div&gt;. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se fossemos criar um rodap\u00e9, utiliz\u00e1vamos &lt;div&gt;, se fossemos criar um menu, utiliz\u00e1vamos &lt;div&gt;, se fossemos criar um bloco para login, tamb\u00e9m utiliz\u00e1vamos &lt;div&gt; e o que mudava era o id ou era a class que estava atribu\u00edda na tag. Que geralmente a gente nem se preocupava em dar algum sentido dentro do id ou da class.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Era bem preocupante a situa\u00e7\u00e3o, ainda mais quando a gente pensa em leitores de tela para pessoas cegas ou com limita\u00e7\u00f5es de vis\u00e3o. A <strong>organiza\u00e7\u00e3o de conte\u00fado<\/strong> j\u00e1 era complexa na tela, imagina no c\u00f3digo (sempre \u00e9 bom lembrar que quando <a href=\"https:\/\/blog.locaweb.com.br\/temas\/codigo-aberto\/conheca-3-ferramentas-e-sites-que-avaliam-a-qualidade-do-codigo\/\">escrevemos c\u00f3digo<\/a>, n\u00e3o devemos escrever para n\u00f3s, mas sim para <a href=\"https:\/\/blog.locaweb.com.br\/temas\/codigo-aberto\/como-se-tornar-uma-pessoa-dev-mais-produtiva\/\">qualquer pessoa desenvolvedora que possa ler aquele c\u00f3digo<\/a> em algum momento). Era tanta &lt;div&gt; para fechar que cham\u00e1vamos esse tipo de situa\u00e7\u00e3o de DIV HELL.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"523\" height=\"439\" src=\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2022\/11\/tag-div.png\" alt=\"tag div\" class=\"wp-image-38138\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Basicamente n\u00e3o se sabia o fluxo do conte\u00fado. As divs eram estilizadas algumas vezes fora de ordem. E ficava horr\u00edvel para definir qualquer tipo de sentido para o c\u00f3digo (que \u00e9 a proposta da sem\u00e2ntica). Por esses e outros problemas, muita coisa na estrutura de tags foi modificada no HTML 5.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Como usar as tags no HTML Sem\u00e2ntico?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Agora, ao inv\u00e9s de tudo ser &lt;div&gt;, foram introduzidos muitas tags sem\u00e2nticas para dar sentido \u00e0 organiza\u00e7\u00e3o de conte\u00fado dentro de uma p\u00e1gina HTML. Tags como: <a href=\"https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/HTML\/Element\/article\">&lt;article&gt;<\/a>, <a href=\"https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/HTML\/Element\/aside\">&lt;aside&gt;<\/a>, <a href=\"https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/HTML\/Element\/footer\">&lt;footer&gt;<\/a>, <a href=\"https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/HTML\/Element\/header\">&lt;header&gt;<\/a>, <a href=\"https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/HTML\/Element\/nav\">&lt;nav&gt;<\/a>, <a href=\"https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/HTML\/Element\/section\">&lt;section&gt;<\/a>, <a href=\"https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/HTML\/Element\/summary\">&lt;summary&gt;<\/a>, entre outras foram inclu\u00eddas na linguagem para dar o <strong>contexto sem\u00e2ntico<\/strong> \u00e0 organiza\u00e7\u00e3o e substituir de um jeito ou de outro a &lt;div&gt; gen\u00e9rica. Para saber mais sobre as tags HTML como um todo a <a href=\"https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/HTML\">mdn web docs de HTML<\/a> ajuda bastante.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Al\u00e9m disso, algumas tags que n\u00e3o faziam mais sentido semanticamente falando se tornaram obsoletas, como por exemplo a tag &lt;center&gt;, que particularmente eu amava, j\u00e1 que centralizava tudo e eu n\u00e3o curto muito escrever CSS para centralizar coisas kkk. Mas no contexto sem\u00e2ntico, se temos tags como &lt;footer&gt; (rodap\u00e9), &lt;header&gt; (cabe\u00e7alho), &lt;section&gt; (sess\u00e3o), n\u00e3o teria sentido uma tag &lt;center&gt; (centro) que na verdade centraliza elementos e n\u00e3o define o local centro. Vale lembrar que o <strong>HTML \u00e9 uma linguagem de marca\u00e7\u00e3o<\/strong> e para \u201cestilizar o HTML\u201d utilizamos o CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Hora de praticar!<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bem, agora temos ferramentas e tags muito boas para trabalhar dando <strong>sentido aos elementos HTML<\/strong>, um leitor de tela ao se deparar com uma tag &lt;nav&gt;, por exemplo, entende que ali teremos um menu de navega\u00e7\u00e3o, ao se deparar com um &lt;footer&gt; se trata de um rodap\u00e9.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Com isso, o desenvolvimento fica muito mais flu\u00eddo e fica mais f\u00e1cil entender <strong>o que cada bloco de conte\u00fado representa no seu c\u00f3digo HTML<\/strong>. E melhorando a vida de todas as pessoas envolvidas<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Al\u00e9m das tags sem\u00e2nticas, temos alguns atributos das tags que ajudam a dar sentido para algumas coisas no HTML. O atributo <strong>alt<\/strong>&nbsp; prop\u00f5e um texto alternativo em uma tag de imagem &lt;img&gt;, por exemplo, d\u00e1 sentido a uma imagem que por qualquer motivo n\u00e3o possa ser visualizada.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hoje em dia \u00e9 muito importante para n\u00f3s devs nos preocuparmos com a <strong>sem\u00e2ntica no desenvolvimento<\/strong>. Muitas pessoas querem acessar nossos conte\u00fados e essa preocupa\u00e7\u00e3o ajuda demais. Bem como facilita quando outras pessoas devs v\u00e3o mexer no nosso c\u00f3digo. Organiza\u00e7\u00e3o e sentido faz uma diferen\u00e7a enorme. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bem, desejo que voc\u00ea tenha curtido o conte\u00fado e aprendido um pouco mais sobre a hist\u00f3ria do HTML e como deixar seu c\u00f3digo HTML e conte\u00fado do seu site com mais sentido. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um grande abra\u00e7o e at\u00e9 a pr\u00f3xima.<\/p>\n\n\n\n<div class=\"user-cta-block\" style=\"background-color:#2E333C;\"><p>Quer ter maior performance nos seus projetos web? Conhe\u00e7a o VPS Locaweb!<\/p><a class=\"user-cta\" style=\"background-color: #F00842\n;\" href=\"https:\/\/www.locaweb.com.br\/cloud\/vps-locaweb\/?utm_source=blog&amp;utm_medium=own&amp;utm_campaign=blog-vps-html-semantico&amp;utm_id=blog-vendas\" target=\"_blank\" rel=\"noopener\">CLIQUE AQUI!<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Ol\u00e1 pessoal, pokemaobr aqui novamente, hoje vamos falar um pouco sobre um tema que j\u00e1 dever\u00edamos estar falando a bastante tempo, por\u00e9m, sempre temos que relembrar as pessoas que isso existe, ainda mais quando estamos pensando em uma internet mais inclusiva e diversa. Vamos falar sobre HTML sem\u00e2ntico. Primeiramente, o ideal \u00e9 a gente tentar [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":38140,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-38125","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-aberto"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/38125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/comments?post=38125"}],"version-history":[{"count":19,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/38125\/revisions"}],"predecessor-version":[{"id":38270,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/38125\/revisions\/38270"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/media\/38140"}],"wp:attachment":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/media?parent=38125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/categories?post=38125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/tags?post=38125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}