03 - por um HTML mais organizado: tags importantes para a estruturação do conteúdo
- #HTML
Agora iremos começar a escrever o html do conteúdo que o nosso usuário irá visualizar: o que fica dentro da tag body. Para começar iremos pensar na nossa estrutura de página: de início temos um ícone e o título do projeto em cima de todo o nosso conteúdo, em baixo temos nosso rodapé e por fim, ao centro, temos toda a estrutura do Decoder.
Levando isso em conta, precisamos separar nosso body em três partes, muito simples:
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
Dessa forma, dentro do header vamos escrever o que for relacionado ao nosso cabeçalho, em seguida podemos escrever todo o projeto dentro da main e concluir nossa página com um rodapé, com seu conteúdo dentro da tag footer. É importante destacar que essa organização ajuda o nosso código no que diz respeito a SEO, sendo que além de organizado, ele também será melhor lido pelo navegador.
Por fim, precisamos pensar em como vamos estilizar isso quando chegarmos ao css. De forma bastante simples vamos escrever algo que identifique essas tags lá no css. Poderíamos utilizar o nome delas? Sim, mas e se tivermos mais de um cabeçalho, por exemplo? ( é possível, não nesse projeto, mas em projetos maiores podemos ter o cabeçalho principal e cabeçalhos secundários de cards ou seções por exemplo).
Nesse caso, vamos escrever um atributo nas tags chamado classe, ele irá servir como um identificador para nossa tag, e se tivermos outras tags header, por exemplo, podemos adicionar uma outra classe para identificá-la. Agora teremos nossa estrutura organizada da seguinte forma:
<body>
<header class="c-header">
</header>
<main class="container-general">
</main>
<footer class="footer">
</footer>
</body>
Atualmente, eu costumo escrever minhas classes em inglês e seguindo o padrão BEM, vou deixar o link de um artigo sobre esse tal de BEM para você ter uma ideia e quem sabe seguir junto comigo nesse projeto: https://desenvolvimentoparaweb.com/css/bem/. Um abraço, e até a próxima.
artigo em meu blog: https://francileudo-frontend.blogspot.com/2022/08/03-por-um-html-mais-organizado-tags.html
