Iterative HTML5 - Turning a comma-separated list into a semantic list
In the process of going through the redesign of http://mocra.com, I keep finding better ways to make the HTML more semantic.
Jack Chen and I have been turning the design into HTML over the last few days and we’ve been striving to be as semantic as possible by taking advantage of new HTML5 elements and by separating the content further from the design code with all the new CSS3 selectors.
Here’s an example of something we just did to make the HTML cleaner and more meaningful, whilst still maintaining the look and style.
Here’s what we are styling:
Usually your HTML (or HAML in this case) would look something like this:
= link_to 'Dr Nic Williams', 'http://drnicwilliams.com/'
= link_to 'Bodaniel Jeanes', 'http://bjeanes.com/'
= link_to 'Jack Chen', 'http://chendo.net/'
= link_to 'Ryan Bigg', 'http://frozenplague.net/'
However, we can make this list of people more semantic by using an
<ul> element and some CSS magic.
Here’s what the new HTML (HAML here) would look like:
%li= link_to 'Dr Nic Williams', 'http://drnicwilliams.com/'
%li= link_to 'Bodaniel Jeanes', 'http://bjeanes.com/'
%li= link_to 'Jack Chen', 'http://chendo.net/'
%li= link_to 'Ryan Bigg', 'http://frozenplague.net/'
And the CSS (Sass here):