Home Button

/

posts

/

elements

/

Me

Button to go back to home page

Joshua Clements

HTML Markup Tour

03/01/2024



Text Formatting

Normal text obviously works, however specific formatting works as well.

Text can be bold or italic (or a combination of both).

Hyperlinks work as expected1

That link leads to a special website by the way

Let that last point be struck from the record

Another aside to state that emojis are made accessible with proper screenreader tags: 🚀🚀🚀

Images

Example of loading a remote image:

Example image

Image located within a figure

Example image
Oh lovely image this is

Tables

SyntaxDescription
HeaderTitle
ParagraphText

Code

Terminal
#!/bin/sh
echo "This is a terminal, wow!"
example.js
// Example function
function add(a, b) {
return a + b;
}
// Example function
function add(a, b) {
2 collapsed lines
console.log("Hello");
console.log("World");
return a + b;
}
--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+this is an actual diff file
-all contents will remain unmodified
no whitespace will be removed either
function thisIsJavaScript() {
// This entire block gets highlighted as JavaScript,
// and we can still add diff markers to it!
console.log('Old code to be removed')
console.log('New and shiny code!')
}

Admonitions

Note

This is note what you are looking for

Info

This isn’t what you are looking for.

Tip

Here is some advice: this isn’t what you are looking for

Important

It is important for you to know that this is not what you are looking for

Warning

I am warning you - this isn’t what you are looking for

Danger

Uh oh, this is not what you are looking for

Footnotes

Here’s a simple footnote2

Unordered Lists

  • Item 1
  • Item 2
  • Item 3

Ordered Lists

  1. Hello
  2. World
  3. Help

Nested Lists

  • Hello
    • Why Hello
    • This is a fine day
  • Yes it is

Task Lists

  • Write the press release
  • Update the website
  • Contact the media

Abbreviations

Hi

KBD Element

CTRL

Blockquotes

This is a blockquote, which is commonly used when quoting another person or document.

Blockquotes are indicated by a > at the start of each line.

Now

Wouldn’t it be fun if

We had nested Blockquotes

Triple nested??? Blockquote-ception?

Footnotes

  1. I’m sorry

  2. If you want multiple lines

    Add a tab of indent to have it wrap