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ó <div> com classes e pronto.
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.
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.
Então um <div> não vai dizer nada para o Google, mas um <iframe>, por exemplo, sim. Então, o que eu preciso saber para desenvolver uma landing page de forma consciente? Vamos ver alguns tópicos nesta matéria.
Estrutura Básica de HTML
Vou passar por essa parte rapidinho porque imagino que muitos de vocês já sabem, mas vou fazer umas anotações curtinhas sobre.
<!DOCTYPE html!>
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.
<html lang=”pt-br”>
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.
<link rel=”stylesheet” type=”text/css” href=”estilo.css”>
Onde vamos linkar todos os recursos externos; css, js.
<head>
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:
Mercado front-end: a origem e o futuro da área
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:
- Elementos de linha: Identifica os textos como; a, strong, em, img, input, abbr, span.
- Elementos de bloco: Blocos de código como div, section, containers
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:
- Os elementos de linha podem conter outros elementos de linha, dependendo da categoria. Exemplo: o elemento <a> não pode ser pai do elemento <label>.
- Os elementos de linha nunca podem conter elementos de bloco.
- Elementos de bloco sempre são pais dos elementos de linha.
- Elementos de bloco podem ser pais de elementos de bloco.
Além dessas categorias, o grupo WHATWG classificou os dois tipos de elementos em várias outras categorias:
- Metadata content: Basicamente as tags dentro do head
- Flow content: Composto principalmente pelos elementos utilizados no <body>
- Sectioning content: Elementos que definem um grupo de conteúdo; article, section
- Heading content: Todos los elementos <h>
- Phrasing content: Marcam o texto do documento; a, b, code, button etc
- Embedded content: Elementos que vem de outra fonte de informação: audio, canvas, embed etc
- Interactive content: Tags que interagem com o usuário: select, iframe etc
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:
Quais os melhores editores de código para HTML, CSS e JavaScript?
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.
| 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
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.
