Everthing I Think I know about HTML and Markdown for Steemit Post Formatting, Very long read.

I might have forgotten a few things, I might have a few things wrong, I might have just complicated things for you.

<h2>The beginning<p> <p dir="auto">          There really is very little difference between HTML and Markdown, they are both ways to style text on the web. With Markdown you control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like # or *. With HTML the code is placed between angle brackets< >. You can mix and match some HTML and some Markdown, but you can get strange results sometimes by doing that, but then again, you can get strange results using just HTML or Markdown. So you always want to look at the preview box see how your post is looking before hitting the post button. <p dir="auto"><h4>Text Codes<p> <div class="table-responsive"><table> <thead> <tr><th>Markdown Code<th>Results<th>HTML Code<th>Results <tbody> <tr><td><code>**bold**<td><strong>bold<td><code><b>Bold</b><td><b>Bold <tr><td><code>*Italic*<td><em>Italic<td><code><i>Italic</i><td><i>Italic <tr><td><code>***bold and Italic***<td><strong><em>bold and Italic<td><code><b><i>bold and Italic</i></b><td><b><i>bold and Italic <tr><td><code>~~Strikethrough~~<td><del>Strikethrough<td><code><strike>Strikethrough</strike><td><strike>Strikethrough <tr><td><code>Subscript<td>not found yet<td><code>_Subscript<td><sub>Subscript <tr><td><code>Superscript<td>not found yet<td><code>^Superscript<td><sup>Superscript <tr><td><code>\*ignore code\*<td>*ignore code*<sup>1<td><code><i>ignore code<code></i><sup>2<td><code><i>ignore code<code></i> <p dir="auto"><sup>1 Difficult to show in the table how Markdown uses the \ on either side of the code so as to render it inoperable. Sometimes you want to use an asterisk or a pound sign. <br /> <sup>2 Difficult to show in the table HTML uses the <code> ` on either side of the code so as to render it inoperable. <p dir="auto">          I have not found any code for underlining text in either HTML or Markdown that works. Does not mean it is not out there somewhere or will be added in the future, just that I have not found it yet. I have not found the Markdown method of using sub and sup yet, like i mentioned above does not mean it does not exist.<br />           <code>&nbsp;I don't think that is either HTML of Markdown. I believe it is an ascii code for a blank space when using five (<code>&nbsp; <code>&nbsp; <code>&nbsp; <code>&nbsp; <code>&nbsp;)of them strung together you get a very nice paragraph indent. <hr /> <h2>Headers <h4>code <div class="table-responsive"><table> <thead> <tr><th>Markdown<th>HTML <tbody> <tr><td><code># Header 1 #<td><code><h1>Header 1</h1> <tr><td><code>## Header 2 ##<td><code><h2>Header 2</h2> <tr><td><code>### Header 3 ###<td><code><h3>Header 3</h3> <tr><td><code>#### Header 4 ####<td><code><h4>Header 4</h4> <tr><td><code>##### Header 5 ######<td><code><h5>Header 5</h5> <tr><td><code>###### Header 6 ######<td><code><h6>Header 6</h6> <p dir="auto"><h4>Results<p> <div class="table-responsive"><table> <thead> <tr><th>Markdown results<th>HTML results <tbody> <tr><td><h1>Header 1<td><h1>Header 1 <tr><td><h2>Header 2<td><h2>Header 2 <tr><td><h3>Header 3<td><h3>Header 3 <tr><td><h4>Header 4<td><h4>Header 4 <tr><td><h5>Header 5<td><h5>Header 5 <tr><td><h6>Header 6<td><h6>Header 6 <hr /> <p dir="auto"><h4>Using pictures and columns<br />           To add a picture to your post simple grab it off of your computer and drag it on to your post. (drag and drop method). If you already have an image you want to use on line, simply copy the image location and drop it into your post. (copy/paste method). Here is my own personal favorite image of mine, (yes I took the picture) that I like to use.<br /><br /> <sup>Source: My smartphone camera. Like I, and a lot of people say, provide a source for your images even if it is yours.<br />           Pretty good sized picture, sometime you want to make it smaller without having to have several different sized pictures, that is pretty easy to do. Here is the original link to the picture:<br /> <code>https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg.<br /> Now by adding this to the beginning of the image link <code>"https://steemitimages.com/300x200/". you would get this sized image:<br /><br /> <code>https://steemitimages.com/300x200/https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg<br />           You can change that 300X200 to pretty much what you want. Now to learn to use that resize trick and picture alignment and wrapping text.<span> <img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg 2x" /><span> <img src="https://images.hive.blog/768x0/https://steemitimages.com/300x200/https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg" srcset="https://images.hive.blog/768x0/https://steemitimages.com/300x200/https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg 1x, https://images.hive.blog/1536x0/https://steemitimages.com/300x200/https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg 2x" /><p> <p dir="auto"><h4>Column Code<p> <p dir="auto"><code><div class=pull-left><br /> <code>here is where you would put your picture link,(you can also use it as the first column of text with no pictures)<br /> <code></div><br /> &<br /> <code><div class=pull-right><br /> <code>and here is where you would put another picture link,(you can also use it as the second column of text with no pictures)<br /> <code></div><br /> So let's see how that all works out. <div class="pull-left"><p dir="auto">          If you did not figure it out, I typed the right hand column text prior to typing this text over here. I don't know why, I just did, it does not matter what column you type in first By using a carriage return, (clicking the enter key) after the picture the text will start directly below the image.<br /><span> <img src="https://images.hive.blog/768x0/https://steemitimages.com/150x100/https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg" srcset="https://images.hive.blog/768x0/https://steemitimages.com/150x100/https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg 1x, https://images.hive.blog/1536x0/https://steemitimages.com/150x100/https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg 2x" /> I made the picture a little bit smaller so I could show what happens when you just start typing with a space right after your image url. <span> <img src="https://images.hive.blog/768x0/https://steemitimages.com/300x200/https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg" srcset="https://images.hive.blog/768x0/https://steemitimages.com/300x200/https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg 1x, https://images.hive.blog/1536x0/https://steemitimages.com/300x200/https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg 2x" /> <div class="pull-right"><p dir="auto"><br /> As you can see the picture sits nice below the text.<span><img src="https://images.hive.blog/768x0/https://steemitimages.com/150x100/https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg" srcset="https://images.hive.blog/768x0/https://steemitimages.com/150x100/https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg 1x, https://images.hive.blog/1536x0/https://steemitimages.com/150x100/https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg 2x" /> <span>           And there is our picture all dropped in, and as we type we will slowly soon depending on how fast you type have a lot of words flowing around the picture. Here I am typing in the second column to show you how things look. I could have typed this all out in the first column and you would see a different layout to your text. As I keep typing in the second column under the `< div class=pull-right >` code my text will continue down the right column. <img src="https://images.hive.blog/768x0/https://steemitimages.com/250x175/https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg" srcset="https://images.hive.blog/768x0/https://steemitimages.com/250x175/https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg 1x, https://images.hive.blog/1536x0/https://steemitimages.com/250x175/https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg 2x" /> That picture was inserted right at the end of the typing above, not a very clean look at all. Smaller picture being inserted with a blank line after the text. <hr /> <p dir="auto">          Not a very pretty formatting job, but you can do a lot to clean it up by resizing pictures and deciding where to start the typing, That is a two column formatting, You do not need to use the <div=class> code just for two columns. <hr /> <p dir="auto">          Let's start with some typing before inserting a picture, I will use a different picture so you don't get to bored seeing the same image, here is a picture I entered in one of the photo contest. Now we insert our < div class=pull-left > code. Then we add our picture.<div class="pull-left"><span> <img src="https://images.hive.blog/768x0/https://steemitimages.com/300x200/https://steemitimages.com/DQmRHdmbMNP5KZexz4v2hHqWTSuXrr9Ut8zBRoNjc46ZPJW/BWcontestdaveks.jpg" srcset="https://images.hive.blog/768x0/https://steemitimages.com/300x200/https://steemitimages.com/DQmRHdmbMNP5KZexz4v2hHqWTSuXrr9Ut8zBRoNjc46ZPJW/BWcontestdaveks.jpg 1x, https://images.hive.blog/1536x0/https://steemitimages.com/300x200/https://steemitimages.com/DQmRHdmbMNP5KZexz4v2hHqWTSuXrr9Ut8zBRoNjc46ZPJW/BWcontestdaveks.jpg 2x" /><div class="pull-right"><span><img src="https://images.hive.blog/768x0/https://steemitimages.com/400x250/https://steemitimages.com/DQmRHdmbMNP5KZexz4v2hHqWTSuXrr9Ut8zBRoNjc46ZPJW/BWcontestdaveks.jpg" srcset="https://images.hive.blog/768x0/https://steemitimages.com/400x250/https://steemitimages.com/DQmRHdmbMNP5KZexz4v2hHqWTSuXrr9Ut8zBRoNjc46ZPJW/BWcontestdaveks.jpg 1x, https://images.hive.blog/1536x0/https://steemitimages.com/400x250/https://steemitimages.com/DQmRHdmbMNP5KZexz4v2hHqWTSuXrr9Ut8zBRoNjc46ZPJW/BWcontestdaveks.jpg 2x" /> I wonder does that look better. I have not scrolled down to the bottom to take a look yet, needed to type some words to be able to better judge the use of < div class=pull-right > code. Should be almost enough typing, so off to the scroll bar. Actually when I went to see the results it looked like like a mess. So I back tracked in my HTML code here and added the < /div > code ending after the picture link and it looks one hundred percent better now. As you can see if you start with a picture first, you would not have the awkward Line spacing above the image and the text would flow more nicely. <code>So if we start with <div class=pull-left>followed by a picture link, then </div>then a whole lot of text then <code>another <div class=pull-right>new picture link</dev> you can get a nice word flow.<span>          This was a sunset shot and turned to black and white to enter a black and white reflection photo contest. So for the purpose of demonstration I need to keep typing so I will take this opportunity to invite you all to assist <a href="/@mudcat36">@mudcat36 and <a href="/@davemccoy">@davemccoy in their quest to help the new users via their <a href="/trending/newbieresteemday"> #newbieresteemday project. Of which this post is a part of. It is all about giving a hand up, not a hand out to the new users. Okay looks like that made it past the first picture now we want another picture but one that sits to the right. To put a slightly larger picture on the right hand side of the page would that work? Lets try <p> <hr />           Okay, we have covered what can be done to make your words look a little bit different, we learned <b>Bold, <i>Italic, and <b><i>Bolded italic, plus a couple other things you can do, with either Markdown, or HTML. We learned about headers, and subscript, and superscript, and indenting a paragraph. We learned that by my showing a side by side comparison in tables. I guess I should show how to do a table before we leave. <hr /> <h4>Tables Tables are the only thing I find easier with the Markdown language so that is all I am going to cover here. To start a table: <div class="table-responsive"><table> <thead> <tr><th>Your first column title<th>Your second column title <tbody> <tr><td>Item 1<td>Item 2 <p dir="auto"><code>| Your first column title | Your second column title |Start with a pipe "<code>|", then a space, your title, a space and then a Pipe <code>| These boxes are your title boxes <p dir="auto"><code>-------- | -------You need at least 3 - (dashes) to define the table. As long as you have 3 it does not matter. Add a blank space after the last dash then insert <code>| a pipe. thats the two horizontal lines above the backward slant. <p dir="auto"><code>Item 1 | Item 2 Then you type what you want into each column. with a pipe to separate the items. <p dir="auto">More than four columns does not work very well when using text, but when numbers are small you can have quite a few columns. <div class="table-responsive"><table> <thead> <tr><th style="text-align:left">1<th style="text-align:left">2<th style="text-align:left">3<th>4<th style="text-align:right">5<th style="text-align:right">6<th style="text-align:right">7 <tbody> <tr><td style="text-align:left">Item 1<td style="text-align:left">Item 2<td style="text-align:left">Item 3<td>Item 4<td style="text-align:right">Item 5<td style="text-align:right">Item 6<td style="text-align:right">Item 7 <p dir="auto"><code>| :----- | ------ | ------: | Difficult to tell in the table above but with the addition of a Colon <code>: at the beginning or the end of the dashed lines you can control how the text is aligned. :---- = left aligned, no colon=centered, and -----:=right aligned. <p dir="auto">That is pretty much Tables. <p dir="auto"><h4>List, bullets, numbers, alphabet<p> <p dir="auto"><b>HTML Unordered List <ul> <li>Coffee <li>Tea <ul> <li>Black tea <li>Green tea <ul> <li>mint <li>lemon <li>Milk <b>HTML Ordered List <ol> <li>Coffee <li>Tea <ol> <li>Black tea <li>Green tea <ol> <li>mint <li>lemon <li>Milk <p dir="auto">With the HTML Unordered or ordered list you are pretty much limited in nesting choices as you can see above. Here is the code sample:<br /> <b>HTML Unordered List<br /> <code><ul ><br /> <code><li>Coffee</li><br /> <code><li>Tea</li><br /> <code><ul><br /> <code><li>Black tea</li><br /> <code><li>Green tea</li><br /> <code><ul><br /> <code><li>mint</li><br /> <code><li>lemon</li> <br /> <code></ul><br /> <code></ul><br /> <code></li><br /> <code><li>Milk</li><br /> <code></ul><br /> <b>HTML Ordered List<br /> <code><ol ><br /> <code><li>Coffee</li><br /> <code><li>Tea</li><br /> <code><ol><br /> <code><li>Black tea</li><br /> <code><li>Green tea</li><br /> <code><ol><br /> <code><li>mint</li><br /> <code><li>lemon</li> <br /> <code></ol><br /> <code></ol><br /> <code></li><br /> <code><li>Milk</li><br /> <code></ol> <p dir="auto"><b>Markdown ordered list, this is easier <ol> <li>Coffee <li>Tea<br /> A. Black tea<br /> B. Green tea <ol> <li>mint <li>lemon <li>Milk<br /> And its code:<br /> <code>1. Coffee<br /> <code>2. Tea<br /> <code>A. Black tea<br /> <code>B. Green tea<br /> <code>1. mint<br /> <code>2. lemon <br /> <code>3. Milk <p dir="auto"><b>Markdown unordered list <ul> <li>Coffee <li>Tea <ul> <li>Black tea <li>Green tea <ul> <li>mint <li>lemon <li>Milk <p dir="auto"><code>- Coffee<br /> <code>- Tea<br /> <code>- Black tea<br /> <code>- Green tea<br /> <code>- mint<br /> <code>- lemon <br /> <code>- Milk <p dir="auto">          Okay showing the unordered list for markdown did not go well. It is pretty simple for a nested unordered list. You just need to check your preview box to ensure you have all the needed spaces lined up. To build your list start with a "dash" - then a space, then what your first item is "Coffee" then return to next line and dash space you Item "tea" For the first nested item "Black Tea" two spaces a dash a space then Item "black tea". For the third tier nest three spaces a dash a space then your item "mint"<br />           It is the sam for the number/alpha list sort of, but a bit simpler. To get the nesting done simply line your next nest using spaces to where the letter or the number falls directly under the previous list item.<br /> <code>1. count<br />       <code>2. count <hr /> <p dir="auto">          Well that took some time. I am positive that I have not covered everything HTML or Markdown wise that is available to make you post look well done. I wish this post was a bit more professional looking or at least a bit more eye pleasing, but some concepts just do not apply well in a pleasing format. Damn I was going to end it here, then I was looking/reviewing what I had and realized I did not cover links, so one more part. This has gotten really really long. <p dir="auto"><h4>Links<p> <p dir="auto"><a href="https://steemit.com/@bashadow" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">bashadow's primary steemit page.<span>          <a href="https://steemit.com/@bashadow" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://steemit.com/@bashadow Simple quick and easy way just paste the link in the post. Problem is, is they really do not look good. That dropped in link compared to a nice obscured link or obvious link like <p dir="auto"><b>HTML way<br /> <code><a href="https://steemit.com/@bashadow">bashadow's primary steemit page</a>.<br /> <a href="https://steemit.com/@bashadow" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">bashadow's primary steemit page.<br /> <b>Markdown way<br /> <code>[bashadow's primary steemit page](https://steemit.com/@bashadow)<br /> <a href="https://steemit.com/@bashadow" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">bashadow's primary steemit page <hr /> <p dir="auto">          And that my friends concludes this effort to make your life more miserable and steemit centrified, as you struggle to answer the inevitable question of <b>"Why, won't it work" , as I remember that I did not include anything about using <code><br> or <code><p>> in the long post, so here it is quickly. <code><br> is a line break, <code><p> is a paragraph break, it will add a big blank line, (about one and a half), <code><br> only a carriage/return line.<br />           Speaking of <b>"Why, won't it work", when I initially reviewed this last paragraph it was not working, none of my remarked out HTML codes were showing up. <b>WHY you might ask, because I did not have a blank line after my <code><hr>. One hit of the <code>return key in the right spot and all resolved.