Sharing an assignment on well written HTML code

Last week I read an article about the semantic and the importance of a well written HTML code, and at the same time I had been contacted by a recruitment agency that gave me an assignment which goal was to propose a new way to represent the results set in the B&W image.

assignment.jpg

The coloured image below is what I though about; they obviously gave me a palette range to use.

semantic-html.jpg

They also asked me to comment all my decision, and I thought it was a nice idea to share with you my assignment, because I’m really interested in other people’s opinion.

Tha’s what I propsed.

I started from the assumption that this is a subset of data, so it will be integrated into the a web page where other tags exists, and this is the reason why despite the course name is the most important one, it starts just with an H3.

About the qualification, I believe that it’s important as well as the course name. For this reason the field has been inserted with the span in-line tag, so I would have the possibility to let it follow the qualification, emphasizing the content using the same font/style.

Disabling the style sheet, it would result in a new line element, understandable by the hidden phrase “Qualification”, that certainly result better than use two different heading tags (and may produce some interesting effect also in a SEO process).

Basically what I would like to achieve, is also the possibility to read the document in a non standard browser or with a browser where CSS could be disabled or not useful, like a screen reader or a web scraper.

The following details are all indented to the right with a small margin. This is because the rest of them are certainly important, but they probably interest only after the topic resulted interesting.

About Institution and Department, they basically reflect the same type of information, so I grouped them into an unsorted list, to avoid any sort of numeric preference but at the same time to concentrate them whenever the CSS is disabled.

Nothing to say about Description. It’s a standard paragraph, closed by the Apply on line, that I un-indented just to visually close each small Item group.

And you, how would you redesign the short result set proposed in the B&W image?
htmlcode.jpg csscode.jpg