Use of CLASS in HTML5 semantics

Asked

Viewed 152 times

1

I’m updating the structure of my site to the semantics of HTML5, and this has raised some questions. Such as:

I need to adjust my image on the site, I can put the class in the figure?
What can I do to stay within the HTML5 standard?

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

3 answers

4

The fact that you use figure is already using semantic HTML and the reason these tags have been created.

If you need classes for CSS or Javascript purposes it’s useful to use classes.

You can always try to decrease the use of classes and make Javascript and CSS more HTML-dependent, but using has no harm, nor is it counterproductive to the idea of semantic HTML.

2

1

Yes you can use class in 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>

NOTE: The figcaption element used to mark a caption for inserted contents using the element <figure>. Always must come between the element <figure>, that is to say, the child element of the <figure>. The tag <figcaption> is valid only among the <figure>.

since in the commentary was addressed the need for the p tag ...

It is worth noting that the element <figure> and <figcaption> not only for images and photos, but also for diagrams, graphs, texts (such as poems, source code, citations, etc.), an excerpt of code - with html tags - ex: <p>.

Mozilla Developer Network

HTML Global Attributes

Learn more

  • What is the need to use <p> inside the figure?

  • see the two executes , one with tag p and the second without tag p

Browser other questions tagged html5

You are not signed in. Login or sign up in order to post.