Markup demo page

[toc]

This page demonstrates how all of the different markup snippets work.

General rules

Use xml syntax with html5 valid tags even though it's technically valid html5 if you don't.
This means:

• Always include closing tags (or self closing tags)

  <p>Content</p> <hr /> <img src="img.jpg alt="" /> <p>Content</p>

• Always quote attribute values

  <span class="visuallyhidden">CORRECT!</span> <span class=visuallyhidden>WRONG!</span>

Headings

The H1 will always be the page title on this site. H2's should be used as the top level headings within the content areas.

<h2>Second level heading</h2>

Paragraphs (not Divs)

Semantically and from a formatting perspective, all actual paragraph content needs to be in paragraphs.

<div>This is INCORRECT</div> <p>This is CORRECT</p>

Buttons

You can add a button to a link so that it stand out a bit better. Simply add a class "button" to the <a> link tag and it'll render as a purple button. For example:

<a href="node/123" class="button">Button link</a>

will render like this:

Button link

Columns

While not supported in older browsers (like IE8), you can set a chunk of content to be rendered in columns by using the .columns class. You can apply them to paragraph tags, or wrap a series of paragraphs in a div. Avoid including images or tables or document links in a column-based layout as they may break the layout or look odd.

<p class="columns">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper.</p>

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper.

<div class="columns"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur.</p> <p>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> </div>

Example

Acronyms

If you have an acronym, you should add an <abbr> tag either by:

1. manually via the Source code and using the below code, or
2. by using the acronym selector in the Styles dropdown menu on the text editor toolbar (you will need to add the title manually after applying the style).

A correctly coded acronym should look like this (hover to see the title):

<abbr title="Australian Broadcasting Corporation">ABC</abbr>

ABC

This is incorrect as it has nothing in the title="" description (hover will not show title):

<abbr title="">ABC</abbr>

ABC

Ordered and un-ordered lists

Please use these correctly. Ordered lists are for things that belong in a specific order, unordered lists for things that are variations of the same thing or topic. Do not use lists around individual items. Lists should be nested correctly, ie. A second-level <ul> should appear inside a first level <li>.

<ul> <li>List item</li> <li>List item with children <ul> <li>child list item</li> <li>child list item</li> </ul> </li> </ul>

• List item
• List item with children
  • child list item
  • child list item

Semantic/ordered lists

Where content makes sense to be marked up as a list, but you don't want it to be formatted like a list, you can use the .no-bullets class on the ul or ol and it will be styled without the bullets and indentation.

1. Item one
2. Item two
   1. child list item
   2. child list item

Internal links

Make sure intenal links are relative to the site root. Use /node/[node-id] at all times.

<a href="http://asbestossafety.gov.au/this-is-wrong">Don't do this</a> <a href="/node/2292">Do it this way</a>

External links

Make sure links are correct and DO NOT specify a target attribute. We should never open a link in a new window or tab.

<a href=http://asbestossafety.gov.au/this-link target="_blank">Don't do this way</a>

<a href=http://asbestossafety.gov.au/this-link>Do it this way and keep it simple</a>

Do it this way and keep it simple

Horizontal rules

Simple, normal layout. Will result in a nice neat separator. You can use the HR button on the editor toolbar.

<hr />

---

Inline tables

Just insert the tables in to the code. Note that only simple tables should be used. Where a table is just a list of items, use a list instead. Where a table is quite complex, reference it as a document.

