Dasmoto's Semantics Review!: Is this legal?

[method1030781031]

And by legal I mean good practice…

Hi everyone! For this project I used all the semantic tags learned in the semantics lesson. It turned out fine, I think:

My question is: I assigned CSS classes to some semantic tags. Is this good practice? What could I improve on?

This is the code I’m curious about:
I used the <header> tag instead of a <div> to assign a class.

<header class="header">
  <h1>Dasmoto's Arts & Crafts</h1>
</header>

A class for all the <figcaption> tags, so they’re not visible.

<picture>
  <img src="resources/images/hacksaw.jpeg" alt="Hacksaw Brushes">
  <figcaption class="notVis">Hacksaw brushes</figcaption>
</picture>

And for the “Staring at…” blue text, I assigned a class to the <strong> tag.

<p>
  Made of the highest quality oak [...]  <strong class="starting">Starting at $3.00 / brush.</strong>
</p>

Is assigning classes to semantic tags good practice? In other code I’ve seen, from this project and otherwise, everyone seems to be using just the <span> and <div> tags to apply classes.

Also, could hiding the <figcaption> tags be interpreted as some kind of cheating by the SEO engines?

I’d love to understand more about semantics and to know if my code is doing them correctly. Your help is very appreciated!

[kirativewd]

Hi, there.

@method1030781031

<header class="header">
  <h1>Dasmoto's Arts & Crafts</h1>
</header>

You do not need to use the class “header” for the <header> element if doing purely for styling purposes, it is a little redundant if so.

@method1030781031

Is assigning classes to semantic tags good practice? In other code I’ve seen, from this project and otherwise, everyone seems to be using just the <span> and <div> tags to apply classes.

This all depends on what you are trying to do. <strong> is an element that places importance on the text within. If you believe that the price is important and should be considered so, then by all means, use the <strong> element. But placing classes on a semantic element is not bad practice. If I have five <section>s on a page, it is much easier to style them with their own class than with a combo descendant selector.

@method1030781031

A class for all the <figcaption> tags, so they’re not visible.

There are different reasons and purposes where elements need to be hidden visually. One such purpose would be to include words or descriptive phrasing that a screen reader would need to give context to parts of a page where none would be otherwise. What you are describing sounds like SEO manipulation and is ethically a no-no.

[mirja_t]

@kirativewd

What you are describing sounds like SEO manipulation and is ethically a no-no.

And it would be detected as such by the algorithm and be detrimental to your ranking.

[method1030781031]

Thanks for your feedback! I’m glad to know that it is possible to style semantics with CSS.

@kirativewd

You do not need to use the class “header” for the element if doing purely for styling purposes, it is a little redundant if so.

I see. It would probably be more useful to assign a class to <header> if say, in a bigger project, there were a lot of pages with different header types that actually needed different classes.

@kirativewd

What you are describing sounds like SEO manipulation and is ethically a no-no.

@mirja_t

And it would be detected as such by the algorithm and be detrimental to your ranking.

Thank you for the heads up! I did this because the spec didn’t show a description but I wanted to add semantics, so it was my way of “balancing” both. But I guess it would have been better to just leave the images with the alt text. I’m very glad that you’ve helped me discover this now and not me finding out later in an actual, real, important project. Cheers!