2. Basic Content Patterns


  • Writing for digital presentation differs to writing for print.
  • Correctly deploy the two handfuls of basic digital writing design patterns.

Design Patterns

How many content patterns do we create and deploy?

  1. Page and topic titles
  2. Headings levels 1 to 6
  3. Paragraphs
  4. Links
  5. Calls to Action links
  6. Ordered lists
  7. Unordered lists
  8. Figures and figure captions
  9. Tables, table captions, table heading cellss, and table data cells
  10. Images, their captions, and alternative attributes or content.
  11. ‘Cards’ (and other widgets)

Where do we employ them?

  1. Overviews
  2. Section breaks
  3. Descriptions and explanations
  4. Processes
  5. Lists
  6. Notes
  7. Illustrations
  8. Emphasis

How much HTML is that? Well, the following 16 tags will get you writing content in most Content Management Systems:

  1. <header>Region of banner content</header>
  2. <main>Region of main content</main>
  3. <nav>Region of navigation</nav>
  4. <h1>Heading Level One</h1> to <h6>Baby Heading</h6>
  5. <p>Paragraph</p>
  6. <ul><li>List item</li></ul>
  7. <ol><li>List item</li></ol>
  8. <a href=”url.url”>Link</a>
  9. <figure><figcaption>Figure Caption</figcaption>Figure content</figure>
  10. <table>
      <thead><tr><th>Column 1</th><th>Column 2</th></tr></thead>
      <tbody><tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td></tr></tbody>
  11. <img src=”url.url” width=”n in pixels” height=”n in pixels” alt=””>
  12. <strong>BOLD</strong>
  13. <em>italic?</em>
  14. <code>some inline code with ‘<‘ converted to ‘&lt;’ and ‘>’ to ‘&gt;'</code>
  15. <pre>some block code with ‘<‘ converted to ‘&lt;’ and ‘>’ to ‘&gt;'</pre>
  16. <mark>Highlight the text contained within</mark>

The above are each accessible ‘out of the box’. To play with them you need an HTML document:

<!DOCTYPE html>
<html lang="en">
…insert your content from above…

Simply play with your code in a text editor, save as your filename.html, and open it in a browser. If you use a Mac, try using VoiceOver (Cmd + F5) with your page!

PS: Pat has built a play box where you can write your HTML in one box and it outputs to it’s sibling as rendered code. Ask if you would like a copy.