More Advanced HTML Code Tricks

[in_sufficientdata]

Textboxes

This is an example of a textbox.

You can make a text box that will allow people to copy code or forms from your journal. The code for this is <textarea> </textarea>

Note that if you wish to include a code for a textbox inside the textbox, you will have to use escape code to replace the characters < and > in the code in the textbox code. The code for these are &lt; for < and &gt; for > .

You can also style textboxes.

This is an example of a styled textbox.

The code for this one is as follows:

<textarea style="outline:0;border: 1px solid #0097cf;border-radius: 8px;">This is an example of a styled textbox.</textarea>

Alternate Bullet Points

• I like this character for a bullet point list.
• It looks much nicer than a dot.

To create this, you use styling on the ul tag:

<ul style="list-style-type:'⟡ '">

Then you use the <li> and </ul> tags as usual.

Hover text

You may see people using this trick in tags in places where, for example, the character is speaking a foreign language but they still want you to know the translation. Hover your mouse over this text and you'll see how it works:

I am a total coding guru.

Here is the code to make this work:

<span title="Do not listen to me I am a loser lol">I am a total coding guru.</span>

This is a separate part of the tag from the styling. If you wanted to use span to style this tag you would put it after the quotation mark that end the title part of the tag but before the > .

[Note: Unfortunately this trick is not mobile-friendly. If you want people who phone tag to catch the hidden text, you'll have to make it part of the tag proper.]

Details Tag

Use of this trick will hide the contents of a heading, which is revealable by clicking the triangle beside the heading. This comes in handy if you're writing a long block of text that counts as spoilers, for example.

This is an example heading

This is the example text I have hidden under the heading.

Here is the code for this example:

<details><summary><b>This is an example heading</b></summary>

This is the example text I have hidden under the heading.</details>

Want to know how to do something you don't know or haven't been able to figure out? Ask in the comments below!