Exercise 5. Inline HTML

On this page we will:

  • See how HTML tags can be mixed into Markdown.
  • Use inline HTML for line breaks, small print and keyboard keys.
  • Add helpful abbreviations that show full text on hover.

Web pages are written in HTML (HyperText Markup Language), which uses tags like <p>, <a>, and <strong> to describe how things should look.

In a Markdown document, you can sometimes mix in small pieces of HTML. This is called inline HTML: you add a tiny HTML tag inside a sentence, and Quarto keeps it when it turns your page into HTML.

Caveat: raw HTML is only kept when the output format supports it (for example, HTML pages). Some tags may be dropped or ignored when rendering to PDF or Word.

You should complete the listed tasks in the 5_inline_html.qmd file on your Codespace. Once you have worked through these tasks, commit and push your change.

1 Line break

You can insert a line break using <br>.

First part of the sentence.<br>Second part on a new line.

Task: In html.qmd:

2 Small text

You can make a small “fine print” style note using the <small> tag.

This is <small>small print</small>.

This is small print.

Task: In html.qmd:

3 Keyboard keys

The <kbd> tag is often used to show keys that the user should press on the keyboard.

Press <kbd>Ctrl</kbd> + <kbd>C</kbd>.

Press Ctrl + C.

Task: In html.qmd:

4 Abbreviations

You can explain abbreviations by using the <abbr> tag with a title attribute. When someone hovers over it in a browser, they see the full phrase.

<abbr title="Randomised Controlled Trial">RCT</abbr>

RCT

Alternatively, you can use footnotes @sec-footnotes to explain the term.

Task: In html.qmd: