Every day I'm scrolling through the "new" tab, I stumble upon some awesome content, but I struggle to get through reading it because the text is in blocks, the charts they tried to create are misaligned, or the pictures they posted hurt the flow of the post.

So Here I am, Trying to Help my Fellow Steemians Improve the Portrayal of their Content on Steemit!

I will walk you through the various methods that I employ in my posts. Granted, I don't always use them to their fullest potential, nor do I claim to make the best posts, but the functions that I use are bound to help improve your posts!

I would be remiss if I didn't start off that the Built-In Steemit Text Editor for posting uses "MarkDown" language, and also accepts most HTML coding. Now, let's get started..

1. Using Headings to Guide your Story

As you're writing your post, think about what your main points are of your post.

Does it make sense to give the reader a break between some large paragraphs and give them a "One-Liner" describing what you're about to discuss next?

If you answered Yes, consider using the <h1> or # tags. The <h1>, simply, stands for Header 1 and will provide you with Large Bold Text. <h1> correlates to a single #, <h2> is the same as ##, <h3> is the same as ###, and so on. There are as many as six header choices, each of which will add an extra line of spacing below the Heading (except if you use the hashtag version):

<h1>One</h1>
# One

One

<h2>Two</h2>
## Two

Two

<h3>Three</h3>
### Three

Three

<h4>Four</h4>
#### Four

Four

<h5>Five</h5>
##### Five

Five

<h6>Six</h6>
###### Six

Six

Oftentimes I find Heading 1 to be too IN-YOUR-FACE when I'm writing a post, so I use the h2 and h3 tags more frequently.

2. Adding Natural Breaks or Horizontal Lines

I don't want you to split a single thought into multiple paragraphs. I want you to find a place in your post where you can give your reader a break from reading large chunks of text.

If you're reading a post and it seems to be a single block of text, or several large blocks of text, the reader's eyes tend to go fuzzy and they stop reading.
Is it easier to read the first two chunks of text above, or the following text below:

When you first read this part, you may have thought "What in the Heck is a Natural Break!?". Well, what I mean by a natural break, is simply where you add new lines between every few sentences of text, in a naturally flowing manner. I don't want you to split a single thought into multiple paragraphs. I want you to find a place in your post where you can give your reader a break from reading large chunks of text.

......................

Another option you have for breaking up text is a horizontal line. You may have noticed that I am using them to split each of my Content Topics.

There are a few methods to create a horizontal line:
--- (3 hyphens)

*** (3 asterisks)

___ (3 underscores)

<hr> (HTML code: Horizontal Rule)

There are various circumstances where you may need to get creative in your coding so the proper functions are displayed. For example, in order for my 3 hyphens above to post properly, I needed to either insert a line break (<br>) in my code before discussing them, or add a space character following the : at the end of my previous sentence.
Another character that will sometimes give you trouble when you're coding is the !(exclamation point).

3. Formatting and Aligning your Text and/or Pictures

Formatting Text

This part is probably the most simple, but also the most important. Emphasizing your text is ~~fine~~ fun!

<b>BOLD</b>
BOLD
**BOLD**
BOLD

<i>ITALIC</i>
ITALIC
*ITALIC*
ITALIC
<strike>STRIKETHROUGH</strike>
~~STRIKETHROUGH~~
~~STRIKETHROUGH~~
~~STRIKETHROUGH~~
<b><i>BOLD and ITALIC</i></b>
BOLD and ITALIC
***BOLD and ITALIC***
BOLD and ITALIC

All of your text and pictures will automatically be "Left Aligned", so using "Center" is another great method for Splitting Chunks of Text. Especailly if you mix it with BOLD and/or ITALICS:

<center><b>Center Aligned</b></center>

Center Aligned and Italic

Formatting Images

I found a useful trick on Steemit that you can use once you've uploaded an image to the Steemit blockchain. For example, I will load an image from a free-use site with the following source.

Original Image Code:

