Markup vs Markdown

HTML stands for Hypertext Markup Language and forms the basic blocks of coding in the world wide web. Most of you are probably familiar with markdown styling here on Steemit and are already using them to format your blogs. Although they sound like opposites, markup and markdown aren't entirely opposites but they actually complement each other.

_{Photo source}

The main feature of HTML or markup is that tags are encased in the less than and greater than signs, "< >". In this blog, I'll refer to them as angle brackets as they look very much like angle brackets.
_{Trivia: the less than and greater than signs vary with angle brackets through pixel difference that is almost unrecognizable to the eye. The difference is seen if you interpret them into ASCII codes. ASCII is the American Standard Code for Information Interchange and they provide a code for every single character that we process in our computers and over the web.}

On the contrary, markdown uses simple characters such as asterisks (*), dashes (-), and plus signs (+). Basically markup is simpler but less powerful. I am saying less powerful here as a subjective statement because I have more experience in HTML than in markdown and as a disclaimer, I haven't seen the full potential of markdown just yet. If you prefer to continue formatting your blogs using markdown, by all means please continue doing so. Click here to link to Steemit's recommended mardown cheat sheet.

I mentioned earlier that markdown and markup complement each other. That is because after the user has formatted his or her content using markdown, the browser will convert those codes into a valid markup. Easy-peasy!

When I started on Steemit, I had to learn how to use markdown styling. I was always bothered about how to properly align photos so I had to experiment on it. Recently I learned that markup coding also prevails here and that it will allow me more formatting options. If you do a right-click on any webpage and then select "View page source", it will show you the HTML code that is used to show that page. I did just that in my early blogs and found that whenever I enclose a phrase in asterisk (*), we know that it will show the text in italics. However, in the source code it shows that the text has been enclosed in the "em" tag, which means it has been automatically converted to HTML.

So yes, markdown styling is a lot easier to remember so even I will continue to use it whenever convenient. But here are a few HTML tags that I'd like to share that may be useful to you. I have tried so many tags including table formatting but found that some of them don't work in the Steemit interface. Whatever I have included here are the ones that I have proven to be working.

Because I cannot encode the correct tag here because otherwise they just become real tags and you won't see them, I will just enclose the tags in actual brackets [ ], and you will be the one to convert them into angle brackets < >.

HTML has opening tags and closing tags. The effect of the tag prevails over the text or content that is in between the opening and the closing tag. The opening tag simply uses the angle brackets < nameoftag>, while the closing tag uses the angle brackets with a slash at the beginning of the tag </ nameoftag>.
_{Note: "nameoftag" is not a real tag, I just used it to show you how the tags look like, and there should be no space too}

Before we begin, you can download a notepad file where I have written the format of the actual tags. You can use this as a guide as we go through the tags one by one. You can also copy and paste the tags from the notepad to your Steemit blog creation screen. Click to view the notepad file.

Basic HTML formatting tags:

There are six heading options that will allow you six levels of varying font sizes:
[h1], [h2], [h3], [h4], [h5], [h6]

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

The heading tags automatically create a linebreak after the heading so you don't have to hit the "enter" key after the text, otherwise it will just create a big space in between the rows.

[p] stands for paragraph and can be used to start a new paragraph, or essentially to start a text in a new row.

[b] stands for bold, but then again, the markdown counterpart is simpler
sample: this text is bold

[i] stands for italicize, ditto on markdown
sample: this text is italicized

[center] will align your text or image to the center of the screen
sample:

this text is aligned to the center

[br] stands for line break and will give you extra rows of spaces
sample:

this text

have line

breaks in between

[hr] stands for horizontal rule and will give you a long horizontal line to separate different parts of your blog

[strike] stands for strike-through and it does just that
sample: ~~this text has strike-through~~

[sub] stands for subscript and simply reduces the size of the font and positions it at the bottom part of the standard text. You can also put a sub tag within a sub tag to make it smaller.
sample: _{this text is inside a sub tag _{this text is inside a sub tag of a sub tag _{this text is a sub-ception_{I bet you can no longer read this}}}}

[blockquote] is a tag you can use to create quotes
sample:

"Use blockquote to emphasize excerpts or quotes said by other people or sources. -Xayd"

Links

The basic tag for linking is "a" which stands for anchor. By default, any URL you put on the Steemit will automatically be an anchor tag. However, I still use the actual anchor tag, because well, I just like making my life a lot more difficult. You can open the tag using
[a href="typeURLhere"] Type Link Text Here [/a]
This anchor will link you to @xaydtrips' blog page

