Using CLASS in HTML5 semantics

1

I'm updating the structure of my site for HTML5 semantics, and this has given me some doubts. Such as:

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

<figure class="ajusteimg">
        <img src="./propaganda_rotativa/supportgv.png" />
</figure>
    
asked by anonymous 15.06.2017 / 19:12

3 answers

4

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

If you need classes for CSS purposes or for JavaScript it is useful to use classes.

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

    
15.06.2017 / 19:25
2

Yes, you can! Because class is a global attribute.

As the documentation itself says: 'This element only includes the global attributes.'

References:
link
link

    
15.06.2017 / 19:24
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>

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 content using the <figure> element. It must always come between the element <figure> , that is, it must appear as the child element of the <figure> element. The <figcaption> tag is only valid from <figure> .

  

Since the comment was addressed the need for the tag p ...

Note that the element <figure> and <figcaption> is not only for images and photos, but also for diagrams, graphics, texts (such as poems, source code, quotes etc), a code snippet - with html tags - ex: <p> .

Mozilla Developer Network

HTML Global Attributes

Learn more

    
15.06.2017 / 19:28