Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

What do you think about this HTML5 format?

HI,

If you look at this HTML5,

what differently would you do? Is that good? sections, footer, inside the article? article nested in div for collumns? or mabe your would do card to ahve different width, but that would be repeating code, but cleaner.

What do you think?

        <div class="col xs-1 small-1 medium-1-2 large-1-4">
        <article class="card">

            <figure class="card__thumb">
                <a href="#"><img src="http://lorempicsum.com/rio/378/235/1" ></a>
            </figure>

            <section class="card__date">
                <span class="card__date__day">23</span>
                <span class="card__date__month">Mai</span>
            </section>

            <section class="card__body">
                <div class="card__category"><a href="#">Category</a></div>
                <div class="card__title"><a href="#">Vivamus elementum semper nisivi troscup</a>
                </div>
                <div class="card__subtitle">Donec posuere vulputate</div>
                <p class="card__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore sapiente doloremque recusandae, modi dolore velit, illum itaque minus inventore, omnis et nisi rem facere.</p>
            </section>

            <footer class="card__footer">
                <span class="icon icon--time">6 min</span>
                <span class="icon icon--comment"><a href="#">2 comments</a></span>
            </footer>
        </article>
        </div>

1 Answer

izzy goldman
izzy goldman
12,542 Points
izzy goldman
izzy goldman
12,542 Points

very similar to BEM (block element and modifier) https://css-tricks.com/bem-101/

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Yep, I'm using BEM but what do you think on it's structure? The HTML5 tags, like header, section, footer, figure etc.. ?