Por que devemos usar tags como p, span, hx quando podemos usar CSS?

Por que devemos usar tags como p, span, hx quando podemos usar CSS? É importante do ponto de vista de SEO?

A versão curta é que as várias tags e CSS têm finalidades diferentes.

<h1>Whatever</h1>, por exemplo, carrega uma certa quantidade de significado junto com seu uso: "Este é um cabeçalho, um importante - primeiro nível" e assim por diante. Alguns analisadores também usam as tags hx (e outras) para criar um esboço da estrutura do documento que pode ser usado para qualquer coisa, desde processamento de dados até acessibilidade (por exemplo, leitores de tela pulando para a próxima pergunta na página inicial de webmasters, pulando para a próxima h3) .

Você não pode descartar as tags semânticas com base no que você pode fazer com CSS e vice-versa.
Você pode aplicar CSS para outro tag para torná-lo olhar o mesmo que o h1, por exemplo: <span style="font-weight:bold;font-size:2em">Whatever</span>mas isso ainda não faz esse período tag um verdadeiro cabeçalho em termos de função e semântica. Nesse caso, esse esboço ao qual vinculei acima seria praticamente impossível porque esses períodos não são cabeçalhos, mas apenas algum texto que você arbitrariamente tornou grande e arrojado.

Marcação e apresentação são diferentes

É como perguntar "por que deveríamos ter paredes quando pintamos?" :)

Tags HTML indicam qual é o seu conteúdo - este é um título, uma lista etc.

CSS denota a aparência do seu conteúdo - as manchetes devem ser azuis, as listas devem ser recuadas tanto, o menu deve estar à esquerda, etc.

Javascript indica como sua página deve se comportar - animações etc.

Portanto, sem conteúdo HTML, CSS e Javascript realmente não têm nada para trabalhar.

Essas categorias não são 100% em preto e branco - por exemplo, o CSS pode especificar "transições" agora, que são animações - mas são a ideia básica.

Consulte as discussões anteriores sobre este tópico no StackOverflow aqui e aqui .

Uma boa marcação economiza muito esforço e funciona melhor

Se você deseja que algo se comporte como um link, você pode usar <span class="mylink">e usar um monte de CSS e JS para fazer com que pareça e pareça certo. Ou você pode simplesmente usar um <a>elemento e obter tudo isso de graça, sem código adicional para baixar, porque os navegadores já sabem o que fazer e têm a lógica implementada em código nativo rápido. Além disso , é muito mais provável que funcione corretamente para leitores de tela, navegadores móveis, mecanismos de pesquisa, agregadores e outros casos de uso em que você não pensou.

É também por isso que você deve usar um <button>para ações clicáveis, um <label>para rotular um <input>e um <main>para a seção principal da sua página.

Como a boa marcação afeta o SEO

Fundamentalmente, SEO é convencer os mecanismos de pesquisa de que seu conteúdo é a melhor correspondência para um termo de pesquisa. Obviamente, ninguém no Google está lendo pessoalmente todas as páginas da web e classificando-as.

Portanto, para que os mecanismos de pesquisa saibam qual é o seu conteúdo, um programa precisa analisá-lo.

E ei, olhe! Temos toda essa linguagem chamada HTML, destinada a rotular seu conteúdo de uma maneira que as máquinas possam entender! :)

Portanto, a marcação clara ajudará os mecanismos de pesquisa a indexar melhor suas páginas.

Para usar um exemplo extremo, se o título da sua página fosse realmente uma fotografia que você tirou de um título de jornal, ela poderia parecer interessante e as pessoas poderiam lê-lo muito bem, mas para um mecanismo de pesquisa, seria apenas uma imagem sem significado . Considerando <h1>Turtle Groomer 5000</h1>que diz claramente aos mecanismos de busca que você tem um produto que facilita a higiene testicular.

Pense também em pessoas com algum tipo de deficiência que (como exemplo) precisam usar um leitor de braille. Nesses casos, as tags html são muito mais importantes que os estilos visuais de CSS.

Su respondeu a parte semântica. Com relação ao SEO, você verá que o elemento h1 recebe mais peso pelos mecanismos de pesquisa do que outras tags. As tags h2 / b / strong recebem um pouco mais de peso do que o texto comum.

A maioria das outras tags é praticamente igual, mas você deve sempre usar a tag mais apropriada para o trabalho. O Google começou recentemente a analisar tabelas quando usado para dados tabulares, e outro HTML usado adequadamente pode dar sinais de que o conteúdo é mais importante que outros.

Para HTML5, confira negrito e itálico no HTML5 .

Resumo:

Use <b>quando desejar que o texto tenha um estilo diferente sem importância contextual, mas use <strong>quando desejar que o texto tenha importância extra a partir de uma perspectiva de conteúdo ou SEO.

Use <i>para compensar o humor do texto, mas use <em>para tornar o texto enfático.

Além disso: não esqueça a importância da semântica para usuários com deficiência. O software de leitura de tela depende dessa semântica para apresentar às pessoas cegas o contexto necessário em que estão perdendo por causa de sua deficiência.

Em primeiro lugar, <hx>é uma tag bastante importante, pois define os cabeçalhos, como outros já mencionaram. Os cabeçalhos são muito úteis, não apenas para a aparência, mas porque separam as seções de uma maneira que uma aparência não pode. Basta dar uma olhada na Wikipedia, por exemplo. Alguns programas dependem desses tipos de tags para "separar" documentos ou até mesmo criar um índice automático. Um mecanismo de pesquisa presume que o texto em uma <h1>tag seja mais importante, pois é um título - um título.

Em seguida, enquanto as folhas de estilo são ótimas, alguns dispositivos ignoram as folhas de estilo e se concentram apenas no HTML, onde é <em>útil uma tag como essa . Se as folhas de estilo foram desativadas ou houve um problema ao carregá-lo (por exemplo, problemas de conexão com a Internet), o texto ainda aparece formatado. <em>também se poderia dizer que deveria haver ênfase na palavra, enquanto o itálico pode ser qualquer coisa, desde o título do filme até fazer com que a legenda da imagem seja diferente do texto comum. Isso pode ser usado por aqueles que usam ferramentas de incapacidade, que, de outra forma, não conseguem captar a ênfase em geral.

<span>, por outro lado, é em grande parte uma versão embutida da <div>tag e, se for o caso, pode evitar que você digite uma classe extra (com isso dito, você realmente gostaria de usar em <span class="italic">vez de <i>para cada instância em itálico Isso torna o código mais difícil de ler, menos padronizado (sob a ampla suposição de que a maioria das pessoas usaria o último sobre o primeiro) e não aprimora o documento.

<p>também é útil para pessoas com deficiência, pois garante que o texto possa ser dividido em parágrafos gerenciáveis ​​de uma maneira que <br />não pode.

Certamente, podemos dizer que o HTML não era para ser estilizado, mas há uma linha delicada entre design e estilo; e, francamente, eu diria que é a preferência do usuário. Se você usa <i>ou <span class="italic">, depende de você, e não fará diferença para o SEO. Afinal, por que nos limitar a apenas uma maneira de fazer as coisas? (como poderíamos optar por usar ou não ponto-e-vírgula no final das linhas no JavaScript - eu sempre os uso, enquanto outros nunca os usam, e isso não faz nenhuma diferença na funcionalidade.)