HTML Academic Citation Markup: Inline Citations and Works Cited

An academic citation connects a statement to the work that supports it. A numbered in-page link can jump to a matching entry in Works Cited.

What You Need to Know

Choose one citation style and apply it consistently. The cite element marks a work's title; it does not automatically check the truth of a claim.

The goal is not to collect as many tags as possible. Pick the element that best describes what the content really is.

Example: See It in Action

Here is a simple example to experiment with. Type it, save the file, and check what the browser displays.

This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.

<article>
    <h1>Research Notes</h1>
    <p>Several studies discuss this topic <a href="#reference-1">[1]</a>.</p>
    <h2>Works Cited</h2>
    <ol>
        <li id="reference-1"><cite>Introduction to Biology</cite>.</li>
    </ol>
</article>

Let’s Understand the Example

• Article marks a piece that could make sense on its own, such as a news post or recipe.
• An h1 introduces the main subject of the page. Use the heading level for structure rather than font size.
• A p groups a paragraph of related text. Start another paragraph for a new thought.
• Href contains the destination of a link. A value starting with # points to an id on the same page.
• Id gives one element a unique name within the page, so a link, label, or script can point to it.

The first example link points to #reference-1. Check whether that destination exists relative to the document. A link changes where readers go; it does not perform an action such as saving a form.

What Should You See?

The page should display “Research Notes” as a heading, followed by its related content. Change the heading text and refresh the browser to see the result.

Read only the headings, from top to bottom. Do they tell a sensible story? If not, move sections or choose levels that match the content.

Try It Yourself

1. Create a second citation and a matching Works Cited entry.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Listing sources without letting readers connect a claim to its reference.
• Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.

Key Takeaways

• An academic citation connects a statement to the work that supports it.
• Article marks a piece that could make sense on its own, such as a news post or recipe.
• Choose one citation style and apply it consistently. The cite element marks a work's title; it does not automatically check the truth of a claim.