Subscribe      List an Event or Business      Invite a Writer      Write for WN      Writers      Other Locations

Article Formatting Guide for Online Writing

Home > Everywhere > How To | Lists
by Lisa Morgan (subscribe)
...living life as it is meant to be experienced - outside the rat race, barefooted and content in one's own skin.
Published December 6th 2017
An easy guide to more advanced formatting options
Formatting articles, HTML code, format weekend notes
Many people write online nowdays, from personal blogs to contributing articles on content management systems. One of the most common difficulties is with article formatting, as most online editors are pretty basic.

Being able to do more than just bold or italicise text is essential to producing quality articles that look good and are easy to read. Here is a quick and simple guide to using HTML to format articles and text. Most online editors will accept HTML tags, so give these a go.

You can also comment below in the comments with additional questions and they will be added to this page.

Note - The orange writing after the CODE: is the actual HTML code to use.


How Do I Add Coloured Font?


Sometimes writers want to add coloured font to their article to highlight important parts. This is not often the done thing in many online articles, so if you absolutely must do this, do it sparingly and with a purpose. To get the HTML colour codes for the colour you wish to use, this HTML colour picker will help.

CODE: Your Green Font Here

This will show up as: Your Green Font Here


How Do I Add Underlines To Font?


Underlines are often used to stress a single word or to create a subheading within an article by making it stand out. However, with HTML5 this code is deprecated, and you are meant to find other ways to emphasise your text. Give it a go, and if it does not work for your article, try something else for emphasis.

CODE: Underlined Text

This will show up as: Underlined Text


How Do I Add Subheadings?


The best way to add subheadings is to use the subheadings already defined by the website in question in their stylesheet (CSS). The reason for this is so that all the articles that use subheadings on the particular website platform will be uniform.

CODE:

Subheading Type 2



This will show up as

Subheading Type 2


There are other subheading types you can use - try h3, h4, h5, h6 to see what they look like. Personally, I would avoid using h1 as it is used for Article Headings.


How Do I Add Symbols?


Writers often want to use symbols such as percentage, copyright, trademark, degree, and so on.

This is fairly easy to do by replacing SymbolCode below with the code of the symbol you wish to use. Here is an easy tool for finding the symbol code you are after.

CODE: &SymbolCode;

Here are some common Symbol Codes (don't forget to enclose in & followed by ;)
Dollar Sign - #36
Percentage - #37
Degree - #176
Copyright - #169
Number Symbol - #35

How To Format Articles (continued)

How Do I Add Bulleted Lists?


Adding bulleted lists to articles online can make the layout of the article cleaner, less cluttered and easier to read on a computer screen instead of a chunky paragraph.

CODE:
  • List Item 1
  • List Item 2
  • List Item 3


This will result in the following list;
  • List Item 1
  • List Item 2
  • List Item 3


How Do I Add Numbered Lists?


Like bullets, numbered lists can be used to list items or indicate steps. Use OL (ordered list) instead of the UL (unordered list) used for bullet lists.

CODE:
  1. List Item 1
  2. List Item 2
  3. List Item 3


This will display a numbered list like this;
  1. List Item 1
  2. List Item 2
  3. List Item 3


How Do I Add Subscript and Superscript Text?


Writers may want to add degrees, reference numbers, footnotes, chemical formulas, ordinal indicators, fractions, percentages and so on to their articles. This is where subscript and superscript comes in.

For superscript use;
CODE: This is your regular textThis is your superscript text or number

This will display as: This is your regular textThis is your superscript text or number

For subscript use;
CODE: This is your regular textThis is your subscript text or number

This will display as: This is your regular textThis is your subscript text or number


Help! I've done this and it is not working!


The most common error in using HTML tags is that you've missed off a < or a / so if you go back and look more carefully, you will spot the mistake.

As it is easy to overlook mistakes or get lost in code, you are best writing your article in a document outside the online editor so you don't lose your work if you make mistakes. There are also nifty code editors out there that highlight and colour code, making it easier to spot mistakes.
Help us improve  Click here if you liked this article  7
Share: email  facebook  twitter
Why? Make your articles look better
When: Anytime
Cost: Free
Your Comment
That's really helpful! Thanks for sharing it.
by Jennifer Muirhead (score: 3|1051) 292 days ago
Articles from other cities
Popular Articles
Categories
Lists
Questions