The Problem At Hand

When I first joined Steemit a few weeks ago, I desperately wished Steemit gave me options to customize the style of my posts a bit more. Altering things like bullets, headings, and alignment are essential to make an organized and visually appealing article. After searching for articles about how to do these things, I came to realize that there really are not many informative ones out there! So in this post today, I'd like to teach you guys how to customize your posts using a handful of simple HTML tags. __________________________________________________________________________________________________________ ![greg-rakozy-129733.jpg](https://steemitimages.com/DQmULDxFpDHVjqqxM5moqaraBbEdFE5MrQoxZqCJa11yKKx/greg-rakozy-129733.jpg)

DISCLAIMER

I've taken a few web design classes in my university education, so I am familiar with HTMl, but you DO NOT have to be a computer programmer, coder, or web designer to learn what I am going to teach in this post. This is all very simple HTML that will be able to help you to enhance your posts as Steemit members and add value to the content you are creating. There is already a way to add some customizations through the "Markdown Styling Guide" you will see in your preview as you write your posts. However, for me, that wasn't very intuitive, so I am going to be teaching you an alternative way to achieve those same effects. __________________________________________________________________________________________________________ ![marina-vitale-206980.jpg](https://steemitimages.com/DQmQ4ZqbJU8iMbHRWHj9vc6DZJUTWsu89qkR8fv88wbarCb/marina-vitale-206980.jpg)

My Method

Believe it or not, by adding HTML tags around your words/sentences/paragraphs in your post, you can stylize without even being in a text editor!

I am going to teach you the following:

Headings
Italics
Bold
Centering Text
Subscripts/Superscripts
Blockquotes
Lists

__________________________________________________________________________________________________________

Crash Course on HTML

Basically, all you need to know about HTML is how tags work. Tags consist of customization words within the left and right carrot keys like so: <____> (The blanks would be filled in with something like h1, blockquote, center, bold, etc.) In order for each tag to properly effect your content, you have to put an OPEN tag and a CLOSE tag around the text you want to effect. These tags will customize your text, but the tags will not show up in your post when published. Open tag: ![Screen Shot 2017-06-05 at 12.55.42 PM.png](https://steemitimages.com/DQmbpt8fh5vnmSJmVNWfMYwtsZrNNrHAM76LApntcqzqkKD/Screen%20Shot%202017-06-05%20at%2012.55.42%20PM.png) Close tag: ![Screen Shot 2017-06-05 at 12.56.57 PM.png](https://steemitimages.com/DQmfNcbxGcBZpVmTJdUtwZhAwkTYRg9QqZKtAUmeMrRu7s6/Screen%20Shot%202017-06-05%20at%2012.56.57%20PM.png) Without both open and close tag, your customization will not work. Here is an example of how you would type this sentence with the word "love" bolded: I ![Screen Shot 2017-06-05 at 12.58.33 PM.png](https://steemitimages.com/DQmUQkPg52rTEz3UmC2VEemks8AbN4CZNqvHCQmF12CNon5/Screen%20Shot%202017-06-05%20at%2012.58.33%20PM.png) posting on Steemit.

So with that knowledge, let me show you how to achieve some of the other customizations I mentioned above.

Headings

In order to make headings, all you have to do is put those opening and closing tags around the word(s) you want to be your heading. This is what you would put inside your tags for headings: h1,h2,h3,h4,h5, etc. H1 being the largest heading, and h5 being the smallest. For example, the way I made my heading above is this: ![Screen Shot 2017-06-05 at 12.46.58 PM.png](https://steemitimages.com/DQmWbTAerT5icBvhqLyp1GibThQMNFPKFHP4mShzGKZQh5H/Screen%20Shot%202017-06-05%20at%2012.46.58%20PM.png) __________________________________________________________________________________________________________

Italics

To italicize words, all you have to do is put those opening and closing tags around the word(s) you want to italicize. Inside each tag you would have the text "em". For example, the way I would italicize the word "Steemit" would be: ![Screen Shot 2017-06-05 at 1.03.17 PM.png](https://steemitimages.com/DQmXzhrvERx4DFFGqx4WA1TRzSdLm2csXXNpXBfd1pM65SS/Screen%20Shot%202017-06-05%20at%201.03.17%20PM.png) This would appear in your post like so: ![Screen Shot 2017-06-05 at 1.04.48 PM.png](https://steemitimages.com/DQmcZXhSJg6NjbBPzCKA2gAKhGdHq4rkSxPyQYcXpPYY1rX/Screen%20Shot%202017-06-05%20at%201.04.48%20PM.png) __________________________________________________________________________________________________________

Centering Text

To center text, all you have to do is put those opening and closing tags around the word(s) you want to center. Inside each tag you would have the text "center" like this: ![Screen Shot 2017-06-05 at 1.08.03 PM.png](https://steemitimages.com/DQmYTwaXWk4CsTc5a3uM5Pte3FAqLbPydEybomBgHWCfpiC/Screen%20Shot%202017-06-05%20at%201.08.03%20PM.png) It would then show up in your post like this: ![Screen Shot 2017-06-05 at 1.08.09 PM.png](https://steemitimages.com/DQmbJVsnEXM12StzjursDH4Jd8sPE4VymgrJADeXnFL5Mt8/Screen%20Shot%202017-06-05%20at%201.08.09%20PM.png) __________________________________________________________________________________________________________

Subscripts & Superscripts

If for any reason you need to make subscripts or superscripts, it's quite simple. You use these tags for subscripts: ![Screen Shot 2017-06-05 at 1.10.45 PM.png](https://steemitimages.com/DQmWgACzAucxxoR8KobuvLZZd5Lm7gwtUEmjz1ctux5FfUp/Screen%20Shot%202017-06-05%20at%201.10.45%20PM.png) And these tags for superscripts: ![Screen Shot 2017-06-05 at 1.11.20 PM.png](https://steemitimages.com/DQmUahk512kV1r2F5rSPuqvKs24pfKcN1Rd357zYA8Xqv7q/Screen%20Shot%202017-06-05%20at%201.11.20%20PM.png) Here are some examples of how those subscripts and superscripts will appear: Example _subscript Example ^superscript __________________________________________________________________________________________________________

Blockquotes

Blockquotes are pretty much the coolest thing ever. They add so much style to your quotes! This is what blockquotes look like with the blockquote tags:

“Happiness can be found in the darkest of times, if one only remembers to turn on the light.” Albus Dumbledore, Harry Potter and the Prisoner of Azkaban.

In order to achieve this super cool effect, all you have to do is surround your quote with tags, like so: ![Screen Shot 2017-06-05 at 1.16.50 PM.png](https://steemitimages.com/DQmXHCDx4NZp1wAk75m1bmtm5ceYJPcCn9HozSjaXvjkBKz/Screen%20Shot%202017-06-05%20at%201.16.50%20PM.png) __________________________________________________________________________________________________________

Lists

Lists are probably one of the most important things to know how to achieve. They are also a little more tricky than the rest we have talked about so far. In order to achieve an "ordered list" or a numbered list, you have to surround ALL your list items in "ol" tags. But in addition to that, you need to surround each INDIVIDUAL list item with "li" tags like so: ![Screen Shot 2017-06-05 at 1.20.42 PM.png](https://steemitimages.com/DQmfE7uzciVQ6SUopN1BY5vX5mRb2vKe8kEC4UwQCp6e5aX/Screen%20Shot%202017-06-05%20at%201.20.42%20PM.png) This is the way that will appear in your post:

list item
list item
list item

Now there will be instances when you would rather have bullet points instead of numbers. In this case, you will isntead use "unordered list" tags which use the letters "ul" instead of the "ol" used in ordered lists. Here is an example: ![Screen Shot 2017-06-05 at 1.22.58 PM.png](https://steemitimages.com/DQmS4iBZ2ykX9tH8tpUWCza9tsKzNuQRsVz7iaLRs8NY5Un/Screen%20Shot%202017-06-05%20at%201.22.58%20PM.png) Here is how this will show up in your post:

list item
list item
list item

![artem-sapegin-180146.jpg](https://steemitimages.com/DQmZ4L5D3jNeWNsqy1c3FL6RHA2BYraAyRtC7GjKDgAU6WP/artem-sapegin-180146.jpg)

Are you overwhelmed yet?

I know it seems like a lot to remember, but I hope you learned something new, and remember at least one of these tricks to use in your next Steemit post. Follow along for more photography, tips, tricks, travel, and more.

Cheers,

@sarahjanele

^{www.sarahjanele.com} _{All images used from creative commons website, Unsplash.com}