WebAIR

Do you use the appropriate markup to present blocks of text (paragraphs, citations, blockquotes etc.)? (TXT01)

Why is this important?

There are many different ways of presenting text to a user (e.g. paragraphs, headings, citations, blockquotes etc.). There are also many different HTML elements to mark the text up appropriately. Using the appropriate markup will allow people with disabilities, particularly those using a screen reader, to interpret and navigate the webpage properly. For example, screen reader users often move through a webpage via headings. If heading text has been marked up as such, this will allow the user to move through the webpage easily. Using the appropriate markup to present text also makes it easier to define the apperance of a webpage. This is because different styles can be applied to the different elements using CSS.

How to fix the problem

Using the appropriate markup to present blocks of text will make it easier for people with disabilities to interpret the data. Paragragraph text should be marked up using the <p> element. Heading text should be marked up with the heading elements <h1> to <h6>. Citations (references to other sources) should be marked up with the <cite> element around the title of the work. Blockquotes should be marked up with the <blockquote> element.

Example

//An example of a paragraph
<p>This is a paragraph. You should use the paragraph element to present it.</p>
//An example of a heading
<h1>This is the title</h1>
<h2>This is the sub-title</h2>
//An example of a citation
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
//An example of a blockquote
<blockquote>This is a quote about something by somebody and should be presented differently from the surrounding text.</blockquote>

Further Information

  1. http://www.w3.org/community/webed/wiki/Marking_up_textual_content_in_HTML
  2. http://html5doctor.com/blockquote-q-cite/