How to mark “this” up with proper HTML5

[Anonymous]

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.

[Paulie_D]

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

[Anonymous]

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.

[Paulie_D]

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/

[Paulie_D]

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.

[Anonymous]

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!

[Author]

Posts