Solucionado (ver solução)
Solucionado
(ver solução)
14
respostas

Problema com acentuação. Por que não funcionou meta charset?

Bom dia galera, beleza?

Então, fiz todo o capítulo 2 e deixei pra resolver isso no final, passei 1h tentando resolver o problema de acentuação no meu codigo mas não consegui resolver. Fui verificar tambem em "Ferramentas do desenvolverdor" e percebi que em "ELEMENTS" a minha tag meta charset, link rel do icon e do stylesheet aparecem dentro tag tag body e nao head, porem meu codigo esta assim:

<!DOCTYPE html>
<html>
    <head>
        <title>Biografia - João da Silva</title>
        <<meta charset="UTF-8">
                <link rel="icon" href="favicon.png">
                <link rel="stylesheet" href="site.css">
    </head>
    <body>
        <h1>Sobre mim</h1>

        <p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade</em>, <em>durabilidade</em> e que <em>agregam valor</em> para meus clientes.</p>

        <p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>

        <h2>Como trabalho</h2>

        <p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>

        <p>Também não trabalho com prazos fechados: <strong>qualidade é importante demais para ser sacrificada</strong>.</p>

        <h2>Experiência</h2>

        <p>Já desenvolvi projetos para grandes empresas como BMW, UOL e IBM. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>

        <p>Também já fui contratado para transformar grandes portais, como Terra e G1, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>

        <h2>Comunidade</h2>

        <p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um blog.</p>
    </body>
</html>
14 respostas

Oi Ivan, identifiquei um erro no seu código. Olha só na linha do <meta ...>, você colocou duas vezes o símbolo de "<" para abrir a tag. Tente remover e volte me dizendo o resultado ;)

Nossa que besteira!!! Obrigado, fiquei muito tempo procurando algo mas nao encontrei erro!!

Porem.... Ainda esta com problema na acentuação!!! Onde deve ter ~, ´, e outros acentos, esta o "?" no lugar!!!

Você tem certeza de que seu browser está configurado para UTF-8? Em geral é o padrão, mas alguns vêm configurados para o encoding ISO-8859-15, o que pode estar te causando problemas.

Outra opção é, apesar de estar com a tag meta configurada, você está salvando seu arquivo com algum outro encoding. Experimente forçar o arquivo a salvar em UTF-8 e se nada mudar, re-rescrever os caracteres acentuados (já tive dificuldades que só consegui resolver assim).

Voce diz criar o mesmo arquivo só que com extensao UTF-8? Se for isso eu experimentei aqui e ainda nao deu certo! Reescrevi uns 3 acentos pra experimentar mas ainda não resolveu!!! Voce perguntou sobre estar configurado, acredito que sim! pois os outros arquivos que eu abro funciona normalmente =/

Eu retirei a tag meta e joguei em baixo da tag html pra testar, joguei acima do DOCTYPE, nada deu certo, continuou com problema, aí eu deletei a tag e a acentuação funcionou normalmente. Como pode ser possível?

Segue novo código que funcionou a acentuação:

<!DOCTYPE html>

<html>
    <head>
        <title>Biografia - João da Silva</title>
        <!-- com a tag <meta charset="UTF-8"> os caracteres estavam com problema de acentuação. Eu retirei o codigo meta e os caracteres voltaram a ter acentos -->
                <link rel="icon" href="favicon.png">
                <link rel="stylesheet" href="site.css">
    </head>
    <body>
        <h1>Sobre mim</h1>

        <p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade</em>, <em>durabilidade</em> e que <em>agregam valor</em> para meus clientes.</p>

        <p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>

        <h2>Como trabalho</h2>

        <p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>

        <p>Também não trabalho com prazos fechados: <strong>qualidade é importante demais para ser sacrificada</strong>.</p>

        <h2>Experiência</h2>

        <p>Já desenvolvi projetos para grandes empresas como BMW, UOL e IBM. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>

        <p>Também já fui contratado para transformar grandes portais, como Terra e G1, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>

        <h2>Comunidade</h2>

        <p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um blog.</p>
    </body>
</html>
solução!

@Ivan, são essas interrogações que surgem para você ao abrir a página?

Interrogações por problema de encoding

Que editor você está usando para escrever o código?

Não é a extensão que mais importa aqui e sim o modo como o arquivo é salvo. Se me disser que editor usa, posso te ajudar a descobrir como garantir que o arquivo está sendo salvo no modo UTF-8. Fiz um teste aqui alterando o arquivo e me parece que a chance de este ser o seu problema é bem alta.

Para modificar a configuração de encoding no Google Chrome, você pode clicar no ícone de menu e clicar em more tools ou clicar no menu view. Depois, selecione a opção encoding e escolha o que quer usar. O meu está com "Auto-detectar" e "Unicode" ambos marcados.

Exemplo de configuração de encoding

Espero mais informações e talvez sua satisfação em resolver o problema =)

PS.: O teste foi modificar o arquivo para ISO-8895-1 e alterar os acentos para se adequarem ao novo encoding. O meu browser abriu no encoding certo, e os acentos apareciam ok. Ao mudar o encoding do browser para UTF-8, com o arquivo em ISO, apareceram as interrogações.

Resolvido o problema, era isso mesmo! Não sabia dessa opção e nem entendo tão bem ainda. Não entendi por que resolveu mas resolveu! Pois até hoje nunca tive esse problema pois ja coloquei vários códigos e sempre respondeu conforme esperado...

OBRIGADO!!!

Me diga que editor de texto ou IDE usa que te ajudo a entender. ;)

Comecei usando o que foi sugerido no curso mas no caso aí que deu problema eu fiz no bloco de notas mesmo!

Bom eu sei que o tópico já está resolvido.... mas.... apenas pra acrescentar informações.... como você disse que fez no bloco de notas, o problema provavelmente foi esse: Por padrão o bloco de notas salva seu arquivo como "ANSI" e se o seu arquivo está salvo "ANSI" mas a metatag está "UTF-8" acontece isso mesmo.... O certo seria alterar a opção "codificação" para "UTF-8" antes de clicar em Salvar. Se você curte o bloco de notas, recomendo o "Notepad ++" super leve também, e mais prático de usar do que o Notepad simples.

Muito obrigado pela informação Tullio

Nao curto o bloco de notas nao kkk. Gostei de usar o Brackets ou o Sublime mas to no bloco de notas pq uma parte do dia eu estudo no trampo, ai nao quero instalar programas no pc de la, mas vou acabar instalando pq é beeeem melhor usar um deles :p

No próprio site do Sublime Text tem a versão portable, que roda de um pendrive e não precisa de instalação ;)

Ahh legal. Isso eu nao sabia! Vou testar!

Masss, instalei o Notepad++ aqui e to usando haha.

Muito obrigado pela atenção e pela explicação.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software