Iterative HTML5 - Turning a comma-separated list into a semantic list

In the process of going through the redesign of our company website, 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.

Usually your HTML (or HAML in this case) would look something like this:

%footer
  %aside
    = link_to 'Dr Nic Williams', 'https://github.com/drnic'
    ,
    = link_to 'Bo Jeanes', 'http://bjeanes.com/'
    ,
    = link_to 'Jack Chen', 'https://chen.do/'
    ,
    = link_to 'Ryan Bigg', 'https://ryanbigg.com/'

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:

%footer
  %aside
    %ul
      %li= link_to 'Dr Nic Williams', 'https://github.com/drnic'
      %li= link_to 'Bo Jeanes', 'https://bjeanes.com/'
      %li= link_to 'Jack Chen', 'https://chen.do/'
      %li= link_to 'Ryan Bigg', 'https://ryanbigg.com/'

And the CSS (Sass here):

body
  footer
    aside
      padding-top: 6px
      float: left

      ul
        list-style: none
        margin: 0
        padding: 0

        li
          display: inline

          &:after
            content: ","

          &:last-child:after
            content: ""