Tables

Tables are fun and I have found them to be very useful here in Steemit. Unfortunately, Steemit doesn't allow us to see the actual table. So if you use the table tags, you will end up with a formatting using invisible tables.

Starting with my most recent blog before this, I have been using tables to format photos in my blog. I do it by placing the photo in the top row and then placing the caption in the bottom row. Essentially, they are shown with a gray background which sets them apart from the rest of your blog's background color so it looks really rad!

"tr" stands for table row and "td" stands for table data

[table]
...[tr]
.....[td][center] filenameofpicture.jpg[/center][/td]
...[/tr]
...[tr]
.....[td][center][sub]Write your caption here[/sub][/center][/td]
...[/tr]
[/table]
_{Note: Remove the periods/dots, change the brackets into angle brackets, change the filename of the picture, and the text in the caption to make this table tag work}

_{I don't know who wrote this and why he or she would write something like that. I just downloaded it from the internetszszz. ROFL :D :D :D}

Here's a different version where the photo and text are next to each other:

[table]
...[tr]
.....[td][center] filenameofpicture.jpg[/center][/td]
.....[td][center][sub]Write your caption here[/sub][/center][/td]
...[/tr]
[/table]

_{I don't know who wrote this and why he or she would write something like that. I just downloaded it from the internetszszz. ROFL :D :D :D}

Lists

In the advent of blogs similar to "Ten things to eat to lose weight in 3 days!" and "Twenty-four things to do on your Southeast Asia trip" lists have been the key to writing blogs that are easy to skim through.

Markdown styling has a way to do lists but I will introduce you to the markup version of it. First, identify whether you want an unordered list (using bullets), or if you want an ordered list (using numbers).

An unordered lists can be made using the [ul] --- [/ul] tags, while an ordered lists using [ol] --- [/ol]. Each entry on the list will then have to be enclosed in [li] --- [/li] tags.

Example of an unordered lists:

[ul]
.....[li]Upvote the post[/li]
.....[li]Resteem the post[/li]
.....[li]I will use markup tags[/li]
.....[li]Ask a difficult question about coding that the author will not be able to answer[/li]
.....[li]Nothing, I probably will not finish reading it.[/li]
[/ul]
_{Note: Remove the periods/dots and change the brackets into angle brackets to make the list tag work}

Things I will do after reading this blog:

Upvote the post

Resteem the post

I will use markup tags

Ask a difficult question about coding that the author will not be able to answer

Nothing, I probably will not finish reading it.

Simply change the [ul] --- [/ul] tag above into [ol] --- [/ol] and you will get a numbered lists.

Things I will do after reading this blog:

Upvote the post

Resteem the post

I will use markup tags

Ask a difficult question about coding that the author will not be able to answer

Nothing, I probably will not finish reading it.

You can also put a numbered list within an unordered lists and vice versa. Just be very careful with putting in the right open and close tags in the right location.

[ul]
.[li]This is the first entry in my unordered list[/li]
...[ol]
.....[li]This is an ordered or numbered list inside an unordered lists[/li]
.....[li]This is the second entry in my ordered lists[/li]
.....[li]This is the third entry in my ordered lists[/li]
...[/ol]
.[li]This is the second entry in my unordered list[/li]
[/ul]

_{Note: Remove the periods/dots and change the brackets into angle brackets to make the list tag work}

This is an unordered list:

This is the first entry in my unordered list

This is an ordered or numbered list inside an unordered lists

This is the second entry in my ordered lists

This is the third entry in my ordered lists

This is the second entry in my unordered list

This is everything I have

My mind is exhausted and yours, probably, is too

I will continue to discover which markup tags work here.

And I sure will share it to you.

I would love to cite references to this blog but it means that I will have to reference my second year high school computer teacher who taught me about HTML tags day in and day out, repetitively. It was annoying to do codes everyday over and over again but because of that I have stored and memorized all of these tags in my teeny-weeny brain and I still use these codes to run scripts in my computer, to format my former Wordpress blog, and now to format my Steemit blogs.

Thank you so much for reading. I apologize for my bad humor but I hope you learned something from me today.

Cheers,
@xaydtrips

So You Know Markdown? Let Me Introduce You To Markup (And Other Tags Useful for Steemit Blog Formatting)