Tips for Formatting Your Articles on Hashnode

Featured on Hashnode

Subscribe to my newsletter and never miss my upcoming articles

A quick glance at the structure of your article can make a reader decide to either continue or stop reading the article. In my opinion, the appearance & structure of an article is just as important as the content of that article.

In this article, I will share 5 tips for formatting articles on Hashnode.

Formatting the title of your article

You know what they say about first impressions right? They matter. ๐Ÿ˜ƒ

The title of your article is the first thing a reader sees so you should pay attention to it and format it appropriately. The title of a technical article should be written in Title Case or Sentence case instead of UPPERCASE.

For more context, here's the difference between them;

Getting Started With the DOM
/*A title written in title case*/
GETTING STARTED WITH THE DOM
/*A title written in uppercase*/
Getting started with the dom
/*A title written in sentence case*/

I know you might be tempted to write the title of your article in UPPERCASE because you think it will be more pronounced but take a moment to look at the example above and notice how it reads better when the title was written in Title Case or Sentence case than UPPERCASE.

I have also read through numerous technical writing style guides and they all recommended using either Title Case or Sentence case as well.

Formatting your article's cover image

More often than not, people forget to add a cover image to their article or they end up using an image that doesn't relate to the article's topic in anyway.

Even though designing a cover image or searching for the right image can be tasky, it is definitely worth it.

You might ask, why is a cover image necessary? I will tell you. But first, this is what an article without a cover image looks like;

No cover image

Now, let's add a cover image and see the difference. To do this, open the editor and click on Upload an image under Article Cover.

Upload an image

The article cover image should now look like this;

With cover image

As you may have noticed, the cover image;

  • Made the article look more appealing to the eyes.
  • Portrays the topic of the article.
  • Improves the SEO of the article.
  • Improves that chances of the article gaining traction if shared on social media.

To buttress more on the impacts of an article's cover image on social media, here's a quick scenario;

Newsletter

This is an article without a cover image. As you can see, it uses Hashnode default cover image for the social media card.

Learn how to blog

This is an article with a cover image. As you can see, it shows the cover image of the author, it is more visually appealing and would encourage people to read the article.

Formatting the main headings and sub-heading

Hashnode supports Markdown's Atx-style headers which is similar to the HTML header tag.

# This is Heading 1  
## This is Heading 2  
### This is Heading 3
#### This is Heading 4
##### This is Heading 5
###### This is Heading 6

The main heading and sub-heading of your article should follow the format above. Since the title of your article already uses the H1 tag header tag, I'd recommend using a H2 as the main heading and a H3 tag for the sub-heading.

Let's try it out!

Hashnode Editor

As seen in the image above, I used the H2 markdown command ## for the main heading while I used the H3 markdown command ### for the sub-heading.

Right Header format

You can notice it's easier to different the main heading from the sub heading in the article. Aside from that it is also semantically correct to do it this way instead of making it bold as seen in the image below.

Wrong Header format

Tags

Every Hashnode user follows at least one technology or programming language tag during or after signup. So the articles displayed on a user's feed on Hashnode are based on the tags they followed.

When you write an article about React, you would ideally want people who are interested in React to read it right? The only way to do that effectively is to add a React tag to your article so everyone who followed the React tag will get to see it.

To add a tag to your article, go to the editor, find Select tags section as seen in the image below, and add the tags that describe your article.

tags

I added the tags shown in the image above to an article titled Getting Started With the DOM. As you may have noticed, these tags correspond or relate to the article's title.

Aside from making your article appear to the right target audience in the Hashnode community, tags can also increase the reach of your article when it is shared on social media.

Twitter Image

Formating the content of your article with Markdown

Markdown is a lightweight plaintext markup language that you can use to add elements to plaintext documents rather than using the older WYSIWYG editor.

Hashnodeโ€™s editor supports simple markdown along with special tags to embed Tweets, YouTube videos, Codepen snippets, etc.

Guide

To find a list of markdown commands that will help you create well formatted articles on Hashnode, go to the blog's editor and click on Guide.

Conclusion

I hope the tips shared in this article was helpful to you. Now, its time to create well-formatted articles.

If you have any questions or suggestions, you can leave them in the comments section below, and I'll be happy to answer every single one.

DesignerAnna1's photo

Thanks for this quick tutorial about blog formatting. It made me stress-free to knew that I use to do the right thing by using either Title Case or Sentence case in my own articles. ๐Ÿ˜‡

Edidiong Asikpo's photo

I am glad you found it useful DesignerAnna1.

It made me stress-free to knew that I use to do the right thing by using either Title Case or Sentence case in my own articles. ๐Ÿ˜‡

I can imagine. You are on fire ๐Ÿ”ฅ.

Zahash's photo

Good job.

Edidiong Asikpo's photo

Thank you Zahash. I really appreciate it.

Maxi Contieri's photo

Thanks for writing this!

Regarding title case checking and converting I's recommend this tool:

titlecaseconverter.com

Edidiong Asikpo's photo

Glad you found it useful Maxi Contieri. Thanks for sharing this tool, I love it.

Ubong Finkak's photo

Thanks for the helpful tips

Edidiong Asikpo's photo

My pleasure. I am glad you found it useful.

Precious Oladele's photo

Thanks, do you mind telling me how to do the subscribe to newsletter stuff

Precious Oladele's photo

Don't worry i read your other blog edidiongasikpo.com/how-to-increase-your-blo.. and i saw how to implement it

Edidiong Asikpo's photo

Hey Precious Oladele. I am glad you found this article useful.

About the newsletter article, yes that's the one.

Herve Yves's photo

hi Edidiong Asikpo i want to know if we cant add video in article.

Helder Burato Berto's photo

Nice tips! One thing I really appreciate if being add in the future of Hashnode is to import markdown file with some custom yaml fields, like "title", "slug" and somethings has enabled to set when writing in the platform.

The motive of this is because some people like me prefer to write articles in different tools, in my case I commonly at Emacs org-mode, export to markdown and after that I copy-paste all the content to Hashnode, maybe it can be more easy.

Ps.: It's just a suggestion I really enjoy this community.

Kenny Abe's photo

Awesome, Thanks didi.

Samuel Ogunleye's photo

Very helpful ๐Ÿ™‚

Niladri Roy's photo

While I love the content ownership and the simple yet elegant interface, I miss the alignment of images and captions. Can you share some ideas if and how to do that?

  1. Sometimes I want the image center aligned
  2. Sometimes I want to put the image on the left or right half of the page and have text flow around it.
Edidiong Asikpo's photo

I miss the alignment of images and captions. Can you share some ideas if and how to do that?

Thanks for the feedback Niladri Roy. The feature you mentioned will definitely be a good addition to Hashnode.

As of now, there's no way to do that on hashnode. Please submit a feature request about this here so we can add it to our roadmap. Thank you.

Niladri Roy's photo

Sure, will do that!