5.9 - As tags <img> e <figure>

A tag <img> define uma imagem em uma página HTML e necessita de dois atributos preenchidos: “src” e “alt”. O primeiro aponta para o local da imagem e o segundo, um texto alternativo para a imagem caso essa não possa ser carregada ou visualizada.

O HTML 5 introduziu duas novas tags específicas para imagem: <figure> e <figcaption>. A tag <figure> define uma imagem com a conhecida tag <img>. Além disso, permite adicionar uma legenda para a imagem por meio da tag <figcaption>.

<figure>
  <img src="img/produto1.png" alt="Foto do livro ‘O universo é pequeno’">
  <figcaption>‘O universo é pequeno’</figcaption>
</figure>

5.10 - Tag de comentário <!--      -->

Quando iniciamos um projeto, utilizamos poucas tags HTML. Como desenvolvimento das páginas, conteúdo e outros arquivos, nosso projeto atinge um tamanho razoável de elementos que pode gerar uma certa confusão. Para manter o código mais legível, é recomendada a adição de comentários antes da abertura e após o fechamento de tags estruturais (que conterão outras tags). Dessa maneira, nós podemos identificar claramente quando um elemento está dentro dessa estrutura ou depois da mesma.

<!-- início do cabecalho -->
<div id="header">
  <p>Esse parágrafo está "dentro" da área principal.</p>
</div>
<!-- fim do cabecalho -->

<p>Esse parágrafo está "depois" da área principal.</p>