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>`. This is the syntax for a strike through line of a portion of the text:
`<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

🈪 Formatting your Steemit posts using HTML markup

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

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

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>.`

Code markdown

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

Tables

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:

Important lessons

🈪 Formatting your Steemit posts using HTML markup

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

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

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>.

Code markdown

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

Tables

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:

Important lessons

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.

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>.`

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

One final thing; it's possible to add emojis to your post. 😋

Take a look at master list 1 & 2 in the links below: