Hello meus queridos Front-enders. Nesta matéria eu vou compartilhar com vocês a importância das boas práticas em HTML e por que deveríamos prestar mais atenção a esta linguagem de marcação de texto.
Nós como desenvolvedores muitas vezes deixamos para trás o aprofundamento dessa linguagem, às vezes achamos que são só A verdade é que o HTML é muito importante para as empresas e, principalmente se estamos desenvolvendo uma landing page, pois é esse HTML que será mapeado pelo google ou qualquer outro motor de busca na internet. Então um Vou passar por essa parte rapidinho porque imagino que muitos de vocês já sabem, mas vou fazer umas anotações curtinhas sobre. O Doctype vai falar para o navegador que tipo de documento você está escrevendo. Esta é a primeira e mais fundamental tag a ser utilizada no nosso HTML. Onde vamos incluir os metatags que mencionarei aqui abaixo: É aqui onde a gente comunica as “configurações” para os browsers e para os motores de busca. Como assim? Isso quer dizer que nos meta tags eu vou indicar a codificação do idioma a ser utilizado, o viewport — para identificar o dispositivo desde onde está sendo visualizado o nosso layout e poder apresentar o conteúdo no melhor formato possível. Além disso, vai informar o título e descrição, que é o mais básico e o mais importante, pois essas palavras-chave serão as que o google irá procurar. Então, imagina que você faz um site lindo, maravilhoso com um layout impecável, mas os acessos a ele são muito poucos. Isso é meio triste, sentir que seu trabalho não foi muito útil. Por isso o primeiro que devemos pensar é: “como eu posso utilizar essas metatags ao meu favor?” Mencionando também que é nas metatags que vamos colocar o nome do autor do site, ou seja, você! Você vai levar o crédito do seu produto se souber utilizar as metatags corretamente. Vale mencionar que, às vezes, as empresas preferem deixar esse assunto para as equipes de marketing. Mas, como desenvolvedora, acredito que esse é um conhecimento muito valioso e importante para podermos contribuir positivamente ao nosso cliente ou empresa, além de facilitar o trabalho da equipe de marketing. Indico também ter um pouco de conhecimento sobre Schema.org, que também são metatags e que ajudam a ter um ótimo rankeamento nos motores de busca. >>Leitura Recomendada: Seguramente vocês já sabem o que é HTML5, se não, convido vocês a lerem um pouco de história do HTML aqui. Basicamente, a padronização do HTML5 facilitou a manipulação dos elementos. Mas como assim? A gente não manipula os elementos com CSS e js? Sim, só que não. Aliás, se você estiver aprendendo CSS também, vale conferir esse artigo com os principais erros de CSS que você não pode cometer. Tinha alguns componentes, hoje muito utilizados, como o drag and drop, que eram extremadamente complexos de manipular com Javascript por causa de restrições das versões anteriores do HTML. Hoje em dia as modificações das características dos elementos são um pouco menos intrusivas e mais transparentes. Beleza, já que revisamos o conceito de HTML5 devemos lembrar a categorização de elementos de conteúdo que tem duas classificações básicas: Essas classificações tem regras básicas, que às vezes passamos por alto e é muito importante sempre seguirmos o padrão de desenvolvimento. Essas regras são: Além dessas categorias, o grupo WHATWG classificou os dois tipos de elementos em várias outras categorias: Na imagem abaixo podemos ver como se relacionam os conjuntos das categorias, que podem ser incluídas por outro conjunto de categorias e quais não. >>Leitura Recomendada: Como mencionei no começo da matéria, a evolução do HTML é focada no objetivo de os browsers e robots na internet que procuram conteúdo conseguirem achar ou mapear mais facilmente os elementos dentro dos nossos sites. Por isso o HTML incluiu as tags abaixo, com o intuito de que nós, desenvolvedores, possamos formatar o conteúdo do site de forma intuitiva para os navegadores, classificando corretamente cada parte de nosso código. Bom, meus queridos front-enders, como conclusão queria deixar para vocês a importância de um bom planejamento da estrutura de nossos sites. Que vocês tenham sempre em conta a categorizações das tags, as novas tags para classificar o tipo de conteúdo dentro do site e a importância dos metatags para as empresas. Até a próxima.
Além de HTML, se você quer construir um site ou uma página que esteja adequado aos motores de busca, não pode deixar de aprender sobre HTML semântico. Estrutura Básica de HTML
O documento HTML é basicamente uma árvore de elementos, onde existe uma hierarquia de pais e filhos. O pai principal dessa grande árvore é a tag HTML.
Onde vamos linkar todos os recursos externos; css, js. O que são Metatags
Mercado front-end: a origem e o futuro da áreaClassificação das tags do HTML
Quais os melhores editores de código para HTML, CSS e JavaScript?Novas tags incluídas no HTML 5
Section Se refere a uma nova seção genérica dentro do body Nav Representa uma seção do site que contém links. Nem todos os grupos de links devem ser elementos nav, só aqueles que contém links importantes como na seção do rodapé ou do header Article É a representação de conteúdo que irá na página principal como artigos, posts ou informação relevante Aside Utilizado para sidebars ou blocos destinados a publicidade Hgroup Agrupa os elementos do H1 a H6 Header Basicamente se refere ao conteúdo normalmente contido no menú do topo dos sites Footer Envolve o conteúdo do rodapé do site Time Serve para marcar parte do texto que exibe um horário ou uma data precisa no calendário gregoriano. Conclusão
Geekhunter







