What's best semantic markup for this section?

Hi Guys.
I’m beginner in web design. For training I want to convert a PSD to HTML and I’m wondering what’s the best markup for the “best seller” section on the source image below:

I marked all parts with P tag & I know it’s not good, so I’m looking for some help. My markup :
http://codepen.io/Moh3eN/pen/muKoB

Can I use two h1 in one page ?
And I would appreciate you, if you can suggest best markup.

BTW sorry for my bad English.
Thanks.

You could use the aside element, but I’d probably just use a div or section with a specified class.

Thanks Dave.
So using “p” element and style them like what I did is just fine? There’s no need for h1~6 elements ?

That’s fine. I personally would separate the content into it’s own div/section, but that’s personal preference.

As for using h#, that’s up to you. The h# are headings, so if you want to have a heading in that div/section, you could. I would probably make the Bestseller the heading for the section, but that would probably be it. You could arguably place (a smaller) one on the bike title, but to me that would be overkill.

1 Like