Organizar os elementos HTML de acordo com a semântica e ordem visual desejada, sem se preocupar com a ordem lógica no código, uma vez que o CSS pode ser utilizado para rearranjar a apresentação final da página. 

Cada elemento HTML deve ser utilizado para o fim que ele foi criado, assim uma marcação semântica adequada deve ser utilizada para designar os cabeçalhos (h1, h2, h3), as listas (ul, ol, dl), texto enfatizado (strong), marcação de código (code), marcação de abreviaturas (abbr), marcação de citações longas (blockquote). 

Definir a hierarquia do conteúdo por meio de propriedades CSS, como tamanho da fonte e cor do texto, evitando tags como <h1>, <ul>, ou <strong>. 

Utilizar a tag <div> para todos os elementos de uma página, como cabeçalhos, parágrafos e listas, aplicando classes CSS para definir seu significado visual e estrutural. Dessa forma, se mantém o controle lógico sobre o layout, independentemente da estrutura semântica do HTML. 

Adotar o uso de tags <script> para estruturar a lógica da página, enquanto a semântica fica por conta dos elementos HTML.