Semântica no HTML 5
Evolução da Semântica: HTML 5
Antes do HTML 5, a construção de sites baseava-se principalmente no uso extensivo de <div> e <span> com atribuição de ID, resultando em uma estrutura pouco semântica. O exemplo abaixo ilustra esse método:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título</title>
</head>
<body>
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</body>
</html>Com o advento do HTML 5, uma revolução semântica ocorreu. Diversas novas tags foram introduzidas, cada uma carregando consigo um significado específico. Esse avanço possibilitou a criação de sites mais semânticos e compreensíveis. No exemplo a seguir, podemos observar a transição para uma estrutura HTML mais semântica:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título</title>
</head>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>A utilização das novas tags como <header>, <main>, e <footer> demonstra a mudança em direção a uma marcação mais descritiva e compreensível. Essa abordagem não apenas simplifica o código, tornando-o mais legível, mas também contribui para uma melhor interpretação por parte dos motores de busca e tecnologias assistivas.