<h4>
<p>This guide is meant to be a quick reference on how to properly format your posts on Steemit using HTML markup.</p>

<p>The reason I prefer to use HTML markup directly is because this gives a <b>Preview window</b> below the text editor. Preview mode is updated in realtime so you can view any changes and how the page will display immediately.</p>

https://il8.picdn.net/shutterstock/videos/4135444/thumb/1.jpg
<p><br></p>

<p>The other reason is when you are using the HTML markup tag &lt;code&gt; switching between <b>Editor-</b> and <b>Markdown-mode</b> adds a extra newline between <i>every</i> code line inside the code markup <i>every</i> time you switch view, which has to be manually deleted.</p>
</h4>

<h6>
<p>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.
</p>
</h6>

<p><h2>Selecting Markdown mode</h2></p>
<h6>
<p>When you have pressed <b>Submit a Story</b> in the top right corner to start a new blog post, you have to press the text that says <b>Editor</b> just below the titlefield on the right side <i>before</i> entering any text in the main editor window.</p>
<p>Just copy all the text in the editor window (keyboard shortcut <b>ctrl + a</b>, then <b>ctrl + x</b>) if you have started a post and want to switch modes, then paste (<b>ctrl + v</b>) the text back in when you have switched.</p>

<p>Markdown mode automatically adds the standard HTML tags, like <b>&lt;!DOCTYPE html&gt;</b>, <b>&lt;html&gt;</b> and <b>&lt;body&gt;</b> for you, so you only have to focus on formatting the text you enter yourself.</p> 

<p>You can add the page title and still change modes though.</p>
</h6>
<p><h2>Quick reference to markup</h2></p>
<h6>
<p>To add a <b>heading</b> to your post you use the code tag <b>&lt;h1&gt;</b> up to <b>&lt;h6&gt;:</b></p>
<p><h1>Headline with h1</h1></p>
<h6>
<p>To write this up with HTML markup you write: </p>
<pre><code>&lt;h1&gt; Headline with h1 &lt;/h1&gt;
</code></pre>
<p><br></p>
<p>The same goes for all headings shown below; begin with the starting tag and end with the closing tag.</p>
</h6>
<p><h2>Headline with h2</h2></p>
<p><h3>Headline with h3</h3></p>
<p><h4>Headline with h4</h4></p>
<p><h5>Headline with h5</h5></p>
<p><h6>Headline with h6</h6></p>

<p><h2>Adding images</h2></p>
<h6>
<p>To add an image to your post you can simply paste the direct link into your post.</p>
<pre><code>direct-link-to-example-image.jpg
</code></pre>
<p><br></p>

<p>You can position your images in the center with the following syntax: </p>
<pre><code>&lt;center&gt; direct-link-to-example-image.jpg &lt;/center&gt;
</code></pre>
<p><br></p>

<p>Or you can position your image to the left / right of the surronding text with the following syntax:</p>
<pre><code>&lt;div class="pull-left"&gt; &lt;img src="direct-link-to-example-image.jpg" /&gt; &lt;/div&gt;
</code></pre>
<p><br></p>

<p>Substitute <b>left</b> with <b>right</b> to position the image the on other side, and replace the <i>direct-link-to-example-image.jpg</i> 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 /&gt; closing tag in <code>&lt;img src="" /&gt;</code>. </p>
</h6>

<p><h2>Formatting text</h2></p>
<h4>
<p>Always use the paragraph <code>&lt;p&gt;&lt;/p&gt;</code> tags to wrap any other tag inside, even the headings <code>&lt;p&gt;&lt;h2&gt; Heading example &lt;/h2&gt;&lt;/p&gt;</code> or adding a new line <code>&lt;p&gt;&lt;br&gt;&lt;/p&gt;.</code></p>
</h4>

<h6>
<p>You add a new line with the tag <code>&lt;br&gt;</p></code>, by the way. There is no need to use closing tags on it, so don't worry about <code><del>&lt;/br&gt;</del></code>. This is the syntax for a strike through line of a portion of the text:<br> 
<code>&lt;del&gt; word(s) to be striken &lt;/del&gt;</code>.</p>

<p>You get <i>italic</i> text with <code>&lt;i&gt; italic-text &lt;/i&gt;</code>, and <b>bold</b> text with <code>&lt;b&gt; bold-text &lt;/b&gt;</code>.</p>

<p>You can also add a quote like: </p>
<blockquote>Upvote and follow!<br><center>--- @Jonrhythmic</center></blockquote>
<p>Use the code tags <code>&lt;blockquote&gt; your-quote-here &lt;/blockquote&gt;</code>.</p>

<p>To add a horizontal line, use <code>&lt;hr&gt;</code>:
<hr>
</h6>

<p><h2>Code markdown</h2></p>
<h6>
<p>To write up a code sample in the middle of a sentence like <code>this</code> you place the text inside the &lt;code&gt;-tag and end with closing tag &lt;/code&gt;.</p>
<p>If you want to write a whole segment of code like:</p>
<pre><code>Example computer code here
</code> </pre><br>

