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