HTML & Markdown: Formatting In The Flow

in education •  6 days ago

html-markdown-formatting.png

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-formatting.jpg

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.

formatting.jpg

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
Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  trending

This is perfect sir! I'll be using it and thank you for always helping 💜💜 awesome!

·

If you need any further help feel free to message me

Oy, I just had a heck of a time with a post I just made. Everything looked great in the preview, and I mostly use html when I format, but I hadn't put the html tags at the start and end of my post.

When I published it a whole section ended up being pushed right, despite closing the command with an end tag. I think I know what @jonknight is talking about with his center tag not closing. Steemit doesn't like if you try to mix match html in a markdown post I guess, even though the preview will make you think all's well.

Going back to edit is a pain, then I have to add paragraph tags because adding the html tag blew all that away. Eh. Then fun in learning, right? For me, I just need to remember to go full html every time. There's just enough format options unavailable with markdown that makes me not switch over.

Ooooh man, then I go to edit the post to fix it after adding html tags... yeah, more mess. It shows markdown (I think) in the edit window, then if you click to view raw html, half of my html tags are missing, screwing up the formatting of my post.
MORAL OF THE STORY: When you publish, it better be all markdown or all html from the get go!

Everyone needs to mrmorize these codes. I fail hard. I do find that using the editor in wordpress is really good. But unfortunately it steem doesnt like all those html header code. :(

·

yeah. The HTML editor on the Steem sites is limited. Markdown is the best option.

Thanks @jrswab - i had wondered why closing a center tag did nothing. AND (and I can't believe I did not know this) I had no idea about the html editor in the steemit interface. For this alone I owe you a coffee.

·

i had wondered why closing a center tag did nothing.

What do you mean by this?

·
·

When I write my posts, sometimes I have a need for a < center > tag. The closing tag < /center > never closes the command - everything after the initial center remains centered. Happens with Busy and steemit, so I try now to only center content toward the end. Not helpful in poetry posts.

Now, I may be missing something here, but I've been using those tags forever it seems. If I am missing some crucial understanding I'd appreciate being corrected!

·
·
·

The center tags seem to work when in raw HTML mode here is a screenshot.
You can try the more modern version below but this does not work for me in SteemIt's raw HTML editor.

<span style="text-align:center">
Stuff
</span>

If you want to center more than just a section of text it gets a bit more hairy if the center tags don't work.

·
·
·
·

i'll play around with it again inside the html editor. i think that was my error - trying to html inside markdown - never occured to me to use the < html > tag lol. duh me!

·
·
·
·
·

Just make sure you are not in the default editor and you should be good to go!!

Thank you for such an informative article! I was wondering what you think of some of the online or downloadable apps like Typora or Byword. I believe they have markdown as well.

·

Thanks for reading and commenting! While I have not used those apps I do use a few others that allow for markdown. I use markdown most of the time that it is an option.

Congratulations @jrswab! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of posts published
Award for the total payout received

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

By upvoting this notification, you can help all Steemit users. Learn how here!

While there are guides for Markdown, HTML on Steemit is underdocumented. Therefore I tried to create a complete list of HTML formatting options on Steemit:

https://steemit.com/steemit/@snug/steemit-s-html-whitelist