Arquitetura de Documentos HTML
A construção de uma página web sólida começa com uma estrutura de documento bem definida. O uso correto da declaração DOCTYPE e das meta-tags no cabeçalho garante que o navegador interprete o conteúdo e a codificação de caracteres corretamente.
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Descrição otimizada para SEO do seu site.">
<meta name="keywords" content="tecnologia, desenvolvimento, frontend">
<title>Exemplo de Estrutura Profissional</title>
</head>
<body>
<!-- Conteúdo da página -->
</body>
</html>
Tags como <img>, <br>, <input> e <meta> são classificadas como elementos vazios ou auto-contidos, o que significa que não possuem uma tag de fechamento separada.
Categorização de Elementos e Semântica
No HTML, os elementos são divididos principalmente em dois tipos de comportamento visual:
- Block-level: Ocupam toda a largura disponível e começam em uma nova linha (ex:
<div>,<p>,<section>). - Inline: Ocupam apenas o espaço necessário para o seu conteúdo (ex:
<span>,<a>,<strong>).
A introdução do HTML5 trouxe tags semânticas que ajudam os motores de busca e tecnologias assistivas a entenderem o papel de cada seção:
<header>Cabeçalho principal</header>
<nav>Menu de navegação</nav>
<main>
<article>Conteúdo independente</article>
<aside>Conteúdo lateral relacionado</aside>
</main>
<footer>Rodapé institucional</footer>
Gestão de Estilos com CSS
Para garantir consistência visual entre diferentes navegadores, é uma prática recomendada utilizar um "CSS Reset". Isso remove as margens e preenchimentos padrão impostos pelos browsers.
/* Exemplo simplificado de Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
line-height: 1.5;
font-family: Arial, sans-serif;
}
Especificidade e Cascata
O CSS segue uma hierarquia de peso para os seletores. A ordem de prioridade crescente é: Tipo (Tag) < Classe < ID. Se houver conflito de regras, o seletor com maior especificidade ou o que foi declarado por último (em caso de empate) prevalecerá.
/* Baixa especificidade */
p { color: blue; }
/* Média especificidade */
.texto-destaque { color: green; }
/* Alta especificidade */
#item-unico { color: red; }
O Modelo de Caixa (Box Model)
Cada elemento no HTML é representado como uma caixa retangular. O tamanho total dessa caixa é influencaido por:
- Content: O conteúdo real (texto, imagem).
- Padding: Espaço interno entre o conteúdo e a borda.
- Border: A linha que envolve o preenchimento.
- Margin: Espaço externo que separa o elemento de outros.
A propriedade box-sizing: border-box é amplamente preferida por desenvolvedores modernos, pois inclui o padding e a border no cálculo da largura total do elemento, facilitando o design responsivo.
.card-informativo {
width: 300px;
padding: 20px;
border: 5px solid #ccc;
box-sizing: border-box; /* Largura total continua 300px */
}
Estratégias de Layout
Antes da popularização do Flexbox e Grid, duas técnicas eram fundamentais para organizar elementos em colunas:
1. Utilizando Floats
Ao usar float: left, é necessário "limppar" o fluxo para evitar que elementos subsequentes quebrem o layout. O método clearfix é a solução padrão:
.container-limpo::after {
content: "";
display: table;
clear: both;
}
.coluna {
float: left;
width: 33.33%;
}
2. Elementos Inline-Block
Definir display: inline-block permite que elementos fiquem lado a lado, mas cria espaços vazios indesejados (provenientes do espaço em branco no código HTML). Uma forma de mitigar isso é comentar o espaço entre as tags:
<div class="item">Conteúdo 1</div><!--
--><div class="item">Conteúdo 2</div>
Unidades e Cores
Para maior flexibilidade, utilize unidades relativas como em (baseada no tamanho da fonte do elemento) ou % (baseada no elemento pai). Para cores, o formato rgba() permite controlar a opacidade, essencial para camadas visuais complexas.
.overlay {
background-color: rgba(0, 0, 0, 0.5); /* Preto com 50% de transparência */
padding: 2em;
}