HTML and Shortcodes Formatting

This page will be used to display and test various HTML5 elements (<html>) and shortcodes ([shortcode]) that are used on this website. This page also provides a way to visually understand the action of some HTML5 elements and shortcodes. See "BBCodes" (https://dcjtech.info/bbcodes/) for a list of supported BBCodes and shortcodes used on this website.

Basic

  • <strong> - This is bold
  • <em> - This is italic
  • <span style="text-decoration: underline;"> - This is underlined
  • <del> - This is strike-through
  • <ins> - [ins]This is insert[/ins]
  • <sup> - This is superscript
  • <sub> - This is subscript
  • <span style="color: #ff6600;"> - This is text-coloring
  • <span style="background-color: #ff6600;"> - This is background-coloring
  • <bdo> - This text is reversed.

Table

HEADER 1HEADER 2
ITEM 1VALUE 1
ITEM 2VALUE 2
ITEM 3VALUE 3

Nested Quoting

Outer quote
Inner quote

Deep quote

Code

  • <pre> -
    This is preformatted; used for block/multi-line code without highlighting
  • [no-highlight] - [no-highlight]This is multi-line code without syntax highlighting[/no-highlight]
  • <code> - This is generic single-line/in-line code without highlighting
  • [code] - This is generic single-line/in-line code without highlighting
  • [raw] - This is raw code with generic highlighting
  • [shell] - echo 'This is inline Unix shell code with highlighting'
  • [shell] -

    echo "This is multi-line Unix shell code with highlighting."
echo "The only two differences are"
echo " more lines of code"
echo " and the shell-shortcode begins on its own line."
echo " However, this is the same shortcode."

Miscellaneous

  • <abbr> -
  • <address> -
    This is an address as a block-element. This cannot be used in-line.
  • <blockquote> -

    This is a blockquote used to make long quotes. Only use blockquotes on this website when quoting someone and be sure to specify the source or piece of work (i.e. book, magazine, website, movie, etc.).

  • <kbd> - Ctrl+S
  • <q> - This is an in-line and small quote
  • <samp> - Sample text
  • <var> - Variable

MathML

Below is a snippet of MathML code, and the equation is shown below the code (if supported by your browser).

<math><mrow>

    <msup><mi>a</mi><mn>2</mn></msup>

    <mo>+</mo>

    <msup><mi>b</mi><mn>2</mn></msup>

    <mo>=</mo>

    <msup><mi>c</mi><mn>2</mn></msup>

</mrow></math>

a2+b2=c2