Today's article is about using different header sizes. There are "Octothorp Headers", "HTML Headers" (those two types are almost identical) and "Underline Headers".

---

If you're trying to add some "style" to your articles on Steemit, there are some choices from hypertext markup language (HTML) and markdown language (MDL) that you can use. Each of these items is called a "tag"; the one before the text is an opening tag, and the one after the text you're styling is a closing tag. Certain tags do not need both as they are self-closing. Tags within <> are from HTML. Unfortunately, those of you who have studied HTML and MDL may be frustrated because only certain tags from each work. Here are a few that I figured out for you, although I STILL don't know how to underline. In each article, I'll share some tips for you!

---

Octothorp "#" Headers

This formatting technique uses the octothorp/hashtag/fence/pound sign (#) with a space. The closing "#" is not required but must be preceded by a space if used. It not only affects the size, it also affects the font and the line spacing. This technique only affects the line it's on, but it affects the ENTIRE line.

RESULT - = - = - CODE
-=-=-=-=-=-=-=-=-=-=-=-
# 1 octothorp: # 1 octothorp #
## 2 octothorps: ## 2 octothorps ##
### 3 octothorps: ### 3 octothorps ###
#### 4 octothorps: #### 4 octothorps ####
##### 5 octothorps: ##### 5 octothorps #####
###### 6 octothorps: ###### 6 octothorps ######
(6 is the maximum)

Failure to use proper spacing will cause the octothorps to be visible. 😱
Error examples:

This uses proper opening and closing tags (four "#"s) and proper spacing.

This uses a proper opening tag (four "#"s) and proper spacing, but no closing tag.

####This doesn't use proper spacing at the start, causing the formatting to fail. ####

This doesn't use proper spacing at the end, causing the octothorps to show at the end.####

If you attempt to place text after the closing octothorp(s), they will be revealed, and the text after will be formatted the same as the header, as you can see from the example below.

This is the header ### This is outside of the hashtags but it's still been formatted!

---

---

!*Ubergeek note:* The term "hashtag" is a very new one, having been chosen in 2007 for use on Twitter, and actually refers to the practice of placing an octothorp in front of a "subject" to tie it to Twitter, much like some forums use the @ sign in front of usernames, like @steemitguide.

---

---

HTML Headers

HTML tags are enclosed in "<>" and header tags range from h1 (largest) to h6 (smallest). Both the opening and closing tags are required for headers. It not only affects the size, it also affects the font and the line spacing. Any text on the same line after that closing tag will be unaffected by the header tag, and will appear on the next line as there is a built-in "enter" after these tags.

RESULT
- = - = -
CODE
-=-=-=-=-=-=-=-=-=-=-=-

Header 1

<h1>Header 1</h1>

Header 2

<h2>Header 2</h2>

Header 3

<h3>Header 3</h3>

Header 4

<h4>Header 4</h4>

Header 5

<h5>Header 5</h5>

Header 6

<h6>Header 6</h6>
(6 is the maximum)

---

Underline Header

This is the least versatile of the 3 formatting types. As with the Octothorp tags, it affects everything on the text line and there MUST be a blank line above that text line. There are only two options: at least 3 equal signs "=" on the line below for the largest header, or at least 3 hyphens "-" for the second-largest header. One drawback of this technique is that it doesn't work with the center tag, and you cannot use the line break tag: <br>, whereas both the Octothorp and HTML Headers allow the use of the break tag.

Header (h1)

Code:
Header (h1)
===

Header (h2)

Code:
Header (h2)
---

---

Now you know how to use headers! Go ahead and give it a try and remember - it's glitchy so if you find something isn't working, try putting an empty line above it. Enjoy! 😊

---

---

!Ubergeek note: The above lists for Octothorp and HTML Headers were accomplished with the <center> tag. You may be wondering why I didn't use <div class=pull-left></div> and <div class=pull-right></div>, or a table, to form two columns. Unfortunately, the super-power of MDL is neutralized 😶 inside of a table or a div! 😭
Examples of the MDL-crushing power of divs and tables: 😈

Div test:

You can see that the div right-justified the text, but the octothorps were thwarted! 😠

Table test:

Result	Code
# 1 octothorp: #	`# 1 octothorp #`
## 2 octothorps: ##	`## 2 octothorps ##`

You can see that the table thwarted the MDL! 😠 You'll have to pay close attention when you use formatting because this sort of thing crops up unexpectedly (repeatedly while I was writing this article, causing it to take far longer to write just the Octothorp section!). G-L-I-T-C-H-Y! 😞 😭 😠 😵

---

---

Credits:

If you're looking for an all-in-one guide, you might find The Ultimate Guide To Formatting On Steemit (Markup and Markdown) by @sisygoboom useful. It contains a lot of info, briefly presented, and I even found a couple of new things!

A great deal of this series of articles involved experimenting, both with what I know about HTML and markdown, and because not everything in the articles I read (below) worked.
As I was working on this, I found this article How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor by @steemitguide. It's not as comprehensive as I needed, but it did remind me about divs and how to make columns, and the first 2 links to other articles (at the bottom of it) may help you. The third I found to be useless, except I got the "center" tag from it. Some of the info in the 2 other articles works, some doesn't, including the stuff about the Raw HTML editor.

I found this article to be difficult to use, and not everything works, but I gleaned some of the above content from it: Steemit Beginner Tips : Basic Guide on how to Adjust and Edit Fonts in Post. If you don't see something from here in my article, that's because it didn't work or I couldn't figure it out.

The article Steemitguide: Tutorial on How-To use Unicode Characters on Steemit Raw HTML Editor ! Includes Cheatsheet on Smileys, Icons and Symbols, by @steemitguide, has some outdated info, but it was where I got the emoticon codes from and, by looking at the source code, I was reminded about using tables.

---

---

If you appreciate this article, please upvote/like, resteem/share and share it to Facebook, Twitter, Reddit, LinkedIn and wherever else you can!