Grow your CSS skills. Land your dream job.

How to mark “this” up with proper HTML5

  • # August 18, 2012 at 4:43 pm

    I’m curious to see how this could marked up using HTML5 (using any article, header, section, etc… tags). I’m also interested in the correct use of H tags here.

    My Resume

    Experience

    Jan 1911 - May 1920

    Wagon Company
    Head of Wagon Making

    This is what I did as the Head of Wagon Making for Wagon Company. I made sure all wagons had wheels and horse hitches.

    June 1920 - Dec 1925

    Motorized Wagons, Inc
    Engine Mechanic

    This is what I did as the Engine Mechanic for Motorized Wagons, Inc. I made sure all wagons had engines that worked.

    This is how I would have done this before, but I’m sure there’s a better way. Thanks for any feedback!

    My Resume



    Experience



    Jan 1911 - May 1920



    Wagon Company Head of Wagon Making



    This is what I did as the Head of Wagon Making for Wagon Company. I made sure all wagons had wheels and horse hitches.



    June 1920 - Dec 1925



    Motorized Wagons, Inc Engine Mechanic



    This is what I did as the Engine Mechanic for Motorized Wagons, Inc. I made sure all wagons had engines that worked.

    # August 19, 2012 at 4:17 am

    There is nothing wrong with the way you have it….basically.

    All HTML5 will do is break the content down into similar types and wrap them in ‘new’ elements.

    For instance, this resume will have a ‘section’ for Experience and perhaps another for Education so it make sense to wrap everything above (except for the main h1 in a ‘section’ tag.

    Then, each ‘experience’ has it’s own structure so we can wrap those in ‘article’ tags.

    Having done that, it’s time to change the heading tags to their proper order within it’s own structure.

    Basically, you lose all the h3/h4 because they become h1/h2 within their elements.

    You’ll get the same look (pretty much) and, compared to before, it bloats your HTML. However, it does structure your code a little more logically and some might say semantically.

    Opinions might vary.

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

    # August 19, 2012 at 6:00 am

    Thanks, that’s helps put a new perspective on it. It’s tricky sometimes deciding what constitutes using a “section” or “article” tag, as the definitions are kind of vague right now. Also, would it make sense in your CodePen example to wrap the H1 and H2 tags in a “header” or “hgroup” tag as well?

    Finally, I’ve read that using multiple H1 tags is OK to do these days, but I’m wondering if there’s “official” documentation that says it’s OK, or if there was ever any that said it wasn’t OK? Thanks again for your feedback.

    # August 19, 2012 at 8:21 am

    Regarding the headers, the answer is yes but it starts to get really complex.

    Technically, if you want to, you would give each section and article it’s own ‘header’ tag and put the h1 etc in there, and if you have an h1 and an h2 you can further wrap those is an hgroup.

    At a certain point though it gets a little much to wrap everything just for the sake of it. It can make sense in a really complex website but most often it’s well enough to leave things alone.

    A good reference is http://html5doctor.com/

    # August 19, 2012 at 8:25 am

    On the multiple H1 tags, opinions vary….I think the reluctance stems from the time when search engines and SEO requirements were different. The technology and algorithms are much more complex and discerning now, reading the whole content of a page rather than just relying on the h1 tags and meta tags.

    As I said, opinions vary…if you use h3 instead of h1….no-one should care.

    # August 19, 2012 at 5:11 pm

    I looked at the the html5doctor.com site and it looks really good, so I’ll have to read through it more. Thanks again for all your tips!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".