Como construir um bom HTML
Além de aprender sobre como utilizar as tags do HTML, se você se aprofundar ainda mais vai descobrir que tem como criar suas próprias tags e utilizar CSS para personalizar elas. Enfim, existe um mar enorme de possibilidades de como você pode construir a sua página com um simples HTML.
Nesse contexto vai ser apresentado algumas boas práticas que você pode levar em conta na hora de criar sua página, claro que nada aqui é regra, mas são dicas que a longo prazo podem fazer uma longa diferença.
Formatação do código
Identação
João é um cara que está aprendendo HTML, ele deseja aprender para criar o seu próprio portfólio. João é um cientista de dados que só sabe um pouco de Python e manja bastante de R, para ele HTML é algo totalmente novo e ainda tá pegando o jeito.
João está fazendo uma página em HTML que já tem mais de 300 linhas, ele vê a página dele e acha GENIAL, tanto que ele apresenta ela para um amigo programador. O amigo vai ver o código-fonte da página e se impressiona em como está difícil entender como funciona. Simplesmente o código é grande, está mal identado e vira um bicho de sete cabeças para entender toda a genialidade de João.
Para visualizar melhor, observe o exemplo abaixo de um código mal identado:
Esse código bem identado é da seguinte forma:
Olhe como o detalhe de acrescentar o TAB entre as tags já deixa o código bem mais legível e facilita bastante a compreensão. Imagine tentar entender um código-fonte de 1000 linhas sem estar "identado"? Seria muito complicado e tedioso de entender o código.
Uso do espaço
Além de separar as tags entre linhas, também é possível encontrar casos de códigos como esse:
Assim como no exemplo acima devemos "identar" o código para que ele se torne o mais legível possível:
Então use bastante as teclas TAB, SHIFT-TAB e ESPAÇO na hora de impressionar seu amigo programador!
Comentários
Comentar o código é algo que é muito discutido quando se trata de linguagens de programação como JavaScript, Java, Rust, etc. No HTML a discussão é diferente, é justamente não comentar o código!
Uma das razões disso é que o código HTML é de fácil compreensão e autoexplicativo. Então pode dispensar ter que comentar cada seção da sua página, se preocupe em que seu código-fonte esteja bem organizado e fácil de se aprender como funciona!
Mesmo que você queira usar, prefira por poucos e breves comentários.
Controle na quantidade de divs
É muito fácil e comum fazermos um uso exagerado de divs para estilizar e estruturar os componentes da página. Para evitar esses usos exagerados devemos usar as diversas tags do HTML para evitar criar uma lista longa de divs. Uma boa forma é utilizar as tags que deixam a semântica do site bem compreensível, como separar o site com <section>, <article>, <footer>
, etc. Essa página fala mais sobre: https://blog.geekhunter.com.br/voce-conhece-html-semantico/
Segue o exemplo com o uso de uma enorme quantidade de divs para uma postagem de um site de notícias:
Podemos simplificar esse código e utilizar outras tags HTML para facilitar a compreensão do código e também tornar mais bonito:
Observe como reduzimos a quantidade de divs para zero e ainda deixamos o código mais bonito.
Estrutura da página
<DOCTYPE html>
Talvez você esteja apenas tentando criar uma página simples e que não vá ter muitos elementos. Como um simples formulário de login e então é apenas usados estruturas básicas do HTML, como:
Mesmo que a sua página seja simples como essa, ainda é necesário que você use toda a semântica do html, já que faltam elementos fundamentais como <title> no <header>
, já que sua página nem se quer tem um título na aba do navegador.
No caso de criar uma página simples, não deixe de ser perfeccionista! Use toda a estrutura que o HTML pode proporcionar ao seu código, ter uma página com toda a estrutura do HTML facilita para as engines de busca para entender a sua página e também garante que vai funcionar em todo lugar.
O código com toda estrutura é o seguinte (e com algumas pequenas edições para deixar o código mais limpo):
<h1>
Nas páginas web a tag <h1>
normalmente é utilizado pelas search engines para procurar elementos que representam o conteúdo da página. Logo é importante que você use apenas um <h1>
na sua página e se precisar de mais pode abusar do <h2>, <h3>, etc
.
style="color: green; font-family-size: Tahoma; font-size; 32px; font-weight: bold;"
Em algumas situações queremos aplicar um estilo a apenas um elemento da página, então atribuímos a tag style="..."
ao elemento, ou queremos alterar uma propriedade do CSS como a cor do texto.
Mesmo que seja um quebra-galhos em algumas situações o uso do style="..."
pode ser uma má prática. Quanto mais precisarmos alterar as propriedades CSS do elemento, mais vamos tornar o código-fonte da página complexo e também teremos interferências com o próprio código CSS da página, dificultando a interpretação.
Então quando quiser criar um estilo único a algum elemento da página é recomendável editar o próprio CSS da página.
Last updated