<p>You need to wrap the code inside the following tags:</p>
<p><pre><code>&lt;pre&gt;&lt;code&gt; Example computer code here<br>&lt;/code&gt;&lt;/pre&gt;
</code></pre></p>
<p>Notice that the markup is <b>&lt;pre&gt;</b> then <b>&lt;code&gt;</b>, but closes <b>&lt;/code&gt;</b> then <b>&lt;/pre&gt;!</b></p>
</h6>

<p><h2>Lists</h2></p>
<h6>
<p>Steemit offers two types of lists; <b>ordered lists:</b> </p>
<pre><code>&lt;ol&gt;
&nbsp;&nbsp;&lt;li&gt;First item&lt;/li&gt;
&nbsp;&nbsp;&lt;li&gt;Second item&lt;/li&gt;
&lt;/ol&gt;
</code></pre>
<p>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
</p>
<p>and;</h6> <b>unordered lists:</b> </p>
<pre><code>&lt;ul&gt;
&nbsp;&nbsp;&lt;li&gt;First item&lt;/li&gt;
&nbsp;&nbsp;&lt;li&gt;Second item&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<p>
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
</p>
</h6>

<p><h2>Hyperlinks</h2></p>
<h6>
<p>To generate a hyperlink you could either paste the link directly into your post like: </p>
<pre><code>http://example-link.com/
</code></pre>
<p><br></p>
<p>Or by adding the correct markup, including a hyperlink text: </p>
<pre><code>&lt;a href="http://example-link.com/"&gt; Link name &lt;/a&gt;
</code></pre>
<p><br></p>
<p>Which looks like this: <a href="https://steemit.com/steemit/@jonrhythmic/formatting-your-steemit-posts-using-html-markup-text-formatting-guide"> Link name </a></p>

<p>You can also use images as hyperlink by with the following syntax:</p>

<pre><code>&lt;a href="hyperlink destination"&gt;&lt;img src="address to img to use as link"/&gt;&lt;/a&gt;
</code></pre>
<p><br></p>

<p>Which gives hyperlinks like this one:</p>

<a href="https://steemit.com/@jonrhythmic"><img src="http://grennesstein.xyz/img/jonrhythmic_pico8.png"/></a>

<p>Try linking to your HD images with this markup using preview thumbnail images on Steemit with 800x480 resolution.</p>

</h6>

<p><h2>Tables</h2></p>
<h6>
<p>The proper way to generate a table is by using the standard HTML markup. Begin the table content with <b>&lt;table&gt;</b> and end it with <b>&lt;/table&gt;</b>. Each table row needs to be placed inside a <b>&lt;tr&gt;</b> and <b>&lt;/tr&gt;</b> and any field inside it has to be put inside a table heading:</p>
<p><b>&lt;th&gt;</b> Variable 1 <b>&lt;/th&gt;&lt;th&gt;</b> Variable 2 <b>&lt;/th&gt;</b></p><p>Subsequent lines should be placed in table data:</p>
<p><b>&lt;td&gt;</b> Value 1 <b>&lt;/td&gt;&lt;td&gt;</b> Value 2 <b>&lt;/td&gt;</b>.</p>
<p>The markup should  look like this: </p>
<pre><code>&lt;table&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Variable 1&lt;/th&gt;&lt;th&gt;Variable 2&lt;/th&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Value 1&lt;/td&gt;&lt;td&gt;Value 2&lt;/td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;
&lt;/table&gt;
</code></pre>
<p><br></p>

<p>And should display like this:</p>
<p><table><tr><th><div class="pull-left">Variable 1</div> </th><th><div class="pull-left">Variable 2</div></th></tr>
<tr><td>  Value 1</td><td>  Value 2</td> </tr></table> </p>
<p><b>Note:</b> I used text aligning inside the table heading to get the text to align to the left:</p> 
<code> &lt;table&gt;&lt;tr&gt;&lt;th&gt; <b>&lt;div class="pull-left"&gt;</b> Variable 1 <b>&lt;/div&gt;</b> &lt;/th&gt;&lt;th&gt;<b> &lt;div class="pull-left"&gt;</b> Variable 2 </div> <b> &lt;/div&gt;</b> &lt;/th&gt;&lt;/tr&gt;&lt;/table&gt;</code>
</h6>

<p><h2>Adding emojis</h2></p>
<h6>
<p>One final thing; it's possible to add <b>emojis</b> to your post. &#128523; </p>
<p>Take a look at master list 1 & 2 in the links below: </p>
</h6>
<ul>
<li>https://steemit.com/emojis/@blueorgy/steemit-emojis-master-list</li>
<li>https://steemit.com/emojis/@blueorgy/steemit-emojis-master-list-2</li>
</ul>

<p><h2>Important lessons </h2></p>
<h6>
<p>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.</p>

<p>HTML doesn't display some special chars, like <b>&lt;</b> (short for less than; written & lt ; without spacing), <b>&gt;</b> (short for greater than; written & gt ;), <b>&#35;</b> (written & # 35 ;)  or even <b>&nbsp;</b> (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.</p> 
<p>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</p>
</p>
</h6>

<hr>
<p>That is all you need to know. Hope this helps and steem on!<br><br>
Don't forget to follow me @jonrhythmic</p>