When inserting tables, ensure all accessibility considerations are covered off. (http://www.accessify.com/tools-and-wizards/accessibility-tools/table-builder/ is a good start)

Type	Value
Alplha	$49.00
Beta	$12.50

Proportion of Indigenous children enrolled in preschool program^ in 2011, by location.

Source: 2011 National Early Childhood Education and Care Collection; data on request

Caption for table

	Number of Indigenous children aged 4 and 5 years enrolled	Total Number of Indigenous 4 year olds~	% enrolled
Major Cities	2747	4360	63%
Regional*	4593	6069	76%
Remote**	2737	2998	91%
Australia	10081#	13427	75%

Complex table with no striping or highlighting using the no-stripe and no-highlight classes on the table tag.

State	Region	Organisation
NSW	Hunter	HGT Australia Ltd (Novaskill)
		Mission Australia
	North	HGT Australia Ltd
		Mission Australia
		Aboriginal Employment Strategy
	Southern	Workways Australia Ltd
		Mission Australia
		Access Group Training
	Sydney	Macarthur Workplace Learning Program
		Mission Australia
		Aboriginal Employment Strategy
	Western	Sureway Employment and Training
		Access Group Training Ltd
		Aboriginal Employment Strategy

Inline images

You can use the Image button in the text editor toolbar to insert an image. You will need to include some Alternative text as part of accessibility requirements.

A Caption can also be included for the image for images that require it - such as graphs or data sources. Once the image has been inserted, you will notice a text space beneath the image itself to add the caption.

The provided styles provide options to align left, right, center, or none.

 

Footnotes/References

Use method from example 14 - https://www.w3.org/TR/html5/common-idioms-without-dedicated-elements.html#footnotes

<p> Norman: I don’t. <sup><a href="#fn1" id="r1">[1]</a></sup>
<p> Interviewer: You told me you did!
...
<p id="fn1"><a href="#r1">[1]</a> This is, naturally, a lie,
but paradoxically if it were true he could not say so without
contradicting the interviewer and thus making it false.</p>

Norman: I don’t. ^[1]

Interviewer: You told me you did! ...

[1] This is, naturally, a lie, but paradoxically if it were true he could not say so without contradicting the interviewer and thus making it false.

Block quotes / boxed content

Basic blockquotes should use the blockquote tag.

Do not use blockquotes for formatting - they have specific semantic meaning as a piece of content from another source.

<p><q>Find me some gold</q>, said the miner</p> <blockquote>Find me some gold</blockquote>

If you have a reference, use the following markup:

This is the quote, it is very profound.

Where a quote is not an actual quotation, but you want to use similar formatting, you can use the boxed style in the Styles dropdown options in the text editor toolbar. You can select from purple, teal, or blue.

Bold Text, italics/emphasized text

See the atrticle here for more details: http://html5doctor.com/i-b-em-strong-element/

Use <strong> for bolding where you want to emphasise strong importance.
Do not use <b> on deewr.gov.au as it is effectively a visual-only tag now.
Use <em> for emphasis.
Use <i> only for icons, referencing titles, or content in a language other than the language of the page.

StrongBoldEmphasisItalic

Text sizes

While it's not recommended for regular content, sometimes you will want to change the size of the text on a certain area of a page. There are a few helper classes available for you to do this. You can use the Styles dropdown menu in the text editor toolbar to change the text on a page:

• tiny
• small
• large

Colours

Specifying colours should be done sparingly, but when needed, these classes are available to help keep things consistent and accessible (when used on white or default grey backgrounds). You can use the Styles dropdown menu in the text editor toolbar to change the text on a page:

• purple
• blue
• teal

Visually hidden content

Where you need to include a heading or text for accessibility purposes, but don't want it to visually appear on the site you can use the visuallyhidden class. This hides the text from view, but screen readers will still find it.

This is the best way to solve the accessibility issue of links out of context, a AAA requirement.

The following code:

<a href="ducks.html"><span class="visuallyhidden">Visit the </span>Ducks<span class="visually-hidden"> page</span></a>

Results in this:

Visit the Ducks page

Accessible infographics

Infographics look great, but you need to ensure screen readers can also pick up on the content and read it out. To do this, you will need to copy all the text in the infographic, including any descriptive text for images or graphs, and insert on the page wrapped up within a Visually Hidden container (as described above).

For example:

<span class="visuallyhidden">

<h2>Post Event Results</h2>

<p>70.74% of respondents indicated that their overall impression of the summit was either extremely informative or very informative.</p>

</span>

<img src="/infographic.png" />

Results in this:

Post Event Results

70.74% of respondents indicated that their overall impression of the summit was either extremely informative or very informative.