…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
• Tagline
• Headline
• Subhead
• Images
• Paragraph of copy
• Fineprint

Each element we identified has an equivalent HTML element that we could use in marking up the HTML document. For example:

• Brand logo = h1

<liTagline = h2

• Headline = h1
• Subhead= h2
• Paragraph of copy = p
• Images = img
• Fineprint = p

Of course, we would still need to “group” those elements into bigger “boxes” such as:

• header
• div
• footer

With HTML tags, the content could be translated into:

[code lang=”html”]

[/code]

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.