CODEWITHSUNDEEP
htmlsemantic-markupbem
user1941537
user1941537

Reputation: 6675

Semantic HTML and BEM CSS

I'm trying to write a semantic HTML and also trying to use class names based on BEM methodology.

Before I start the project with completely wrong structure, I just wanted to double check with you if this is right, what I'm doing:

    <main>
      <article class="card card--light">
        <section class="card__wrapper">
          <div class="card__image">
            an image
          </div>
          <div class="card__name">
            a name
          </div>
          <div class="card__button">
            <button>Click Me</button>
          </div>
        </section>
      </article>
    </main>

Is it ok that all sections go inside an article? Am I doing maybe too many divs?

Upvotes: 2

Views: 1053

Answers (1)

tzi
tzi

Reputation: 9459

It's often a good choice to use an <article> tag for card.

There is one error, the HTML5 tag <article> is already creating a section of the page. So there is no meaning of having a <section> as only child. This <section> means "I'm a section of the article", but that's not really the case here. So you should use a simple <div> instead of a <section>.

Globally, be careful with too much HTML5 semantic elements. Using an extra <div> has no bad consequences, this is not true for "sectioning content" tags (<article>, <section>, <nav> and <aside>). For example screen reader will notifiy the visitor for each new section.

Upvotes: 3

Related Questions