![](https://steemitimages.com/DQmTfe8mkJHZWPGL83jsxgzhVQkPYjMiP2HQhAvPeSYdCzt/image.png)

This image has an original image size of 465 × 354 pixels. Resulting in a ratio of ~1.3136:1
(calculated by dividing the first number 465 by the second number 354)
In many cases, your images will have larger original sizes (HD images, 4k images, etc.), and possibly varying ratios of 1:1, 4:3, 3:2, etc.
Anyway, the point is this: How can we make this image look better?

One way is to center the image, and another is to change the image size. I will show you both in a single step and provide an explanation.

<center>![](https://img1.steemit.com/263x200/https://steemitimages.com/DQmTfe8mkJHZWPGL83jsxgzhVQkPYjMiP2HQhAvPeSYdCzt/image.png)</center>

The way you can make the picture above work is by using the following tricks.

Insert the url https://img1.steemit.com/300x300/ in front of your image url, where 300x300 in this case was actually 263x200 for the image above. The reason I chose that size is because I wanted my image to be 200 pixels tall, and I multipled 200 by 1.3136 (the ratio we calculated earlier) to get 262.72 and I rounded to the nearest pixel of 263.
Center the image using the code I noted above <center>

I don't suggest "blowing up", or making your images larger than their original pixel sizes because you will likely "pixelate" the image, which makes it appear blurry or "blocky".

As you get more advanced, you can also align your image with text, but since I'm still a bit of a rookie in that department, I will share that insight at a later date.

4. Creating a List and/or Using Bullets

Numbered Lists and Bullet Lists have very simple code to generate.

To build a Bullet List, you simply need to use - (a hyphen), * (an asterisk), or + (an addition sign).

- Bullet Item #1
- Bullet Item #2
- Bullet Item #3

Bullet Item #1
Bullet Item #2
Bullet Item #3

* Bullet Item #1
* Bullet Item #2
* Bullet Item #3

Bullet Item #1
Bullet Item #2
Bullet Item #3

+ Bullet Item #1
+ Bullet Item #2
+ Bullet Item #3

Bullet Item #1
Bullet Item #2
Bullet Item #3

Bullets can be used as a list, similar to above, or it can be used similar to a Heading - in order to break up different topics or ideas.

For a Numbered List, as long as you don't start a new list or interrupt the list part-way through, you can use whatever numbers you want.

1. Numbered List #1
1. Numbered List #2
1. Numbered List #3

Numbered List #1
Numbered List #2
Numbered List #3

1. Numbered List #1
5. Numbered List #2
9. Numbered List #3

Numbered List #1
Numbered List #2
Numbered List #3

<ol>
<li>Numbered List #1
<li>Numbered List #2
<li>Numbered List #3
</ol>

Numbered List #1
Numbered List #2
Numbered List #3

Unfortunately, you're unable to use more advanced HTML coding to allow your numbered lists to start at different numbers, or to use Roman Numerals or the Letters of the Alphabet, but a Numbered List is very helpful when you're listing out a process where Order is Important.

5. Using Tables

Tables are a more advanced feature, and work best when you have "structured data" that you want to express in an organized format. The only way that I've been able to get a table to work is by using legacy HTML code.

Here's what works for me (extracted from another one of my posts):

<table>
<tr>
  <th>TXC_author</th>
  <th>Unique # Repeated Comments
  <th>Total Repeated Comments Posted</th>
  <th>Total Posts and Comments</th>
  <th># Days with Repeated Comments
  <th># Days Since Account Created
</tr>
<tr>
  <td>zcgolf16</td>
  <td>3</td>
  <td>299</td>
  <td>496</td>
  <td>1</td>
  <td>77</td>
</tr>
<tr>
  <td>toscani40</td>
  <td>1</td>
  <td>249</td>
  <td>646</td>
  <td>1</td>
  <td>48</td>
</tr>
</table>

TXC_author	Unique # Repeated Comments	Total Repeated Comments Posted	Total Posts and Comments	# Days with Repeated Comments	# Days Since Account Created
zcgolf16	3	299	496	1	77
toscani40	1	249	646	1	48

To give you a quick overview of what each tag means, <table> is to tell the Editor that you're creating a table, <tr> indicates that the following information will create a Table Row, <th> indicates the different Table Headings that you will provide, <td> indicates the different Table Data values that you will provide.

You will only have ONE set of TH items, and each of your TD values will be a value for each of the TH items. TD holds the records in your Table, and are placed in the same order as the TH items you listed previously.

If you Enjoyed this Post or Think other People might Benefit from this Information
Upvote for more posts
Comment about what you liked
Re-Steem for others' benefit

_____________________________________________________

Thanks for reading, I hope you have a great day! _____________________________________________________

My Crypto Updates:

If you want to read more, please take a look at some of my other posts:

All of my Posts!

Evolved08gsr's Steemit Navigation Tips # 002 - Better Portraying your Content

So Here I am, Trying to Help my Fellow Steemians Improve the Portrayal of their Content on Steemit!

Contents:

1. Using Headings to Guide your Story

One

One

Two

Two

Three

Three

Four

Four

Five

Five

Six

Six

2. Adding Natural Breaks or Horizontal Lines

3. Formatting and Aligning your Text and/or Pictures

Formatting Text

Formatting Images

4. Creating a List and/or Using Bullets

5. Using Tables