There seems to be no consensus on what is expected in terms of citations in the HTML website for the Grade 11 & 12 PATs. 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 insert the citations? Here follows my approach to covering all the bases so to speak.
In this post:
Required knowledge:
1. Don’t use <cite> to cite
The <cite> tag was added to the DBE curriculum this year. It is not really suitable for citing work on your PAT website as the w3schools.com 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 a 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. For the sake of ticking all the boxes on the marking rubric, it would be wise to use the <cite> tag as prescribed above (please do not abuse it and use it incorrectly).
2. APA style
When you copy your content from your Phase 3 report, you will obviously by default copy the citations as well. You can then hyperlink the text within the parentheses to the relevant bibliography entry on the Bibliography webpage.
<!-- ON THE RELEVANT PAGE -->
<p>Use “APA-style” citations (<a href="bibliography.html#ref-wiki" title="Click to view source.">Public, J. 2019</a>)</p>
<!-- ON THE BIBLIOGRAPHY PAGE -->
<h1>References:</h1>
<ol>
<li id="#ref-wiki">Public, J. (2019). Citation. 5 October 2019, from <a href="https://en.wikipedia.org/wiki/Citation" target="_blank">https://en.wikipedia.org/wiki/Citation</a></li>
</ol>
3. 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>
<h6>References:</h6>
<hr />
<ol>
<li id="#cite1">Public, J. (2019). Citation. 5 October 2019, from <a href="https://en.wikipedia.org/wiki/Citation" target="_blank">https://en.wikipedia.org/wiki/Citation</a></li>
</ol>
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.