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

43

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

sangee
fonte
2
Vejo como você poderia usar CSS com tags span ou p para fingir ser tags hx, mas como você usaria CSS para estilizar texto sem nem mesmo tags p ou span?
Joshuahedlund #
Uma resposta meio sarcástica, meio séria é: tente ficar sem eles. Use <span>para tudo e veja se você pode realizar o que deseja apenas com CSS. Você provavelmente aprenderá muito tentando segmentar os vãos certos e fazê-los se comportar como outros elementos. (Embora a lição mais provável seja "não faça isso").
Nathan Long

Respostas:

67

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.

Su '
fonte
41

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.

Nathan Long
fonte
2
"Por que deveríamos ter paredes quando pintamos?" ~ Essa é uma pergunta maravilhosa? Obrigado!
Evik James #
Acho que os nomes das tags são a parte confusa da marcação - H1, H2 etc. podem ser usados ​​pelos leitores de tela e pelas pessoas que a visualizam. Dito isto, 99% do mundo verá uma página e, portanto, por mais que perturbe os amantes de SEO, as tags H são marcadores visuais, assim como <b>uma vez ousadas.
Chris S
@ ChrisS - Eu não acho que é confuso. As tags sempre devem ser lidas por máquinas; isso inclui navegadores tanto quanto leitores de tela. E não, um <h1>não é um marcador visual, realmente. A maioria dos navegadores o exibirá grande e em negrito, caso não sejam informados de outra forma, mas os estilos da página ou as próprias preferências do usuário podem substituir isso. <h1>é um indicador de significado: 'este é o meu principal título'. Se o site ou o usuário quiser que as manchetes principais sejam pequenas e laranjas, é isso que elas verão.
Nathan Long
1
"assim como <b> significava ousado uma vez" - alguém mudou o significado <b>sem me dizer? Ele ainda significa negrito não é? Claro, eu prefiro tags semânticas, <em>e <strong>...
ghoppe
13

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.

user899435
fonte
10

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.

DisgruntledGoat
fonte
Isto é interessante. Você tem uma fonte para isso?
usar o seguinte comando
3
@ user606723 qual parte? O primeiro parágrafo é um conhecimento básico de SEO e mencionado no próprio guia de SEO do Google (PDF). Não sei se a coisa das tabelas está documentada em algum lugar, mas já vi isso algumas vezes nos resultados de pesquisa - elas listam 2 a 4 linhas de uma tabela na página de destino.
usar o seguinte
1
Atualização: aqui está uma postagem que menciona tabelas nos SERPs: googlesystem.blogspot.com/2011/11/…
DisgruntledGoat
1

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.

Martin
fonte
3
Não. <b> e <i> estão obsoletos. Se você deseja que seu texto fique bolt / itálico, use CSS. Se você deseja transmitir o significado do texto em negrito / itálico, use <strong> e <em>.
Mircea Chirea
4
@iconiK Preterido por quem? Também entendi que foi "reprovado" no padrão HTML5. E por uma boa razão - há muitos usos tradicionais de itálico além da ênfase [por exemplo, títulos de livros ou palavras estrangeiras] - ter uma tag para "itálico" explicitamente [em vez de uma tag semântica] não é diferente de colocar diretamente maiúsculas e pontuação. No <span class="proper-name"> <span class="question-sentence">entanto, se você quiser usar ...
Random832
1
está obsoleta porque o HTML não deve definir nenhuma formatação de apresentação. Isso é a razão por que escrever CSS em arquivos CSS (e não em linha) por isso temos estilos diferentes para o homem, impressora, leitor de tela, leitor móvel, ebook ect, leitor safari etc.
sod
3
@ sod Eu não estava perguntando por que foi reprovado, estava desafiando a afirmação de que foi reprovado. E não está claro por que o itálico é mais "formatação de apresentação" do que letras maiúsculas e pontuação. Faz parte do conteúdo.
usar o seguinte código
2
@iconiK, "praticamente obsoleto" não tem relação com a afirmação de se algo está ou não obsoleto. Dado que eles são fornecidos na especificação HTML5 e de maneira alguma estão listados como obsoletos , eu diria que eles não foram obsoletos.
precisa saber é o seguinte
1

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.

mlitn
fonte
1

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.)

Mike
fonte