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

The beginning

          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.

Text Codes

Markdown Code	Results	HTML Code	Results
**bold**	bold	<b>Bold</b>	Bold
*Italic*	Italic	<i>Italic</i>	Italic
***bold and Italic***	bold and Italic	<b><i>bold and Italic</i></b>	bold and Italic
~~Strikethrough~~	Strikethrough	<strike>Strikethrough</strike>	Strikethrough
Subscript	not found yet	<sub>Subscript</sub>	Subscript
Superscript	not found yet	<sup>Superscript</sup>	Superscript
\*ignore code\*	*ignore code*1	<i>ignore code</i>2	<i>ignore code</i>

^{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.
2 Difficult to show in the table HTML uses the ` on either side of the code so as to render it inoperable.}

          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.
           I don't think that is either HTML of Markdown. I believe it is an ascii code for a blank space when using five (         )of them strung together you get a very nice paragraph indent.

---

Headers

code

Markdown	HTML
# Header 1 #	<h1>Header 1</h1>
## Header 2 ##	<h2>Header 2</h2>
### Header 3 ###	<h3>Header 3</h3>
#### Header 4 ####	<h4>Header 4</h4>
##### Header 5 ######	<h5>Header 5</h5>
###### Header 6 ######	<h6>Header 6</h6>

Results

Markdown results	HTML results
Header 1	Header 1
Header 2	Header 2
Header 3	Header 3
Header 4	Header 4
Header 5	Header 5
Header 6	Header 6

---

Using pictures and columns

          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.

^{Source: My smartphone camera. Like I, and a lot of people say, provide a source for your images even if it is yours.}
          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:
https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg.
Now by adding this to the beginning of the image link "https://steemitimages.com/300x200/". you would get this sized image:

https://steemitimages.com/300x200/https://steemitimages.com/DQmQxErq49KxBzmnQfvy7knSx7cE3TBh2RoT77oQeTfAZSb/hwypulloutjustpastTernlake.jpg
          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.

Column Code

<div class=pull-left>
here is where you would put your picture link,(you can also use it as the first column of text with no pictures)
</div>
&
<div class=pull-right>
and here is where you would put another picture link,(you can also use it as the second column of text with no pictures)
</div>
So let's see how that all works out.

---

          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.

---

          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.

          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 @mudcat36 and @davemccoy in their quest to help the new users via their #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 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. So if we start with <div class=pull-left>followed by a picture link, then </div>then a whole lot of text then another <div class=pull-right>new picture link</dev> you can get a nice word flow.

---

          Okay, we have covered what can be done to make your words look a little bit different, we learned Bold, Italic, and 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.

---

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:

Your first column title	Your second column title
Item 1	Item 2

| Your first column title | Your second column title |Start with a pipe "|", then a space, your title, a space and then a Pipe | These boxes are your title boxes

-------- | -------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 | a pipe. thats the two horizontal lines above the backward slant.

Item 1 | Item 2 Then you type what you want into each column. with a pipe to separate the items.

More than four columns does not work very well when using text, but when numbers are small you can have quite a few columns.

1	2	3	4	5	6	7
Item 1	Item 2	Item 3	Item 4	Item 5	Item 6	Item 7

| :----- | ------ | ------: | Difficult to tell in the table above but with the addition of a Colon : 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.

That is pretty much Tables.

List, bullets, numbers, alphabet

HTML Unordered List

• Coffee
• Tea
• Black tea
• Green tea
• mint
• lemon
• Milk

HTML Ordered List

1. Coffee
2. Tea
1. Black tea
2. Green tea
1. mint
2. lemon
3. Milk

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:
HTML Unordered List
<ul >
<li>Coffee</li>
<li>Tea</li>
<ul>
<li>Black tea</li>
<li>Green tea</li>
<ul>
<li>mint</li>
<li>lemon</li>
</ul>
</ul>
</li>
<li>Milk</li>
</ul>
HTML Ordered List
<ol >
<li>Coffee</li>
<li>Tea</li>
<ol>
<li>Black tea</li>
<li>Green tea</li>
<ol>
<li>mint</li>
<li>lemon</li>
</ol>
</ol>
</li>
<li>Milk</li>
</ol>

Markdown ordered list, this is easier

1. Coffee
2. Tea
   A. Black tea
   B. Green tea
   1. mint
   2. lemon
3. Milk
   And its code:
   1. Coffee
2. Tea
A. Black tea
B. Green tea
1. mint
2. lemon
3. Milk

Markdown unordered list

• Coffee
• Tea
  • Black tea
  • Green tea
    • mint
    • lemon
• Milk

- Coffee
- Tea
- Black tea
- Green tea
- mint
- lemon
- Milk

          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"
          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.
1. count
      2. count

---

          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.

Links

          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 bashadow's primary steemit page.

HTML way
<a href="https://steemit.com/@bashadow">bashadow's primary steemit page</a>.
bashadow's primary steemit page.
Markdown way
[bashadow's primary steemit page](https://steemit.com/@bashadow)
bashadow's primary steemit page

---

          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 "Why, won't it work" , as I remember that I did not include anything about using <br> or <p>> in the long post, so here it is quickly. <br> is a line break, <p> is a paragraph break, it will add a big blank line, (about one and a half), <br> only a carriage/return line.
          Speaking of "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. WHY you might ask, because I did not have a blank line after my <hr>. One hit of the return key in the right spot and all resolved.