Week four & five: Semantic HTMLAugust 11, 2011
An Assignment in Semantics
Billy gave me a really awesome assignment last week, (week five) that I'm still working on in between things.
He had me find 3 things; a menu, a news article, and a schedule, (or something tabular). I am to take those three things and mark them up using semantic HTML.
After going over the HTML, getting advice, and making some changes, I added CSS to replicate the layout of the document in question. This taught me a lot. I still have some work to do, but I can show you what I have so far.
Since we already had a menu for the awesome Haute Sausage, (one of the food trucks that we frequent) in the office, I decided to use it.
I marked up the Haute Sausage menu in HTML added some CSS to style it a bit. It took a while to figure out the three column section below the title, but Billy helped me figure it out.
The Newspaper Article
The article I found is “Peacock Surprise”—an article from the Redeye about the peacock that escaped from the Central Park Zoo in New York and became almost as popular as the Bronx Zoo Cobra.
I've only done most of the HTML so far, and a touch of CSS for the 2 column layout. One of the most exciting parts of the CSS on this article was using the CSS3 properties column-count, column-width, and the slightly more complex column-break-before.
Below is what was used to structure the columns the way they appear in the actual article, just in case you're interested.
As I said, there is some more work to do, but that's what I've got so far. As for the third item, the schedule or table, I haven't located anything adequate yet, but I'm on the lookout. I'll post the finished products up on the blog soon.
So far, what I have learned from this exercise, other than the cool new CSS properties, is that there is almost always a better way to structure my HTML and improvements that I can make to my CSS. And in my opinion, that probably shouldn't ever change.