{"componentChunkName":"component---src-templates-blog-post-js","path":"/en/writing/html-semantico/","result":{"data":{"site":{"siteMetadata":{"title":"Um site de um desenvolvedor de software","author":"Dheyson L. Alves","description":"Um site sobre computação e desenvolvimento","charSet":"utf8"}},"locales":{"edges":[{"node":{"ns":"translation","data":"{\"Home\":\"Home\",\"Escrita\":\"Writing\",\"Portfólio\":\"Portfolio\",\"Sobre\":\"About\",\"Últimas publicações\":\"Latest Posts\",\"Engenheiro de Software com mais de 3 anos de experiência na indústria. Ajudando empresas de diferentes nichos a atingir seu potencial com aplicativos de software.\":\"Software Engineer with more than 3 years of experience in the industry. Helping companies from different niches to reach their potential with software applications.\",\"Codando. Escrevendo. Aprendendo. Ensinando.\":\"Coding. Writing. Learning. Teaching.\",\"CSS, JAVASCRIPT, TYPESCRIPT, REACT E FRONT-END NO GERAL.\":\"CSS, JAVASCRIPT, TYPESCRIPT, REACT AND FRONT-END WORLD.\",\"Front-End Engineer\":\"Front-End Engineer\",\"Opa, e ai?\":\"Hey, what's up\",\"Página principal\":\"Main page\",\"Alguns artigos que escrevi\":\"Some articles I wrote\",\"Meus atuais projetos\":\"My current projects\",\"Que tal acender a luz?\":\"How about turning on the light?\",\"Que tal apagar a luz?\":\"How about turning off the light?\",\"Logo do Linkedin rede social\":\"Linkedin logo social network\",\"Minha rede profissional\":\"My professional network\",\"Logo do passado com cor branca do twitter\":\"Logo of the past with twitter color white\",\"Quer trocar uma ideia?, manda dm\":\"Want to exchange an idea?, send a dm\",\"social media\":\"Social Media\",\"Boa parte dos meus projetos\":\"Most of my projects\",\"Logo quadrada com fundo preto com texto DEV no meio de cor branca\":\"Square logo with black background with DEV text in the middle of white color\",\"Meus outros artigos em inglês\":\"My other articles in English\",\"Logo quadrada com fundo preto com símbolo de controle no meio\":\"Square logo with black background with control symbol in the middle\",\"Comunidade do discord da Coffer\":\"Coffer's discord community\",\"Todas as publicações\":\"All publications\",\"Postado em\":\"Posted in\",\"Uma página de erro que poderia encontrar a solicitação.\":\"An error page that could find the request.\",\"Ah não! Algo está errado...\":\"Oh no! Something is wrong...\",\"Você clicou em uma rota que não existe ... que pena.\":\"You clicked on a route that doesn't exist... what a pity.\",\"Dheyson L. Alves - Sobre\":\"Dheyson L. Alves - About\",\"Olá, sou Dheyson L. Alves\":\"Hi, I am Dheyson L. Alves\",\"Engenheiro de Software com 3 anos de experiência na indústria. Ajudando empresas de diferentes origens aatingir seu potencial com aplicativos de software.\":\"Software Engineer with 3 years of experience in the industry. Helping companies from different backgrounds reach their potential with software applications.\",\"Além disso, criei com estudantes universitários uma comunidade de desenvolvedores chamada CofferHub. Foco em ensinar e aprender juntos. Fico entusiasmado com as oportunidades em que posso trabalhar com produtos que impactam muitas pessoas. Além disso, trabalhar com uma equipe com uma mentalidade de crescimento e aprendizado.\":\"In addition, I created with college students a developer community called CofferHub. Focus on teaching and learning together. I am excited about the opportunities where I can work with products that impact many people. Also, working with a team with a growth and learning mindset.\",\"minutos de leitura\":\"reading time\",\"Escrito por\":\"Written by\",\"Pesquise por tags\":\"Search by tags\",\"artigo\":\"article\",\"artigos\":\"articles\",\"Artigo não encontrado\":\"Article not found\",\"Parece que você chegou a uma pesquisa que não existe. Por favor, use a navegação acima ou pesquise acima para encontrar o caminho de volta ao nosso site daora.\":\"It looks like you've come to a search that doesn't exist. Please use the navigation above or search above to find your way back to our cool website.\",\"Mais Artigos\":\"More Articles\"}","language":"en"}}]},"markdownRemark":{"id":"39a62cf7-82f9-5e98-8133-d87bd4262dda","excerpt":"A linguagem de marcação de hypertexto (HTML) possui elementos que determinam um meio de comunicação, seu conjunto de símbolos ou palavras buscam criar um…","html":"<p>A linguagem de marcação de hypertexto (HTML) possui elementos que determinam um meio de comunicação, seu conjunto de símbolos ou palavras buscam criar um significado para as máquinas entenderem. Possuir uma semântica, permite reforçar as informações contidas em uma página web e garantir uma “boa comunicação” para a máquina.</p>\n<h2>O que é semântica ?</h2>\n<p>No contexto de computação, nada mais que o significado de uma palava, ou no caso, do código. No HTML, nada mais que é atrelado a função de determinada tag frente ao conjunto de tags na página web.</p>\n<h2>Porque devo me preocupar ?</h2>\n<p>No lançamento da versão 5 do HTML, algumas novas tags surgiram com a finalidade de trazer organização sintática e semântica as páginas web. Segue abaixo apenas alguns dos novos elementos:</p>\n<ul>\n<li><code class=\"language-text\">&lt;article></code></li>\n<li><code class=\"language-text\">&lt;header></code></li>\n<li><code class=\"language-text\">&lt;main></code></li>\n<li><code class=\"language-text\">&lt;footer></code></li>\n</ul>\n<p>Em conjunto com as adições, a nova forma de escrita permitiu maior clareza para os computadores e também para os leitores de tela, permitindo uma melhor acessibilidade na web.</p>\n<p>Existem algumas vantagens que podem responder a pergunta, segue abaixo:</p>\n<ul>\n<li>Hoje os indexadores do Google (SEO) analisam a semântica como forma de identificar o conteúdo da página. O próprio google criou tutoriais informando como sua página deve ser apresentada. As metatags fazem um papel importante aos indexadores, mas hoje, não apenas as meta descrições são suficientes, mas também a semântica do corpo da página.</li>\n<li>Organização do código, antes das novas tags, eram comum existir uma infinidade de tags <code class=\"language-text\">&lt;div></code> sem significado, dificultando os indexadores e os desenvolvedores a identificar qual a finalidade de determinado bloco. Pensando de forma semântica na escrita, eliminamos os problemas de legibilidade.</li>\n<li>Servem como sinalizadores para leitores de tela e ajudam os deficientes visuais a navegar em uma página.</li>\n</ul>\n<h2>Como utilizar da semântica a seu favor ?</h2>\n<p>Questione-se primeiro, esse elemento ou componente que estou criando, qual sua finalidade ?\nComo ele deve interagir com os outros elementos ? Uma lista ordenada dentro de um artigo ? Com algumas dessas perguntas, você aos poucos vai identificando o contexto do seu componente e como montar utilizando as tags do HTML de forma semântica.</p>\n<p>Segue abaixo um trecho de código com estrutura semântica:</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>header</span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>header</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>section</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>article</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>figure</span><span class=\"token punctuation\">></span></span>\n   <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>img</span><span class=\"token punctuation\">></span></span>\n   <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>figcaption</span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>figcaption</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>figure</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>article</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>section</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>footer</span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>footer</span><span class=\"token punctuation\">></span></span></code></pre></div>\n<h2>Conclusão</h2>\n<p>Existem grandes vantagens para sua página web e seu time em utilizar a marcação semântica. Pode te ajudar a ganhar tempo em busca de um determinado bloco de código, ou ajudar a ter seu site no topo dos índices de busca do Google.</p>\n<h2>Referências</h2>\n<ul>\n<li><a href=\"https://www.w3.org/TR/html5-diff/#syntax\">HTML5 Differences from HTML4</a></li>\n<li><a href=\"https://en.wikipedia.org/wiki/Semantic_HTML\">Semantic HTML</a></li>\n<li><a href=\"https://developer.mozilla.org/pt-BR/docs/Glossary/Semantics#sem%C3%A2ntica_em_html\">Semântica em HTML</a></li>\n</ul>","timeToRead":2,"frontmatter":{"title":"HTML Semântico e porque você deveria se preocupar com isso?","date":"July 04, 2022","description":"A linguagem de marcação de hypertexto (HTML) possui elementos que determinam um meio de comunicação, seu conjunto de símbolos ou palavras buscam criar um significado para as máquinas entenderem.","tags":["HTML"]}}},"pageContext":{"slug":"/html-semantico/","previous":{"fields":{"slug":"/pair-programming-vscode-tools/"},"frontmatter":{"title":"Pair Programming e extenções para auxiliar na produtividade","tags":["GERAL"]}},"next":null,"language":"en","i18n":{"language":"en","languages":["pt","en"],"defaultLanguage":"pt","generateDefaultLanguagePage":false,"routed":true,"originalPath":"/writing/html-semantico/","path":"en/writing/html-semantico/"}}},"staticQueryHashes":["63159454"]}