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:

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

Sort Order:

Trending

[-]

beavishoek (63) · 7 years ago

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

$0.03

3 votes

jonrhythmic (52) · 7 years ago

I haven't researched on this subject, but I think google could give some answers. Thank you for commenting!

$0.00

1 vote

clumsysilverdad (64) · 7 years ago

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

2 votes

Hi, hope this guide is useful to you!
Didn't know I made any lists, so thank you for the tip-off.

steemitboard (66) · 7 years ago

Congratulations @jonrhythmic! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of posts published
Award for the number of upvotes received

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 STOP

By upvoting this notification, you can help all Steemit users. Learn how here!

blueorgy (67) · 7 years ago

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

resteembot (48) · 7 years ago

This post was resteemed by @resteembot!
Good Luck!

Learn more about the @resteembot project in the introduction post.

discobear (37) · 7 years ago

Thank you so much, I bookmarked this page :))))

jonrhythmic (52) · 7 years ago (edited)

That's great! Hope it's helpful!

charline (56) · 7 years ago

great tutorial 👍
Very complete and interesting 🔝

Up voted 🔝

Thank you!

kaasiyaniidevi (25) · 7 years ago

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!

afl.cloud (59) · 4 years ago

Hi there.i don't know how it is come but i can't turn the markdown mode off.
pls help

🈪 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

Learn more about the @resteembot project in the introduction post.

Thank you so much, I bookmarked this page :))))

🈪 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

Learn more about the @resteembot project in the introduction post.

Thank you so much, I bookmarked this page :))))

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: