HTML & Markdown: Formatting In The Flow

Most sites that give us the ability to post to the Steem blockchain have a built in editor. These are great tools with a lot of features. However, there is another way we can format our Steem content to give us more control. These are HTML and Markdown.

Using one of these formatting methods allows you to create your posts off of a Steem site while getting your headers, quotes, and images in order. This is the best way since the site we use to access Steem may be offline when we want to write. Or go down in the middle of our writing session!

Neither of the two methods are perfect and they both have their quirks. I do not use the built in editors that come with the Steem sites. I find that writing my post offline using either HTML or Markdown fits my flow the best.

As I write I stick in the headers and quotes or plop a horizontal line down. All this is done without the need for me to move my fingers off my lovely Dvorak configured keyboard. Not having to move my hands to the mouse to make a heading or put a box around a block of code keeps me in 'flow'.

We will get into flow and why it matters in a future Steem exclusive post but for now all you need to know is, its importance for a writer. Anything that can knock you out of flow will. This is the catalyst to why I formed certain habits around my writing.

Some include making sure my first draft is complete before noon, never creating a poem outside of my journal first, and taking my fingers off the home row as little as possible. That last one is the biggest when writing blog posts for me. There are so many distractions on a computer, most need me to use a mouse.

Let's get into a short explanation of each method and some of the syntax used to make the formatting. This is not meant to be comprehensive and I will have links to great sites for each at the end. If these seen like too much and you like using the toolbar editor than keep using that. Do what works for you and keeps you in the flow.

HTML

This stands for Hypertext Markup Language and is used to create webpages along with some other stuff. This allows us to make websites more appealing. Without HTML we would only get a wall of text.

Let's go through some of the tags you can use when in a raw HTML editing mode. To get there on Steemit you need to click the word 'editor' at the top right of the default editor. Then all you need to do is type and you will see the top right say 'raw HTML'. Click the words and you are ready-to-use HTML.

Headers

To make a header in HTML, you use the 'h' tags. <h1>text here</h1> will make a level one header that says "text here".

Do not use a level one header though since the title of your post uses it by default. If you have more than one of these, it may confuse search engines. The header tags range from one to six.

Images

<img src="image.jpg" />
This is one of a few tags that need not be closed off in the way we did the header tag above. You can put a link to an image inside the quotes and it will display. However, if that image is taken down then the image on your post will fail to load.

Always upload your images to Steem or host them some place you control.

Links

To create a link all you need to do is type `some text where 'url-here' is the link and 'some text' is what you want the link to display as.

Text Manipulation

<b>text here</b> to bold.
<i>text here</i> to italicize.
<s>text here</s> to strike through.

Centering

If you wish to center something it is best practice to add it to a parent element but since we are limited and do not have access to the CSS within our Steem post, we can add <center> stuff here </center>. To center the entire post, make sure all of your content is between those tags.

Markdown

Markdown's creator John Gruber made this markup language in 2004. He made this to make writing for the web easier when there is little need for the bells and whistles.

"[I made markdown] to write using an easy-to-read, easy-to-write plain text format, and optionally convert it to structurally valid XHTML (or HTML)”. - John Gruber

This is my perfected way to write blog posts. As I said above, this allows me to never take my fingers off the keyboard (as does HTML). The reason I use Markdown over HTML is that the syntax is much more simple. This helps keep me in 'flow' as I write.

Headers

To make a header in Markdown are denoted using #. One pound sign (hashtag...) will produce a level one size header. These go to six and each number makes the text smaller.

Images

![img](image.jpg)
The text inside the [] is what will be show if the image fails and is called the alternative text. The link to the image you wish to display than is placed inside the ().

Links

Links are very similar to images. In fact, they are the same you only remove the !. [some text](link to site) is what you will type whet adding a link.

Text Manipulation

**text here** to bold.
*text here* to italicize.
~~text here~~ to strike through.

Centering

There is no way to center text or images natively within Markdown. This is not a huge deal for me since I think keeping the reader left aligned when reading English is important.

Thanks For Reading!

There is so much more that can be done with HTML and Markdown that I have not covered in this post. If I did, you would be reading this all day.

For more information on HTML visit w3school.com and for Markdown you can use the cheat sheet on Github. Also ask questions in the comments. I made my first website when I was in the third grade so I've been around HTML a long them.

Other Posts In The Series:

How To Set Goals For Enormous Success
How To Be A More Fulfilled Blogger
Formatting: Tested Ways To Improve Your Content
Jealousy: How to tame the green-eyed monster.
Forgiveness: The Crucial Virtue

All images came from royalty and attribution free sources unless specified