Lunch & Learn: HTML

Last Thursday we started the first of several lunch hour Lunch & Learn Sessions at Push Design. This week my colleague Dan Root and I presented the basics of HTML. I’ve attached my outline for the presentation. We used Cameron Moll’s excellent HTML magnets to demonstrate the principles we talked about in a tactile way. Overall it was a success and we will be continuing the series. Next up, CSS.

Required Parts of an HTML page

  1. Doctype, not actually required but this is a best practice and helps legacy browsers know how to render the page. There’s no reason not to do it.
  2. Head: This includes the Page Title, links to stylesheets & Javascript files (some prefer to include Javascript at the bottom of the body to allow the page content to load quicker, it works either way)
  3. Body: All page content is placed here.

Style/Interaction vs Content

The separation of style (CSS) and interaction (Javascript) in the Head from content (HTML) in the Body is key to designing with web standards. When these things are kept separate every browser will likely see the content on the page (even non-smart phones). Think of it as the separation of Church and State for the web. This is one reason why Flash, which is a closed box that does not allow you to edit the content and the styling independently from one another, is such a problem.

Semantic Markup

By making your HTML readable without any styling it is guaranteed that the content of a page will be understandable.

Examples of Semantic Websites (disable styles):

  1. Future Friendly
  2. Happy Cog

Examples of Non-Semantic Websites (disable styles):

Make sure to show a table based website. Notice how the design is still largely untouched because it is entirely built in tables. This should break down to a nice outline, but it doesn’t. All the styling is done inline with the HTML, meaning that if you want to change how something looks you have to do it on every page. And depending on what you want to change it needs to be done multiple times on every page. Although this is not what we want for websites it is unfortunately the only way to do HTML emails, because email clients are so non-compliant with web standards.

Exercises (How would you mark these up?)

  1. Blog post
  2. Navigation
  3. Images
  4. Link to another page
HTML Presentation Web Design Workshop