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
- 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.
- Body: All page content is placed here.
Style/Interaction vs Content
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):
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?)
- Blog post
- Link to another page