You press Enter and instead of a new line you get a new paragraph. You want to create a nested list and it just doesn’t look how you want it to. You pasted text from your word processor and its format is all wrong. Formatting an article in WordPress can be boring and frustrating, but it’s a crucial step in writing for the web. People read on screen differently than on paper and formatting the text will help them get to the end of it. Nothing much has changed since 1997, when Jakob Nielsen published his “”How Users Read on the Web”” article: despite the principles being 20 years old, lots of pages look like a wall of text that might discourage well intentioned readers. This talk will show you how to leverage the options available in WordPress and it will teach you how to fix some common problems with a few HTML tags.

1. H E L P YO U R R E A D E R S :
F O R M AT A L L T H E T H I N G S
Francesca Marano - @FrancescaMarano

2. C I AO ! S O N O F R A N C E S C A
WO R D P R E S S P RO F E S S I O N A L , C O M M U N I T Y J U N K I E .
P O LY G L OT, M E E T U P O R G A N I Z E R , WO R D C A M P
O R G A N I Z E R .
L E T ’ S TA L K @ F R A N C E S C A M A R A N O

3. C O N T E N T I S K I N G

4. A B I T O F H I S TO RY
• March 12, 1989 - SirTim Berners-Lee writes a proposal for a
distributed information system
• In 1993 he publishes the first specs for HTML tags
• November 24, 1995 - HTML 2.0 specs are published as a
standard for all future implementations
• October 1, 1997 - Jakob Nielsen publishes the article “How
Users Read on the Web”

5. Summary:They don't. People rarely read Web pages
word by word; instead, they scan the page, picking out
individual words and sentences.
J A KO B N I E L S E N

7. H T M L 1 0 1

8. W H AT I S H T M L
• HyperText Markup Language
• Defines the elements in a page semantically
• Elements are defined by English words or their abbreviations
• <Opening tag> Content </Closing tag>

9. U S E F U L H T M L TAG S F O R W R I T E R S
• Paragraphs <p> Content </p>
• Blockquotes <blockquote> Content </blockquote>
• Ordered lists <ol> List Items <li> Content </li> </ol>
• Unordered lists <ul> List Items <li> Content </li> </ul>
• List items <li> Content </li>
• Links <a href=“”> Content </a> (Anchors)
• Images <img src=“”> (No ClosingTag!)

10. T H E H E A D I N G
E L E M E N T
• <h1>Headline 1</h1> Don’t use it!
• <h2>Headline 2</h2>
• <h3>Headline 3</h3>
• <h4>Headline 4</h4>
• <h5>Headline 5</h5>
• <h6>Headline 6</h6>

11. AC C E S S I B I L I T Y 1 0 1

12. M I C RO S O F T I N C L U S I V E D E S I G N TO O L K I T
“Solve for one, extend to many by focusing on what’s
universally important to all humans”

13. AC C E S S I B I L I T Y R E A DY T H E M E S

14. F O R M AT T I N G I N
WO R D P R E S S

15. T H E F O R M AT T I N G B A R

16. V I S UA L V S . T E X T

17. PA R AG R A P H /
H E A D I N G
S E L E C TO R
• Default paragraph
• All your headings
• Preformatted text

18. Bold and Italic are used to emphasise portions of text

19. Bulleted List
(Unordered)
• Bulleted list item #1
• Bulleted list item #2
• Bulleted list item #3
Numbered List
(Ordered)
1. Numbered list item #1
2. Numbered list item #2
3. Numbered list item #3

21. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a
augue vel lorem posuere imperdiet. Nulla ipsum est, eleifend et
eros a, rutrum sagittis neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a
augue vel lorem posuere imperdiet. Nulla ipsum est, eleifend et
eros a, rutrum sagittis neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a
augue vel lorem posuere imperdiet. Nulla ipsum est, eleifend et
eros a, rutrum sagittis neque.
Default for LTR - Use this!

23. Break the text after X characters
Break the text manually where you add with Read More

24. • Strikethough
• Is it really necessary?

25. • Horizontal Line
• Please use this instead of a sequence of dashes to achieve the
same effect

26. • Text colour
• Just no.

27. • Paste as text
• Strip the elements from text written with external text
editors

28. • Clear Formatting except for headings and lists

31. • Undo
• Redo

33. C O M M O N A N N OYA N C E S

34. T H I N G S M I G H T G E T WO N K Y
• Problem: Nested elements
• Solution: Go to theText Editor and move the closing tag in
the right place

35. T H I N G S M I G H T G E T WO N K Y
• Problem: Paragraph vs new line
• Solution: Enter creates a new paragraph, if you only want a
new line use Shift + Enter

36. T H I N G S M I G H T G E T WO N K Y
• Problem: Get me out of this list!
• Solution: Click Enter twice or go to theText Editor view,
position the mouse after the closing tag and start typing.

37. N OW I T ’ S YO U R T U R N !

38. F O R M AT A L L T H E T H I N G S , N OW
• Use a draft or an old post that needs some looooove
• Format ALL the things :-)
• Raise your hand and ask for help
• Tweet your newly formatted posts (and additional questions!)
with the hashtag #formatit #wcldn @FrancescaMarano

39. B I B L I O G R A P H Y
• Tim Berners-Lee proposal: https://www.w3.org/History/1989/
proposal.html
• Tim Berners-Lee HTML specs: https://www.w3.org/History/
19921103-hypertext/hypertext/WWW/MarkUp/Tags.html
• Jakob Nielsen “How Users Read OnThe Web“: https://
www.nngroup.com/articles/how-users-read-on-the-web/
• Jakob Nielsen “F-Shaped Pattern For Reading Web Content”: https://
www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
• Accessibility Resources: http://a11yproject.com/resources.html

40. B I B L I O G R A P H Y
• Rian Rietveld “HTML5 Headings in WordPress:A11y versus SEO?”:
https://blog.rrwd.nl/2014/11/21/html5-headings-in-wordpress-lets-
fight/
• Adrian Roselli “Typefaces for dislexia”: http://adrianroselli.com/
2015/03/typefaces-for-dyslexia.html
• Sami Keijonen “Writing Accessible Content”: https://foxland.fi/writing-
accessible-content/
• TracTicket #27159: https://core.trac.wordpress.org/ticket/27159
• Microsoft Inclusive DesignToolkit: https://www.microsoft.com/en-us/
design/inclusive

41. Q U E S T I O N S ?
@FrancescaMarano