Most Common HTML For Roleplaying

[sapphiresiren]

Reference for anyone who needs it. I honestly haven't encountered anything more than what is listed here in any of my posts. (I've seen tables for memes, but that's a little more complex than a roleplay post.)

In general, some code like videos or lists will put in extra line breaks where you might not want them. Sometimes you have to butt a paragraph up against a tag, but it will show on your post as having a line break even when there is no line break in the actual code/text. The "Preview" button is your friend.

1. Leave a blank comment for just the icon face reaction, only type this one character and nothing else in the comment box: <
   
   You can insert the rest of these tags in the middle of sentences.
   
   
2. Bold: <b>Text.</b> Text. OR <strong>Text.</strong> Text.
   
   
3. Italics: <i>Text.</i> Text. OR <em>Text.</em> Text.
   
   A note on these four tags. B and I are stylistic and only effect the look of words. STRONG and EM effect how something besides a computer displays the text, or how text-to-speech readers read the text. (For example, a Palm Pilot(lol) specifically might render STRONG as an underline instead of a bold because of the way it displays text.) It's up to you which one you use. If you and your roleplay partners don't need text-to-speech and only use computers, go ahead and use the B and I tags. If anyone involved in the roleplay needs text-to-speech or views Dreamwidth on their phone, you might want to use STRONG and EM instead. Be thoughtful of others' disabilities, even if some tags take longer to type.
   
   
4. Underline: <u>Text.</u> Text.
   
   
5. Strikethrough: <s>Text.</s> Text.
   
   
6. Smaller text: <small>Text.</small> Text.
   
   
7. Specific fonts: <font size="#" color="colorname">Text.</font> Size 5, blue: Text.
   
   
8. Add a link: <a href="URL HERE">Text.</a> This is a link to Google.
   
   
9. Insert an image: <img src="URL HERE, MUST BE PICTURE FILE"> Here is a picture of the Olympic Rings:
   
   
   <img src="URL HERE, MUST BE PICTURE FILE" alt="Description of picture for hover."> Here is a picture of the Olympic Rings with hover text "Olympics":
   
   
   Yes, you leave an IMG tag open, unlike the rest. Because you can't place text inside the image like with the other tags, IMG is self-closing.
   
   
10. Make an image a clickable link to a webpage: <a href="URL HERE"><img src="URL HERE, MUST BE PICTURE FILE"></a> Clickable picture of Olympic rings that leads to Google:
    
    
    
11. Embedding a YouTube/other video: <iframe width="#[pixels]" height="#[pixels]" src="INSERT LINK" frameborder="0" allowfullscreen></iframe>
    
    Here is the video for Sad Cat Diaries (which if you haven't seen, watch, it's hilarious):
    
    "Sad Cat Diary" (Watch on YouTube)
    
    To embed a YouTube video, it's best to go to the "Share" tab and then "Embed." Copy and paste the code from there instead of typing it yourself because it's easy to mess up. On any other site, look for some kind of "Embed" code. Videos can also have embedding turned off, so if this is the case, just link to the video. The code will break if you try to type it in on your own.

That's about it! Please leave a comment if there's anything major I missed or screwed up. Also, yes, I know about the font size being wrong and the alt text not showing up on the second image, but I coded it correctly. There's not much I can do about that.