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:

1
2
3
4
5
6
7
8
9

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:

1
2
3
4
5
6
7

And the CSS (Sass here):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Anyone visiting my actual site will realise quite quickly that there is a new design. It was designed by my girlfriend and put together by me over the last week or two. It is still not done, but it’s close enough for me to put it live for now.

One thing of note is that it is entirely HTML5 and CSS3. This is done partly as an intellectual exercise and partly as a statement affirming my belief in a semantic web. I am still learning what elements are right to use where, so if you look at the HTML source and say to yourself: “Hey, that’s not how that element is supposed to be used,” please do tell me and I’ll restructure it.

I’ve tried to keep classes and IDs to a minimum, using the full power of CSS3 selectors instead. In order to get the design out, I’ve cut a few corners I am not happy with and used some classes, but I plan on refactoring these occurrences soon.

So far the design looks and works perfectly in Safari 4 and FireFox 3.5. Before implementing comments, it was working perfectly in Safari 3 and FireFox 3, but I haven’t checked those yet. I am quite content ignoring IE and even older versions of FireFox and Safari, as my target audience is developers—web developers, specifically—and I fully expect them to be using the cutting edge of browser technology.

I’ve hacked Enki apart quite a bit to get the code highlighting the way I want, replacing CodeRay with Ultraviolet, then further modifying it to add my own line numbers in a way that made the line numbers not get selected when selecting the code. Now, my sin: I used tables. I’m sorry—I based it off CodeRay’s existing table code for line numbers but find this an utter violation of the semantic goal of this entire re-design. This will be very shortly replaced with <figure> elements and figure pre { display: table-cell; } to emulate the same design.

Also, somewhere between finishing the code highlighting, and working on the rest of the site, I broke code highlighting in FireFox. Will fix soon.

Now some code samples I am quite proud of:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

The CSS for the article is incredibly long, so I’ll just show off the fanciest CSS3, the part for the comment section:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

Please send screenshots of the design broken in some browsers. I do want to have a stab at making it work in as many browsers as possible. But for now, go modern or go bust!