1

Estou atualizando a estrutura do meu site para a semântica do HTML5, e isso me gerou algumas dúvidas. Tais como:

Preciso ajustar minha imagem no site, posso colocar o class no figure?
O que posso fazer para ficar dentro do padrão HTML5?

<figure class="ajusteimg">
        <img src="./propaganda_rotativa/supportgv.png" />
</figure>

3 Respostas 3

4

O facto de usares figure já é usar HTML semântico e a razão dessas tags terem sido criadas.

Se precisas de classes para efeitos de CSS ou para o JavaScript é útil usares classes.

Podes sempre tentar diminuir o uso de classes e fazer o JavaScript e CSS mais dependentes do HTML, mas usar não tem mal nenhum, nem é contraproducente à ideia de HTML semântico.

2

Sim, você pode! Porque class é um atributo global.

Como a própria documentação diz: 'This element only includes the global attributes.'

Referências:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes

1

Sim pode usar class no figure

figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
    <figure>
    <p><img src="https://www.w3.org/Style/Examples/007/eiffel.jpg"
    width="136" height="200"
    alt="Torre Eiffel">
    <figcaption>Miniatura da 
    torre Eiffel no 
    Parque Mini-France</figcaption>
    </figure>

inserir a descrição da imagem aqui

figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
    <figure>
    <img src="https://www.w3.org/Style/Examples/007/eiffel.jpg"
    width="136" height="200"
    alt="Torre Eiffel">
    <figcaption>Miniatura da 
    torre Eiffel no 
    Parque Mini-France</figcaption>
    </figure>

OBS: O Elemento figcaption utilizado para marcar uma legenda para conteúdos inseridos com uso do elemento <figure>. Sempre deve vir entre o elemento <figure>, ou seja, deve constar como elemento-filho do elemento <figure>. A tag <figcaption> só é válido dentre do <figure>.

já que no comentário foi abordado a necessidade da tag p ...

Vale salientar que o elemento <figure> e <figcaption> não serve somente para imagens e fotos, mas também serve para diagramas, gráficos, textos (como poemas, código-fonte, citações etc), um trecho de código - com tags html - ex: <p>.

Mozilla Developer Network

HTML Global Attributes

Saiba mais

2
  • Qual a necessidade de usar <p> dentro do figure?
    – Gladison
    Commented 15/06/2017 às 17:32
  • veja os dois executes , um com tag p e o segundo sem tag p
    – user60252
    Commented 15/06/2017 às 17:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .