🈪 Formatting your Steemit posts using HTML markup
This guide is meant to be a quick reference on how to properly format your posts on Steemit using HTML markup.
The reason I prefer to use HTML markup directly is because this gives a Preview window below the text editor. Preview mode is updated in realtime so you can view any changes and how the page will display immediately.
The other reason is when you are using the HTML markup tag <code> switching between Editor- and Markdown-mode adds a extra newline between every code line inside the code markup every time you switch view, which has to be manually deleted.
Editing text in Editor-mode is much like using a text editor such as Word, with all the options on the menu line right below the titlefield.
Selecting Markdown mode
When you have pressed Submit a Story in the top right corner to start a new blog post, you have to press the text that says Editor just below the titlefield on the right side before entering any text in the main editor window.
Just copy all the text in the editor window (keyboard shortcut ctrl + a, then ctrl + x) if you have started a post and want to switch modes, then paste (ctrl + v) the text back in when you have switched.
Markdown mode automatically adds the standard HTML tags, like <!DOCTYPE html>, <html> and <body> for you, so you only have to focus on formatting the text you enter yourself.
You can add the page title and still change modes though.
Quick reference to markup
To add a heading to your post you use the code tag <h1> up to <h6>:
Headline with h1
To write this up with HTML markup you write:
<h1> Headline with h1 </h1>
The same goes for all headings shown below; begin with the starting tag and end with the closing tag.
Headline with h2
Headline with h3
Headline with h4
Headline with h5
Headline with h6
Adding images
To add an image to your post you can simply paste the direct link into your post.
direct-link-to-example-image.jpg
You can position your images in the center with the following syntax:
<center> direct-link-to-example-image.jpg </center>
Or you can position your image to the left / right of the surronding text with the following syntax:
<div class="pull-left"> <img src="direct-link-to-example-image.jpg" /> </div>
Substitute left with right to position the image the on other side, and replace the direct-link-to-example-image.jpg with a direct link to the image you want to use. Also notice the code tag for images, which could be used in all the previous examples, and its /> closing tag in <img src="" />.
Formatting text
Always use the paragraph <p></p> tags to wrap any other tag inside, even the headings <p><h2> Heading example </h2></p> or adding a new line <p><br></p>.
You add a new line with the tag <br>, by the way. There is no need to use closing tags on it, so don't worry about </br>
<del> word(s) to be striken </del>.
You get italic text with <i> italic-text </i>, and bold text with <b> bold-text </b>.
You can also add a quote like:
Upvote and follow!--- @Jonrhythmic
Use the code tags <blockquote> your-quote-here </blockquote>.
To add a horizontal line, use <hr>:
Code markdown
To write up a code sample in the middle of a sentence like this you place the text inside the <code>-tag and end with closing tag </code>.
If you want to write a whole segment of code like:
Example computer code here
You need to wrap the code inside the following tags:
<pre><code> Example computer code here
</code></pre>
Notice that the markup is <pre> then <code>, but closes </code> then </pre>!
Lists
Steemit offers two types of lists; ordered lists:
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
- First item
- Second item
and; unordered lists:
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
- First item
- Second item
Hyperlinks
To generate a hyperlink you could either paste the link directly into your post like:
http://example-link.com/
Or by adding the correct markup, including a hyperlink text:
<a href="http://example-link.com/"> Link name </a>
Which looks like this: Link name
You can also use images as hyperlink by with the following syntax:
<a href="hyperlink destination"><img src="address to img to use as link"/></a>
Which gives hyperlinks like this one:
Try linking to your HD images with this markup using preview thumbnail images on Steemit with 800x480 resolution.
Tables
The proper way to generate a table is by using the standard HTML markup. Begin the table content with <table> and end it with </table>. Each table row needs to be placed inside a <tr> and </tr> and any field inside it has to be put inside a table heading:
<th> Variable 1 </th><th> Variable 2 </th>
Subsequent lines should be placed in table data:
<td> Value 1 </td><td> Value 2 </td>.
The markup should look like this:
<table>
<tr>
<th>Variable 1</th><th>Variable 2</th>
</tr>
<tr>
<td>Value 1</td><td>Value 2</td>
</tr>
</table>
And should display like this:
Variable 1 | Variable 2 |
|---|---|
| Value 1 | Value 2 |
Note: I used text aligning inside the table heading to get the text to align to the left:
<table><tr><th> <div class="pull-left"> Variable 1 </div> </th><th> <div class="pull-left"> Variable 2 </div> </th></tr></table>
Adding emojis
One final thing; it's possible to add emojis to your post. 😋
Take a look at master list 1 & 2 in the links below:
- https://steemit.com/emojis/@blueorgy/steemit-emojis-master-list
- https://steemit.com/emojis/@blueorgy/steemit-emojis-master-list-2
Important lessons
Leaving a tag that requires a closing tag unclosed normally causes the rest of the document to display incorrectly. If your post looks weird in the preview window just look through all tag markups for any unclosed tags.
HTML doesn't display some special chars, like < (short for less than; written & lt ; without spacing), > (short for greater than; written & gt ;), # (written & # 35 ;) or even (space; written & nbsp ;) properly. In fact the parser would probably just skip past all the text from where it encounters a special character until it encounter another ending tag, and not display any of the text inbetween.
For a full list of special characters, and the markup code to use, take a look at the following list: http://www.ascii.cl/htmlcodes.htm
That is all you need to know. Hope this helps and steem on!
Don't forget to follow me @jonrhythmic
I was just wondering if it was possible to use HTML to create a template post with all of my external social media links. Your example code is great for new users who might not have any experience with HTML.
Thank you
thank you, I'm collecting some of these tips to help improve my posts, I will review it in more detail soon. new follower here, p.s. I found you through mention in @curie / peace
Hi, hope this guide is useful to you!
Didn't know I made any lists, so thank you for the tip-off.
Congratulations @jonrhythmic! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here
If you no longer want to receive notifications, reply to this comment with the word
STOPHi @jonrhythmic, I see you have mentioned me.
This is automatic bot response so that I may respond to your mention later.
Learn more about this bot...
Good bro.i am following you.i am a new member on steemit. So please follow and upvote me. @blueorgy66
This post was resteemed by @resteembot!
Good Luck!
Learn more about the @resteembot project in the introduction post.
Thank you so much, I bookmarked this page :))))
That's great! Hope it's helpful!
great tutorial 👍
Very complete and interesting 🔝
Up voted 🔝
Thank you!
Good bro.i am following you.i am a new member on steemit. So please follow and upvote me. @jonrhythmic51
Is there anyway to place a music bed on a post? have a player play a sample or something???
Hi, I know you can embed Soundcloud tracks, take a look at this guide:
https://steemit.com/music/@eoincurran/how-to-simply-embed-soundcloud-tracks-in-your-posts-in-seconds
Other than that there is embedding Youtube-links into your posts. Hope this helps!
Hi there.i don't know how it is come but i can't turn the markdown mode off.
pls help