First Steps
The first step on the road from thought to website is text. Text is the most fundamental kind of web content. When websites have images, audio, or video, responsible authors will make sure these things have textual equivalents. However pale such alternate text may be compared to the media it represents, it’s a baseline. Text is the common denominator of web communication.
Markup
The second step on the road from thought to website is markup. Markup is the M in HTML (HyperText Markup Language). To write HTML is to create markedness in an otherwise ambiguous text; for instance, to differentiate some groups of words as “paragraph” (<p>) and others as “heading” (<h2>).
Assigning this markedness is a matter of authorship. It is an act of making meaning. Taking responsibility for markup has never been a problem for folks who both write and hand-code HTML, but now almost everyone writes markup without having to think about it much. The tools we use write markup for us.
When I write these posts using the editor at Tumblr, I’m not writing markup directly. When I press the return key, for example, Tumblr takes that to mean “new paragraph.” Tumblr’s text editor has an HTML button that reveals the markup it generates, and it also offers preferences for turning off the visual editor entirely and writing in raw HTML. Not only are these options handy, they’re responsible on the part of the folks who make Tumblr.
Not everyone should have to learn to hand-code HTML, but it’s irresponsible to ignore what’s being generated by the tools we use. Tools that help us make meaning in text (as opposed to just making our text look like a website) deserve our praise and thanks.
Viewing source
It is usually possible to look behind the scenes of a web page and see for ourselves the markup that it’s made of. This feature is often called “View Source” or “Page Source,” and its placement in your browser’s menus/settings can vary. There are also tools like Safari’s Web Inspector and the Firebug extension for Firefox. These are awesome, powerful ways of viewing source that help us sift through all the stuff, including markup, that makes up websites. And we can view source on any website. In fact, studying how other sites are built is a great way to learn how to make websites.
If you view source on this tumblelog at this point in time, it’ll be easy to see the markup in and around my writing — things like <h2>, <h3>, <p>, <a>, <ul>, and <li>. If you’re curious about the more complicated parts, I urge you to read Jeffrey Zeldman’s Designing with Web Standards. It’s practically all one needs to begin making websites while understanding both why and how things work.
Recommended
- Designing with Web Standards by Jeffrey Zeldman
- HTML5 for Web Designers by Jeremy Keith
