1
resposta

[Dúvida] o titulo da imagem não tá aparecendo, podem ajudar? aonde tá errado no código.

1 resposta

Olá, Lucas! Tudo bem?

O seu código HTML está super organizado, muito bem estruturado e com um uso excelente de tags de formatação de texto (como <strong>, <em>, <sup> e <sub>). Parabéns pelo empenho e pela escolha do tema de Solo Leveling, a imagem de fundo ficou fantástica!

Respondendo diretamente à sua dúvida: olhando para a linha 23 do seu código, não há nenhum erro de sintaxe estrutural, mas há uma confusão muito comum sobre o papel do atributo que você usou.

<img src="img/solo leveling-1980.jpg" alt="Anime solo leveling em uma luta epica.">

O texto que você escreveu não está aparecendo na tela por um motivo específico do comportamento dos navegadores. Vamos entender o porquê?


O mistério do atributo alt

O atributo alt significa Texto Alternativo (Alternative Text). Ele serve para fins de Acessibilidade e segurança do site.

O texto de dentro do alt só vai aparecer na tela em duas situações:

  1. Se a imagem quebrar: Caso você digite o nome do arquivo errado na pasta (por exemplo, esquecer uma letra no src), o navegador não vai achar a foto e, no lugar dela, exibirá esse texto para o usuário saber o que deveria estar ali.
  2. Leitores de tela: Pessoas com deficiência visual utilizam softwares que leem o código da página. Quando o leitor passa pela imagem, ele fala em voz alta exatamente o que você escreveu no alt: "Anime solo leveling em uma luta epica."

Como a sua imagem está carregando e aparecendo perfeitamente na tela, o navegador oculta o alt por padrão.


Como fazer o título aparecer? (Duas soluções práticas)

Se o seu objetivo é fazer um texto aparecer de verdade na tela acompanhando a imagem, você tem duas formas excelentes de resolver isso seguindo as boas práticas de Front-end:

Solução 1: O atributo title (O "Balãozinho" Tooltip)

Se você quer que um título apareça na tela quando o usuário passar o mouse por cima da imagem, basta adicionar o atributo title ao lado do alt. Veja como fica:

<img src="img/solo leveling-1980.jpg" alt="Anime solo leveling em uma luta epica." title="Solo Leveling - Luta Épica">

Solução 2: A Tag Semântica <figure> e <figcaption> (A mais recomendada)

Se você quer que o título apareça escrito de forma fixa logo abaixo ou acima da imagem (como uma legenda de portal de notícias), o HTML5 possui um conjunto de tags perfeito para isso: a tag <figure> (para envelopar a imagem) e a tag <figcaption> (para a legenda).

Substitua a sua linha 23 por essa estrutura:

<figure>
    <img src="img/solo leveling-1980.jpg" alt="Anime solo leveling em uma luta epica.">
    <figcaption>Anime Solo Leveling em uma luta épica.</figcaption>
</figure>

Um pequeno detalhe extra de boa prática:

Repare que na linha 15 você abriu um parágrafo (<p>), usou a tag <b>, mas na hora de fechar a tag do parágrafo, acabou esquecendo a barra e colocou <p> de novo em vez de </p>. O navegador costuma corrigir isso sozinho, mas vale dar aquela ajustada para manter o código 100% limpo!

Faça o teste trocando o alt pelo title ou adicionando o <figcaption> e veja a mágica acontecer na tela. Você está no caminho certo!

Espero que possa ter lhe ajudado!