The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Is there a more semantic way of displaying ?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #188546

    Hello everyone,

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

    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!


    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 would be multiple articles.


    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.


    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.


    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.


    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).


    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

    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).


    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Other’ is closed to new topics and replies.