Wikipad – Unofficial Coding Documentation

[SockMonster1]

Contents HTML Reference List of HTML Elements

---

Find out what HTML Elements are available on Wacky and how to use them. Includes examples and template code.

Learn More Learning Markdown Markdown styles + examples

---

The complete list of Markdown styles available on the Wacky Writers forums with demos showcasing their use.

Learn More Learning BBCode BBCode Styles + Examples

---

The complete list of BBCode styles and elements available for use on the Wacky Writers forums with demos to showcase their use.

Learn More Community Resources More Resources & Information

---

A repository of coding resources and threads from the Wacky community! Expect guides, tutorials, showcases and more. Learn More

[SockMonster1]

Community Resources

Resources:

• Rules for Using Markup/BBCode/HTML in these forums

• Coding Resource Megathread@astrophile

Showcases:

• Animated Dropdown Menu@SockMonster1

PM me to get your resource featured here

[SockMonster1]

HTML Reference

Text Formatting	<b> <i> <s> <mark> <del> <ins> <small> <sub> <sup> <h1 to 6> <kbd> <ruby> <rt> <rb> <rp> <abbr>
Text Containers	<blockquote> <code> <p> <pre>
Content Containers	<div> <span>
Spatial Dividers	<br> <hr>
Lists	<dl> <dd> <dt> <ol> <ul> <li>
Tables	<table> <tr> <th> <td>
Summary and Details	<details> <summary>
Links	<a>
Images	<img>
Video and Audio	<video> <audio> <track> <source>

[SockMonster1]

Markdown

---

A complete reference showcasing and demonstrating the use of Markdown elements on the Discourse forums. For an interactive tutorial visit CommonMark.

Contents

1. Headings
2. Text Formatting
3. Links
4. Horizontal Rule
5. Images
6. Lists
7. Tables

Headings

Used to create styled headings.

Demo:

h1

# h1

h1
=

h2

## h2

h2
-

h3

### h3

h4

#### h4

h5

##### h5

h6

###### h6

Text Formatting

Applies basic styles to text.

Demo:

italic

_italic_

*italic*

bold

__bold__

**bold**

strikethrough

~~strikethrough~~

quote
quote

> quote
> quote

code

`code`

<div>
  codeblock
</div>

```
<div>
  codeblock
</div>
```

    <div>
      codeblock
    </div>

* Lines are indented with 4 spaces

Links

Creates a hyperlink to a URL address. URL addresses may include other websites, email addresses, files or even locations within the same webpage.

Demo:

WackyWriters Forum!

[WackyWriters Forum!][1]

[1]: https://forum.wackywriters.com/

Horizontal Rule

Inserts a horizontal line spanning the width of the container to visually separate content.

The background of the demo box has been darkened to improve contrast.

Demo:

Line 1

---

Line 2

Line 1

---
Line 2

Line 1
***
Line 2

Line 1
___
Line 2

Images

Used to display images.

Demo:

![Legacy WackyWriters Logo](https://storage.wackywriters.com/original/2X/1/15ea83bc7eaf249cc758b6b18b1e83d677760ca9.png)

![Legacy WackyWriters Logo][Wacky Source]



[Wacky Source]: https://storage.wackywriters.com/original/2X/1/15ea83bc7eaf249cc758b6b18b1e83d677760ca9.png

Lists

Used to create order, unordered or check lists.

Demo:

• Item 1
• Item 2

* Item 1
* Item 2

+ Item 1<br>+ Item 2

- Item 1<br>- Item 2

10. Item 10
11. Item 11

10) Item 10
11) Item 11

10. Item 10
11. Item 11

Item 1
Item 2

[x] Item 1
[ ] Item 2

Tables

Creates a table used for storing and organising information.

Demo:

Heading 1	Heading 2	Heading 3
Cell	Cell	Cell
Cell	Cell	Cell

