Formatting text is more important than you may think.

Formatting makes the reading experience more pleasurable and easier. Formatting also ensures that your text is easier to read and take in. It can make the difference between a text being read or not. If you want to know more about formatting your text, read on!

I used to think that the font, font size, and layout I used in my writing didn’t matter.

I was wrong.

Formatting can actually make a huge difference in how your writing is read. For example, a study from Princeton found that, on average, readers spend less than a second looking at a block of text. That means that if you want your writing to be read, you need to do something to make it stand out. And that’s what formatting does.

Let's review a 5 different methods to format your text on HIVE.

---

1. Top-level Headings.

The best way to break up an article is with different heading topics, these would be your H1, H2, H3 and so forth. You can set these styles by using the hashtag # in front of whatever text you want followed by a space and then your text.

Generally speaking your larger point would be your H1, and then lesser topics underneath that would fall her needs H2, H3, and so forth.

Example Code :

# H1 Tag
## H2 Tag
### H3 Tag
#### H4 Tag
##### H5 Tag 

Will Generate :

H1 Tag

H2 Tag

H3 Tag

H4 Tag

H5 Tag

To further build on this, we can also add a sub title. Subtitle is text that is just mildly smaller than the main text.

Example Code:

<sub> This is text that is smaller </sub>

Will Generate
_{This is text that is smaller}

Subtext works great when put underneath different heading tags. To move it down one return space, were just going to add a bit of code.

<br>

That code means a line break. Sort of like pressing enter on your keyboard.

Now were going to put it all together with the heading text plus subtext with a line break in the center.

Example Code:

# Bigger text <br> <sub> Smaller text </sub>

Will Generate

Bigger text
_{Smaller text}

---

2. The Line Break.

Another nice tool to use in breaking up content is the line break. This is just a horizontal line that runs across the page much like right above this subheading. You could generate this by placing "---" without quotation marks anywhere you want.

Example Code:

---

Will Generate

---

3. Quotation Marks.

It's always good to source your content let people know what is yours and what is not yours and that is where quoting comes in to play. Let's say you copy a bit of text from Wikipedia, you want let the world know that it's not yours but you're sourcing it to help illustrate a point. ">" You would add that and then the text.

Example Code:

> This is a quoted text

Will generate

This is a quoted text

---

4. Links // linking text and images.

Another nice way to make sure you text is readable is by adding links, not long links but links to specific words or images.

For example, we just want to link the word D.Buzz, instead of entering the whole URL of https://d.buzz/

The formatting is:
[ your text ]( your Link )

Example Code:

[D.Buzz](https://d.buzz/) 
or
[Check out this page](https://d.buzz/) 

Will Generate

D.Buzz
or
Check out this page

---

To build upon this, we can also link images to specific URLs.

Let's say I want to link an image of the D.Buzz logo to the D.Buzz URL.

Example Code:

[![ image name or any title ]( ImageURL )]( Url to Point to )

With image : 

[![dbuzzBanner.png](https://files.peakd.com/file/peakd-hive/dbuzz/23xAih5EUbgcccL4Q91taDbMDUd7inZdDXLHWRphtnjg3WZAgwzCYfZZu6cAE6V6oYSxL.png)](https://d.buzz/)

Will Generate

Note that the image is now clickable, and if you click it you would be brought to the D.Buzz Main page. Pretty neat right?

---

5. Aligning content Left and Right.

We are going to get into a bit more complex formatting, lets induced the concept of div tags. Think of them as like a box to put things in, whatever is inside that box follows the rules of that box (Most of the time).

You have your opening statement which is usually < div > And then your closing statement < /div > all without spaces course. Also, notice on the closing one has the forward slash "/".

Example Code:

<div class="pull-left"> 
This is just going to be a body of text that is pulled to the left-hand side of the screen. On the right-hand side will be a surfing picture of a kitten for you to enjoy.
</div>

<div class="pull-right"> 

![Kitten Surfing](https://media.giphy.com/media/CkMnLcOgKOxfa/giphy.gif)

</div> 

---

Will Generate

---

Sometimes the div tags are a bit tricky and you may need to end with the " --- " line break to get back to regular formatting .

---

Summary

We hope you enjoyed this introduction into formatting text. There are other tips and tricks you can use the format and stylize your text in different ways. We could probably do three or four more articles on the topic and still not cover everything.

You can review a lot of other formatting tips on this cheat sheet located here :

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#videos

At the end of the day however, it's not how many pieces of code you know it's about how readable and understandable your content is. Relaying information, in easy to digest ways is the most important point.

• What are your favorite ways to display content?
• Do you have a bit of code you use regularly to layout your text?
• Any tips or tricks you wish to share?

Let us know in the comments below.

Thanks again for taking the time to read this article, we hope you found it useful.

D.Buzz over and out.

---

---

---

---