Once you have the ability to create paragraph content and headings, the major limiting factor in making web pages is your ability to communicate through writing. While fine-grained typographic control on the web is the domain of CSS, there are a number of basic HTML skills to learn that will ensure strong presentation of your written content.

Goal: Create a valid web page with correct encoding. Understand the meaning and correct uses of <em>, <strong>, and language support. Transfer correctly formatted body copy from a word processor into a text editor and add appropriate HTML markup.

Prerequisites: Basic HTML

Total time (core material): 1 hour

Core Material

1. Writing for the web
2. Workflow for web page body text
3. Typographic keyboard shortcuts
4. Using UTF-8
5. Italicizing & Bolding Text
6. Common HTML Formatting Errors
7. HTML Entities
8. Writing fractions with Entities
9. Language Support In HTML
10. Using Arabic and Hebrew on web pages.
11. code, var, samp and kbd
12. blockquote, cite & q
13. small

Resources

CSS experimentation with text requires a lot of body copy to work with in order to see results. Ideally, you will have body content already in hand from a client to play with. Alternatively, rather than typing out and marking up lines of nonsense, I recommend using a filler text generator, variations on which the web provides in abundance:

1. 19 Useful Filler Generators
2. 15 More Filler Generators
3. The Revenge of Lorem Ipsum
4. The Return of Lorem Ipsum
5. Ultimate Ipsum

Recommended Reading

Read HTML Entities and Internationalization & Localization from the Web Platform Docs. Follow it up with Website Reading from the Neilsen Norman Group together with Strunk & White’s Elements Of Style, one of the best guides to concise writing.

You may also want to start reading The Elements of Typographic Style: Version 4.0. While not everything in the book will be immediately applicable to your web pages (given the limited resources you have thus far), it will inform and enlarge your knowledge, acting as preparation for when  you employ rich typography with CSS.

I would strongly recommend taking in all of Nicely Said: Writing for the Web with Style and Purpose; you can read my review of the book. Finally, read TypeWolf's Typographic Cheatsheet, which neatly summarises most of the typographic lessons here (a single-page PDF is also available.

When You’re Done

You now have the ability to write a complete page, using appropriate typographic conventions. Use your new skills to expand the page(s) you made earlier, checking their validation regularly.

While basic text is a great start, most web pages need content to be presented with additional material that has its own special HTML markup, such as lists. In most cases, one page of content is not enough: you will need to link the page to others to build a site. We’ll tackle both of those challenges in the next section.

Painting detail by Choichun Leung, photograph by See-ming Lee, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.