| Heading 1 | Heading 2 | Heading 3 |
| --------- |:---------:| ---------:|
| Cell      | Cell      | Cell      |
| Cell      | Cell      | Cell      |

---

Back to HTML ReferenceSpot something we didn't? Let us know!

[SockMonster1]

BBCode

---

A complete reference showcasing and demonstrating the use of BBCode elements on the Discourse forums. For more information see the official Discourse resource for the BBCode plugin.

Contents

1. Text Formating
2. Font, Colour and Size
3. Text Alignment
4. Quote
5. Links and Emails
6. Images
7. Lists
8. Jump To

Text Formating

Applies basic styles to text.

Demo:

bold

[b]bold[/b]

italic

[i]italic[/i]

underline

[u]underline[/u]

strikethrough

[s]strikethrough[/s]

code

[code]code[/code]

@SockMonster1

quote

[quote="SockMonster1"]quote[/quote]

spoiler

[spoiler]spoiler[/spoiler]

Font, Colour and Size

Applying styles which affect the font, color or size of text.

Demo:

Times New Romans

[font="Times New Romans"]Times New Romans[/font]

small

[small]small[/small]

color

[color="chartreuse"]color[/color]

highlight

[highlight]highlight[/highlight]

background color

[bgcolor=#11AAEE]background color[/bgcolor]

Text Alignment

Dictates the positioning of the text.

Demo:

center

[center]center[/center]

left

[left]left[/left]

right

[right]right[/right]

Quote

Denotes content as belonging to another source.

Demo:

@SockMonster1

quote

[quote="SockMonster1"]quote[/quote]

Links and Emails

Create a hyperlink to a URL address or email address.

Demo:

WackyWriters Forum

[url="https://forum.wackywriters.com"]WackyWriters Forum[/url]

email@email.com

[email="email@email.com"]email@email.com[/email]

Images

Used to display an image.

Demo:

[img]https://storage.wackywriters.com/original/2X/1/15ea83bc7eaf249cc758b6b18b1e83d677760ca9.png[/img]

Lists

Used to create ordered or unordered lists.

Demo:

1. Item 1
2. Item 2

[ol]
  [li]Item 1[/li]
  [li]Item 2[/li]
[/ol]

• Item 1
• Item 2

[ul]
  [li]Item 1[/li]
  [li]Item 2[/li]
[/ul]

Jump To

Users can jump to anchor points in a document by clicking the link.

Demo:

Click here!

[jumpto="anchorDemo"]Click here![/jumpto]

…

…

…

Anchor

[aname="anchorDemo"]Anchor[/aname]

---

Back to HTML ReferenceSpot something we didn’t? Let us know!

[SockMonster1]

Text Formatting

---

The list of HTML tags used to format text.

Contents

1. Bold <b>
2. Italic <i>
3. Strikethrough <s>
4. Highlight <mark>
5. Delete and Insert <del>, <ins>
6. Small <small>
7. Subscript and Superscript <sub>, <sup>
8. Headings <h1> to <h6>
9. Keyboard Input <kbd>
10. Ruby <ruby>, <rb>, <rp>, <rt>
11. Abbreviation <abbr>

Bold

Makes text bold.

Demo:

bold

<b>bold</b>

Italic

Makes text italicised.

Demo:

italics

<i>italics</i>

Strikethrough

Used to strike out text.

Demo:

strikethrough

<s>strikethrough</s>

Highlight

Used to highlight text.

Demo:

highlight

<mark>highlight</mark>

Delete and Insert

Used to signify which sections of text have been deleted or inserted respectively.

Demo:

deleted

<del>deleted</del>

inserted

<ins>inserted</ins>

Small

Used to signify smaller text such as side comments.

Demo:

small

<small>small</small>

Subscript and Superscript

Used to apply subscript or superscript to text respectively.

Demo:

Example of _subscript text

<sub>subscript</sub>

Example of ^superscript text

<sup>superscript</sup>

Headings

Used to define and style headings.

Demo:

h1

<h1>h1</h1>

h2

<h2>h2</h2>

h3

<h3>h3</h3>

h4

<h4>h4</h4>

h5

<h5>h5</h5>

h6

<h6>h6</h6>

Keyboard Input

Used to denote a key on the keyboard.

Demo:

To copy press Ctrl + C

<kbd>Ctrl</kbd>

Ruby

Ruby allows for text to be annotated with pronunciations or additional information. It is most commonly used in Japanese and Chinese text.

The base text is written inside of <rb> whilst the annotation to appear above is written inside of <rt>. For browsers which cannot render ruby notation, we use <rp> (Ruby Parantheses) to insert parentheses. For browsers which do support ruby notation, the contents of <rp> are hidden.

Demo:

WWW ( World Wide Web )

<ruby>
  <rb>WWW</rb>
  <rp>(</rp>
  <rt>World Wide Web</rt>
  <rp>)</rp>
</ruby>

How it appears for browsers which do not support <ruby>:

WWW (World Wide Web)

Abbreviation

Used to define an abbreviation or acronym. This element does not apply styles to text unless it is combined with the title attribute.

Demo:

<abbr> with title attribute:
www

<abbr title="World Wide Web">www</abbr>

How it should appear:

<abbr> without title attribute:
www

<abbr>www</abbr>

---

Back to HTML ReferenceSpot something we didn't? Let us know!

[SockMonster1]

Text Containers

---

HTML elements used to contain text.

Contents

1. Blockquote <blockquote>
2. Code <code>
3. Paragraph <p>
   • lang=""
4. Preformatted Text <pre>

Blockquote

Used to denote quoted content.

Demo:

blockquote

blockquote

Code

Used to denote code. On Wacky, the style of <code> changes when directly placed inside a <p>, <li> or <pre>.

The background of the demo box has been darkened to improve contrast.

Demo:

code

<code>code</code>

code

<p>
  <code>code</code>
</p>

code

<li>
  <code>code</code>
</li>

code

<pre>
  <code>code</code>
</pre>

Paragraph

Separates long passages of text into paragraphs.

Demo:

paragraph 1

paragraph 2

<p>paragraph 1</p>
<p>paragraph 2</p>

lang=""

Used to specify the language of the text. This attribute only accepts ISO 639-1 language codes as values, see here for a full list.

Aside from semantics, specifying the language will ensure that browsers render non-english characters correctly (issue described here).

Demo:

This text is in English

<p lang="en">This text is in English</p>

Preformatted Text

Used to denote that the text has been preformatted. This is useful as it prevents line wrapping and preserves whitespaces and line breaks therefore retaining text structure.

Demo:

Consecutive whitespace characters    are retained

<pre>Consecutive whitespace characters    are retained</pre>

---

Back to HTML ReferenceSpot something we didn't? Let us know!

[SockMonster1]

Content Containers

---

Used to contain other elements, organising them into different sections of the document.

Contents

1. div <div>
   • align=""
   • lang=""
2. span <span>
   • lang=""
   • style=""

div

A block-level element used to section the document.

Demo:

div

<div>div</div>

align=""

Used to designate which direction the text should be read from (left to right or right to left). Only use dir="auto" if the text direction is unknown.

Demo:

One Two Three Four

<div dir="ltr">One Two Three Four</div>

One Two Three Four

<div dir="rtl">One Two Three Four</div>

One Two Three Four

<div dir="auto">One Two Three Four</div>

lang=""

Used to specify the language of the text. This attribute only accepts ISO 639-1 language codes as values, see here for a full list.

Aside from semantics, specifying the language will ensure that browsers render non-english characters correctly (issue described here).

Demo:

This text is in English

<div lang="en">This text is in English</div>

span

Normally used to group inline elements together however, on Wacky Writers this is the only element where CSS styles can be used.

Demo:

span

<span>span</span>

lang=""

Used to specify the language of the text. This attribute only accepts ISO 639-1 language codes as values, see here for a full list.

Aside from semantics, specifying the language will ensure that browsers render non-english characters correctly (issue described here).

Demo:

This text is in English

<span lang="en">This text is in English</span>

style=""

Allows for the use of CSS styles but only when font-size is the first style specified. This has been acknowledge and permitted for use by the site admin^[source].

Demo:

Oh no! It didn't work!

<span style="color: var(--success);">Oh no! It didn't work!</span>

It worked!

<span style="font-size:; var(--success);">It worked!</span>

---

Back to HTML ReferenceSpot something we didn't? Let us know!

[SockMonster1]

Spatial Dividers

---

Elements used to spacially separate content.

Contents

1. Line Break <br>
2. Horizontal Rule <hr>

Line Break

Inserts a new line break forcing any content following the <br> onto a new line.

Demo:

Line 1
Line 2

Line 1<br>Line 2

Horizontal Rule

Inserts a horizontal line spanning the width of the container to visually separate content.

The background of the demo box has been darkened to improve contrast.

Demo:

Line 1

---

Line 2

Line 1<hr>Line 2

---

Back to HTML ReferenceSpot something we didn't? Let us know!

[SockMonster1]

List Elements

---

Organising information using lists.

Contents

1. Description List <dl>, <dd>, <dt>
2. Ordered List <ol>, <li>
3. Unordered List <ul>, <li>

Description List

Creates a list of items accompanied by their descriptions.

Demo:

Item One

Description One

Item Two

Description Two

Item Three

Description Three

<dl>
<dt>Item One</dt>
  <dd>Description One</dd>
<dt>Item Two</dt>
  <dd>Description Two</dd>
<dt>Item Three</dt>
  <dd>Description Three</dd>
</dl>

Ordered List

Creates a new ordered list. On Wacky, this can only be used to create numerical lists.

Demo:

1. One
2. Two
3. Three

<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

Using the <start=""> attribute:

11. One
12. Two
13. Three

<ol start="11">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

Unordered List

Creates a bullet point list.

Demo:

• One
• Two
• Three

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

---

Back to HTML ReferenceSpot something we didn't? Let us know!

[SockMonster1]

Tables

---

An element used to store organised information in rows and columns.

<table>: Encapsulates all the code to be included in the table
<caption>: Table Heading
<tr>: Create a new row
<th>: Heading of a row
<td>: A table cell

Demo:

Sweets Menu!

Item	Price
Icecream	$2.00
Chocolate	$4.00

<table>
<caption>Sweets Menu!</caption>
<tr>
  <th>Item</th>
  <th>Price</th>
</tr>
<tr>
  <td>Icecream</td>
  <td>$2.00</td>
</tr>
<tr>
  <td>Chocolate</td>
  <td>$4.00</td>
</tr>
</table>

---

Back to HTML ReferenceSpot something we didn't? Let us know!

[SockMonster1]

Details and Summary

---

The contents of <details> can be hidden or shown on demand when the heading is clicked on. <summary> is a subelement of the <details> tag and contains the heading.

Contents

1. Details <details>
   • open=""
   • .elided
2. Summary <summary>
   • title=""

Details

open=""

The <details> element is closed by default until the user clicks on the heading. To have the contents of the element shown from the beginning, we use the open attribute.

Demo:

Closed

Contents

<details>
  <summary>Closed</summary>
  <p>Contents</p>
</details>

Open

Contents

<details open>
  <summary>Open</summary>
  <p>Contents</p>
</details>

.elided

Applies custom styles to both <details> and <summary> elements.

Demo:

*

Contents

<details class="elided">
  <summary>*</summary>
  <p>Contents</p>
</details>

Elided CSS

.elided {
  background-color: unset;
  padding: 0;
}

.elided summary {
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  margin: 0;
  padding: .5rem .75rem;
  color: var(--primary-medium);
  background: var(--primary-very-low);
  width: min-content;
  line-height: 1;
}

Summary

title=""

Used to specify the tooltip which appears when the mouse hovers over the link.

Demo:

With 'title' attribute

Contents

<details>
  <summary title="Hello World!">With 'title' attribute</summary>
  <p>Contents</p>
</details>

How it should appear:

---

Back to HTML ReferenceSpot something we didn't? Let us know!

[SockMonster1]

Links

---

Creates a hyperlink to a URL address. URL addresses include other websites, email addresses, files or even locations within the same webpage.

Contents

1. Attributes
   • href=""
   • name=""
   • title=""

href=""

The URL is expressed as the value of the href attribute.

Demo:

Click here!

<a href="https://forum.wackywriters.com/t/wikipad-unofficial-coding-documentation/14894/13">Click here!</a>

name=""

This attribute has been depreciated and functionally replaced by the id attribute in HTML5. Note that id cannot be used on WackyWriters.

Specifies the name of an anchor point in a document. Users can jump to these anchor points in a document without scrolling.

Demo:

Jump to anchor point:

Click here!

<a href="#name_attribute_demo">Click here!</a>

...

...

...

Anchor Point

<a name="nameAttributeDemo">Anchor Point</a>

title=""

Adds a text tooltip to display when the mouse is hovering over the element.

Demo:

Hyperlink with title="Tooltip!":
Tooltip on hover!

<a title="Tooltip!">Tooltip on hover!</a>

How it should appear:

---

Back to HTML ReferenceSpot something we didn't? Let us know!

[SockMonster1]

HTML Tag <img>

---

Used to display images.

Contents

1. Attributes
   • width="", height=""
   • title=""
   • alt=""

width="", height=""

Specifies the width and height of the <img>.

Demo:

<img width="50" height="50" src="https://storage.wackywriters.com/original/2X/1/15ea83bc7eaf249cc758b6b18b1e83d677760ca9.png">

title=""

Creates a popup tooltip which appears when the cursor remains stationary over the image for a few moments.

Demo:

Hover over the image to see the tooltip:

<img title="WackyWriters" src="https://storage.wackywriters.com/original/2X/1/15ea83bc7eaf249cc758b6b18b1e83d677760ca9.png">

How it should appear:

alt=""

Contains a description of the image. Although this attribute is invisible majority of the time, screen readers and browsers where images have been disabled will replace the image with the alt text instead.

In order to test this feature, you can temporarily disable images from loading (Google Chrome, Firefox).

Demo:

<img> without alt attribute:

<img src="https://storage.wackywriters.com/original/2X/1/15ea83bc7eaf249cc758b6b18b1e83d677760ca9.png">

<img> with alt="Legacy WackyWriters Logo":

<img alt="Legacy WackyWriters Logo" src="https://storage.wackywriters.com/original/2X/1/15ea83bc7eaf249cc758b6b18b1e83d677760ca9.png">

[SockMonster1]

Video and Audio

---

Embedding video, audio and their subtitles into posts.

Contents

1. Video <video>, <source>
2. Audio <audio>, <source>
3. Subtitles <track>

Video

With <video>, we can embed multiple video formats. This is useful as not all browsers are capable of supporting all video formats, hence by including many we increase the number of users able to watch our video.

Video borrowed from W3Schools.

Demo:

<video width="320" height="240" controls>
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Audio

With <audio>, we can embed multiple audio formats. This is useful as not all browsers are capable of supporting all audio formats, hence by including many we increase the number of users able to listen to our audio.

Audio borrowed from W3Schools.

Demo:

<audio controls>
  <source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Subtitles

No working example available.

Videos and audio can also come with subtitles across multiple languages.

Example borrowed from W3Schools.

Demo:

<video width="320" height="240" controls>
  <source src="forrest_gump.mp4" type="video/mp4">
  <source src="forrest_gump.ogg" type="video/ogg">
  <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

---

Back to HTML ReferenceSpot something we didn't? Let us know!