5 Formatting Options to Help your Content Stand Out.

in GEMS4 years ago

5formatingoptions.png

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

test.png

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

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.

Kitten Surfing


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.


Twitter2.jpeg


D.Buzz is ...

Is a censorship-resistant short form microblogging platform that empowers you to share your thoughts in 280 characters or less.

Censorship resistant and built for the community with love.

Vote for @dbuzz as a Witness.


Using HiveSigner: HiveSigner.com


Search for @dbuzz witness at peakd.com


Search for @dbuzz witness at

Hive.blog / https://wallet.hive.blog/~witnesses



We strive to have a fun and neutral stance on topics. If you have any concerns with the content, please contact @jacuzzi, who writes and generates the content for our articles, or the @dbuzz team for clarification.


Dbuzz_Banner.png

dbuzzsotreBanner.jpeg

Sort:  

Oh! thank you so much, I'm looking for this.

Appreciate the tips. Thank you very much.

Thank you so much for valuable tips.
I reblog !!! 😍😍😍

It's a great tip for us. Thank you very much.

Congratulations @dbuzz! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s) :

You distributed more than 26000 upvotes.
Your next target is to reach 27000 upvotes.
You received more than 13000 HP as payout for your posts and comments.
Your next payout target is 14000 HP.
The unit is Hive Power equivalent because your rewards can be split into HP and HBD

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

Check out the last post from @hivebuzz:

False-Positive phishing alert reported by antivirus software
Feedback from the May 1st Hive Power Up Day
Support the HiveBuzz project. Vote for our proposal!

These are great tips! Thanks for this @dbuzz

Thanks you so much from information

Thank you for the Post.

Thank you so much @dbuzz @jacuzzi . As a newbie here, I loved the various formatting posts in some posts I have read. Now, I can do same too. Thank you. 🤗 I voted you as a witness. Even though I don't know what that means,you deserve more. 🙌