![\"html](\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2010\/10\/html-semantico1.jpg\" "\\"html")
<\/p>\n<\/p>\n
Voc\u00ea poderia simplesmente dizer: “porque \u00e9 a coisa certa para a web<\/em>“, mas os benef\u00edcios v\u00e3o muito al\u00e9m disso. Por exemplo, torna mais f\u00e1cil para os leitores de tela<\/strong> interpretar as informa\u00e7\u00f5es de um web site para os usu\u00e1rios com defici\u00eancia visual.<\/p>\n SEO<\/abbr> e HTML<\/abbr> sem\u00e2ntico s\u00e3o amigos pr\u00f3ximos. O objetivo do SEO \u00e9 ajudar os motores de busca entender melhor sobre o que se trata o conte\u00fado de uma p\u00e1gina e classific\u00e1-la melhor. Um rob\u00f4 de busca basicamente tem capacidades ainda menores do que um leitor de tela. N\u00e3o devemos, por exemplo, utilizar as tags Uma p\u00e1gina consiste em um t\u00edtulo, um ou mais subt\u00edtulos e conte\u00fado. Este conte\u00fado pode conter par\u00e1grafos, listas, cita\u00e7\u00f5es, imagens e tabelas. Todos estes tipos de informa\u00e7\u00e3o t\u00eam sua pr\u00f3pria marca, que s\u00e3o os elementos HTML.<\/p>\n As tags HTML nunca devem ser usadas para aplicar a apresenta\u00e7\u00e3o, tais como: cor da fonte, tamanho da fonte, alinhamento e por a\u00ed vai… Isso tudo \u00e9 trabalho das CSS (Cascading Style Sheets). A algum tempo escrevi sobre Elementos HTML em desuso<\/a> onde cito v\u00e1rios elementos que foram descontinuados. <\/p>\n Um bom documento tem t\u00edtulos e subt\u00edtulos<\/a>. Estas posi\u00e7\u00f5es variam em import\u00e2ncia, iniciando por Seguindo uma sem\u00e2ntica rigorosa<\/strong>, sugiro que voc\u00ea deva ter apenas um Para otimiza\u00e7\u00e3o de uma p\u00e1gina<\/strong> \u00e9 fundamental que a palavra-chave da p\u00e1gina<\/a> esteja dentro do elemento Imagens s\u00e3o usadas de todas as formas dentro de documentos, e voc\u00ea deve aplicar a sem\u00e2ntica adequada para elas. O atributo alt<\/a> deve ser usado se a imagem acrescenta significado ao documento. Este deve descrever o que a imagem est\u00e1 mostrando<\/strong>.<\/p>\n Se voc\u00ea estiver usando imagens para substituir o texto, certifique-se que voc\u00ea esteja usando um texto tamb\u00e9m em seu HTML. Para isso use CSS<\/abbr>. Voc\u00ea tem que fazer isso porque tanto as pessoas com defici\u00eancias visuais e motores de busca n\u00e3o podem ler o texto em suas imagens. Para aplicar este m\u00e9todo deixo o mesmo texto que est\u00e1 escrito na imagem no meu HTML. No CSS escondo o texto usando Sempre que usar uma sigla em seus textos ou artigos utilize o Tabelas n\u00e3o devem ser usadas para estrutura\u00e7\u00e3o de layouts<\/strong>, apenas para dados tabulares. Caso voc\u00ea monte seu site utilizando tabelas, o usu\u00e1rio que acessar seu site com um leitor de telas ter\u00e1 uma enorme dificuldade em entender o conte\u00fado fornecido por voc\u00ea. Abaixo algumas dicas para utiliza\u00e7\u00e3o de tabelas.<\/p>\n Muito simples: N\u00c3O USE. Motores de Busca e principalmente leitores de telas tem certa dificuldade em trabalhar com p\u00e1gina desse tipo.<\/p>\n Usando html sem\u00e2ntico<\/strong> para marcar suas p\u00e1ginas, voc\u00ea pode criar p\u00e1ginas que s\u00e3o mais acess\u00edveis, tanto para as pessoas com defici\u00eancia, bem como aos motores de busca. Marca\u00e7\u00e3o sem\u00e2ntica ajuda os motores de busca determinar qual \u00e9 a relev\u00e2ncia do conte\u00fado de uma p\u00e1gina.<\/p>\n Quer ter um site acess\u00edvel aos motores de busca e acima de tudo aos leitores de tela? Use o HTML sem\u00e2ntico sempre.<\/p>\n Refer\u00eancia<\/strong> Por que devo USAR o HTML sem\u00e2ntico? Voc\u00ea poderia simplesmente dizer: “porque \u00e9 a coisa certa para a web“, mas os benef\u00edcios v\u00e3o muito al\u00e9m disso. Por exemplo, torna mais f\u00e1cil para os leitores de tela interpretar as informa\u00e7\u00f5es de um web site para os usu\u00e1rios com defici\u00eancia visual. SEO e HTML sem\u00e2ntico s\u00e3o amigos […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59],"tags":[48,55],"class_list":["post-1514","post","type-post","status-publish","format-standard","hentry","category-html","tag-xhtml","tag-web-design"],"yoast_head":"\n
\n <\/p>\nO HTML sem\u00e2ntico tenta transmitir significado<\/strong> atrav\u00e9s das palavras e as tags em uma p\u00e1gina. tente pensar desta maneira: o conte\u00fado da p\u00e1gina s\u00e3o as palavras que voc\u00ea fala. A marca\u00e7\u00e3o HTML fornece a estrutura, a entona\u00e7\u00e3o, as pausas e at\u00e9 mesmo a apar\u00eancia do seu rosto. Basicamente, as marca\u00e7\u00f5es s\u00e3o a metade da sua mensagem.<\/div>\np<\/code> nunca deve ser utilizada para aplicar espa\u00e7o a uma p\u00e1gina web. Este elemento do HTML deve ser utilizado unicamente para indicar (marcar) par\u00e1grafos.<\/p>\nEstrutura das p\u00e1gina<\/h2>\n
Separar apresenta\u00e7\u00e3o do conte\u00fado<\/h3>\n
T\u00edtulos (cabe\u00e7alhos) h1 at\u00e9 h6<\/h2>\n
H1<\/code> (t\u00edtulo mais relevante da p\u00e1gina) at\u00e9 H6<\/code> (t\u00edtulo menos importante da p\u00e1gina). N\u00e3o lembro de ter visto em um site escrito de forma sem\u00e2ntica o uso dos elementos H5<\/code> e H6<\/code>, no m\u00e1ximo o uso at\u00e9 o n\u00edvel H4<\/code>.<\/p>\nH1<\/code> por p\u00e1gina. Vejo muitos sites utilizando o elemento H1<\/code> para marcar o nome do site. Provavelmente no seu site cada p\u00e1gina ter\u00e1 um assunto especifico, neste caso escolha por marcar o t\u00edtulo do assunto como sendo o t\u00edtulo principal da p\u00e1gina, ou seja, marcar com H1<\/code>.<\/p>\nH1<\/code> e ainda em outras posi\u00e7\u00f5es da p\u00e1gina como links, par\u00e1grafos, etc.<\/p>\nImagens<\/h2>\n
text-indent<\/code> com um valor negativo (Exemplo -1000px). Tenha cuidado, usando esta t\u00e9cnica voc\u00ea corre o risco de ser punido pelos buscadores<\/a>.<\/p>\nAbreviaturas e siglas<\/h2>\n
abbr<\/code> para descrever o significado de tal sigla. Isso \u00e9 bom para a densidade de palavras-chave tamb\u00e9m!<\/p>\nTabelas<\/h2>\n
\n\n
th<\/code> para marcar cabe\u00e7alhos da tabela;<\/li>\nthead<\/code> tbody<\/code> e tfoot<\/code> corretamente;<\/li>\nscope<\/code> no elemento th<\/code>;<\/li>\ncaption<\/code>;<\/li>\nsummary<\/code> para descrever o conte\u00fado da tabela.<\/li>\n<\/ul>\n<\/div>\nDevo utilizar Frames?<\/h2>\n
Conclus\u00e3o<\/h2>\n
\nSemantic HTML and Search Engine Optimization<\/a> e semantic-html<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"