Não existe nenhum site em HTML perfeito para todos os navegadores (sem variação alguma), infelizmente não é fácil trabalhar com tanta diferença. Por isso buscamos alternativas que facilitam nosso trabalho, evitando problemas com a incompatibilidade do site com um navegador X. Além disso, devemos organizar a estrutura que vamos criar, facilitando modificações, economizando tempo e evitando gambiarras.

Trabalho nas horas vagas com HTML e digo com segurança que a grande maioria dos blogs e sites que faço funciona bem em qualquer navegador atual (Chrome, Opera, Firefox e Internet Explorer 8). Não há segredo algum! É tudo uma questão de organização! HTML é a parte estrutural de qualquer site, então seja organizado e o resultado vai ser muito bom!

Fiz uma estrutura básica de um layout para blogs, vamos ver na prática o que é organização:

Clique aqui para ver o código HTML / Clique aqui para ver o código em funcionamento.

A marca <div> define uma divisão ou uma seção em um documento HTML.
A marca <div> é frequentemente usada para agrupar blocos elementos para formatá-las com estilos.
Fonte: www.w3schools.com

 

• Como funciona essa estruturação

Procuramos sempre dividir o layout em partes, da maior pra menor (mais detalhada) DIV.
Nesse modelo separamos o topo (header), menu, conteúdo (content) e a parte inferior (footer). Essas são as principais divisões que fazemos para esse modelo que criamos. Após isso, fazemos as divisões internas em cada parte e assim prosseguimos.
Cada layout vai exigir uma organização diferente, não existe uma regra, por isso devemos pensar no desenho do site/blog primeiro, depois em como vamos dividir suas partes e por fim fazemos a codificação.

O código HTML vai ficar muito maior, porém muito mais organizado como falei acima.
Vamos dar um exemplo como isso irá te ajudar: Caso eu queira trocar toda a parte superior do blog/site (header), vou lá, apago a header atual e seu CSS, crio outra no lugar e nada será prejudicado, pois o restante do esqueleto está independente dessa parte do código.
Quanto aos navegadores devemos pensar o seguinte: Simplicidade no código! Trabalhar com retângulos é a forma mais fácil de ser interpretada já que não existem códigos não muito comuns no meio.
Salve o código que desenvolvi, apague alguma das partes criadas e veja na prática o que estou falando.

• Melhor visualização dos códigos

Cada pessoa encontra suas formas de melhorar a visualização dos códigos, é tudo uma questão de tempo. Se você tem dificuldades em ver onde começa e termina cada parte do layout te oriento a fazer comentários no HTML da seguinte forma:

<!—- HEADER -->
<div id=\"header\">
</div>
<!—- fim HEADER -->

Fazer comentários no HTML ajuda e muito, pois é extremamente comum até o próprio autor do layout ficar perdido na hora de fazer alguma edição.

Espero ter ajudado.
Grande abraço.