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

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

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

A B I T O F H I S TO RY

• March 12, 1989 - Sir Tim 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”

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

H T M L 1 0 1

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>

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 Closing Tag!)

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>

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

M I C R O 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”

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

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

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

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

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

Bold and Italic are used to emphasise portions of text

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

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!

Break the text after X characters

Break the text manually where you add with Read More

• Strikethough

• Is it really necessary?

• Horizontal Line

• Please use this instead of a sequence of dashes to achieve the same effect

• Text colour

• Just no.

• Paste as text

• Strip the elements from text written with external text editors

• Clear Formatting except for headings and lists

• Undo

• Redo

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

T H I N G S M I G H T G E T WO N K Y

• Problem: Nested elements

• Solution: Go to the Text Editor and move the closing tag in the right place

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

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 the Text Editor view, position the mouse after the closing tag and start typing.

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

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

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 On The 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

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/

• Trac Ticket #27159: https://core.trac.wordpress.org/ticket/27159

• Microsoft Inclusive Design Toolkit: https://www.microsoft.com/en-us/design/inclusive

Q U E S T I O N S ?

@FrancescaMarano