Estrutura Básica do HTML

#html #webdev #beginners #braziliandevs

O documento HTML possui algumas tags que são consideradas como tags estruturais, importantes para que seu HTML funcione e haja um bom desempenho com o navegador. Iremos passar por algumas definições e convenções básicas.

Entendendo as tags

O HTML5 há em torno 8 grupos de tags:

estruturais
metadados
formulário
formatação
lista
tabela
script
conteúdo embutido

As tags são formadas por uma estrutura única, iniciam com o sinal de "menor que" (<) e se encerram com o sinal de "maior que" (>) <h1>Olá!</h1>. É importante destacar que há tags que é opcional haver uma tag de fechamento para si, elas são chamadas de optional closing tag <html>, enquanto há tags que podem fechar em si mesmas ou haver uma tag de fechamento, as self closing tags <br />

As tags podem ser definidas como block-level ou inline. Respectivamente, uma tag block-level ocupa toda a largura do seu elemento pai, criando assim um bloco, enquanto a tag inline ela se posiciona em linha. sem alterar sua largura.

Tags Estruturais Básicas

Existe ao menos 19 tags estruturais no HTML5, mas nem todas elas são realmente utilizadas. Você pode tentar decorá-las, mas não há muita necessidade de depositar tanta energia assim. As mais importantes que você deveria saber além das <html>, <head>, <body> são as:

cabeçalho: <header>
barra de navegação: <nav>
conteúdo principal: <main>, com elementros filhos representados por <article>, <section>, <div>
barra do canto: <aside>; geralmente inserido dentro do elemento <main>
rodapé: <footer>

Vamos para suas definições

<header> Representa um conteúdo introdutório. Pode conter elementos de título, mas também logos, uma barra de pesquisa, nome do autor, etc.
<nav> Representa uma seção da página cujo objetivo é prover navegação de links. Podendo ser links internos (dentro da página) ou externos (fora da página)
<main> Reresenta o conteúdo dominante dentro do <body>. Consiste no elemento que está diretamente relacionado com o tópico central do site.
<article> Representa uma composição independente, destribuitiva e reusável. Exemplos: uma postagem, um artigo, um comentário de um usuário.
<section> Representa uma seção genérica de um site. Seções devem sempre possuir um título (heading), com poucas exceções.
<div> Elemento genérico. Não possui nenhum efeito no conteúdo ou layout até que seja estilizado com algum CSS. Geralmente usado com flexbox.
<aside> Representa uma porção do documento que está indiretamente relacionado com o conteúdo principal da página. Geralmente são representadas por barras laterais.
<footer> Representa um rodapé. Normalmente possui informação sobre o autor, dados de copyright e links para documentos relacionados.