Is there a more semantic way of displaying ?

[ZCKVNS]

Hello everyone,

Past couple days I’ve been wondering if I could recreate the main feature at http://mondaymusic.es but use as little HTML/CSS as possible and try to make it more semantic. Here is my attempt so far http://codepen.io/ZCKVNS/pen/wBvbpq.

It’s not responsive right now but once I nail down exactly how I layout each article that was next on the list.

I’m interested in how semantic my approach is at the moment? I’m using section and figure within the article and I feel like the use of section is ok but I think I’m pushing it with the use of figure.

In terms of my css, do you think there is anyway I can clean this up (or a simpler approach)?

Any feedback would be great. Thanks for reading!

[Paulie_D]

I haven;t looked at the code but section within an article seems a bit much unless the article istelf breaks into diverse pieces but then it wouldn’t be an article..it would be multiple articles.

Article

Represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.

Section

Represents a generic document or application section. In this context, a section is a thematic grouping of content, typically with a header, possibly with a footer. Examples include chapters in a book, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A web site’s home page could be split into sections for an introduction, news items, contact information.

[ZCKVNS]

Thanks Paulie D,

I agree that it feels dirty to use <section> where I am using it. It’s probably better off as a <div> as it’s mainly needed for styling. I cant think of any way to vertically and horizontally center two elements in a parent container without both being wrapped in a container element.

[Robby]

I only looked at the codepen, you shouldn’t use the HR tag like that.

The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).

[Paulie_D]

I’m not happy about the way it’s laid out too.

Absolute position on the details div…nah!

Simply re-arrange the HTML and use floats

http://codepen.io/Paulie-D/pen/myyyMo

Also, I swapped out the styling hr for a pseudo element AND changed the positioning of the ‘arrow’ using a transform instead of the less accurate margin(s).

[ZCKVNS]

Thanks Robby, I wasn’t sure of a semantic way of visual breaking up the <h1> and <p>. But I would agree with Paulie D that a pseudo element is probably a better option.

Paulie D – Thanks for the mockup. At one point I was using a float but ultimately went with absolute positioning so I could also vertically center the text that sits in a parent element whose height is unknown. I would prefer the float but I don’t think I’ll be able to vertically center the .details without putting a height on article (maybe I should put a height on article anyway).

Thanks guys.

[Author]

Posts