Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
…but the background colors and font colors.
What to do after writing the HTML markup?
Now that we’ve got the mock-up translated into structured content marked up in semantic HTML, it’s time to paint the town.
This morning, I gave the class a seat work — tear off a page, any page from any magazine and translate it into structured content marked up in semantic HTML. What does that mean?
Say you tore off a car advertisement page — most probably it would have the following elements on it:
- Brand logo
- Paragraph of copy
Each element we identified has an equivalent HTML element that we could use in marking up the HTML document. For example:
- Brand logo = h1
- Headline = h1
- Subhead= h2
- Paragraph of copy = p
- Images = img
- Fineprint = p
<liTagline = h2
Of course, we would still need to “group” those elements into bigger “boxes” such as:
With HTML tags, the content could be translated into:
Paragraph of copy
Notice the addition of the <div> attribute “role” with the value, “main” — since we don’t have a semantic tag (yet) for a main content in our document, we used “role” to denote the meaning of that div’s content. “Main” simply means “main content”. It is one of the predefined Role values in XHTML. Here’s the complete list of Role values from W3C.