HTML5 banner image.

There seems to be no consensus on what is actually expected in terms of citations in the HTML website for the Grade 12 PAT. Of course, you will create a bibliography.html page, copy the text from your Microsoft Word bibliography and style it as a numbered list, but how do you actually insert the citations? Here follows my approach to covering all the bases so to speak.

In this post:

  1. Don’t use <cite> to cite
  2. Wiki-wiki-style

1. Don’t use <cite> to cite

The <cite> tag was added to the DBE curriculum this year. Suggesting that it is suitable for citing work in the PAT website is misguided as the website makes clear.

Suggesting that the <cite> tag is suitable for citing work in the PAT website is misguided as the website makes clear.

According to w3schools, the only actual valid HTML tag as such is the <cite> tag; quote”The <cite> tag defines the title of creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).”

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

Considering the format of citations provided by Word for the purpose of citing work this is clearly not sufficient for our purpose.

2. Wiki-wiki-style

I have adopted the style Wikipedia uses, which is to have a footer-like section at the bottom of each page and superscript numbered references much like footnotes in a Word document. You can link the numbers in the text to the references in the footer.

A very brief code example of this approach:

<p>Use “footnote-style” citations (see Wikipedia for examples) <sup><a href="#cite1" title="Click to scroll to citation 1">[1]</a></sup></p>

<hr />
    <li id="#cite1">Public, J. (2019). Citation. 5 October 2019, from <a href="" target="_blank"></a></li>

For more on creating hyperlinks to locations on the same page, read the post: Hyperlink to a location on the same page.

You can also credit your images on your webpage using one of the new tags introduced in HTML5, the <figcaption> tag. More here: Adding captions to images in HTML.

By MisterFoxOnline

CAT Educator

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.