was successfully added to your cart.

A basic cheat sheet for editing text using HTML

using html code to format text Facebooktwittergoogle_plusredditpinterestlinkedin

The importance of  text format in content writing

A lot of my daily work doesn’t only involve content writing, but I generally I find myself having to rely on very basic HTML (yes, you can learn it with out having to understand a lot of the logic behind the code) to format text in order to make it look more interesting on the page.

Don’t forget that as human beings we are still quite visual when it comes to the way we take information it. By default, we are more likely to remember or be engaged with a certain piece of content provided that the text within the article is formatted and arrange in a way that both makes sense and it’s pleasing to the eyes. You can see in the pictures below, which format do you think will keep a reader more engaged?

bad text formatting example
good text formatting using HTML

The HTML and CSS cheat sheet for formatting text

Now let’s get down to what actually matters, here’s the little sheet I created at work to try and explain to my co-workers how to best use HTLM to gain some control over the formatting of text on your website, hope you find it useful!!

Tittle tags and paragraph tags structure

<h1>Tittle</h1>

<p>Your paragraph goes inside the p tags. Tags are not only good for SEO but they also help to maintain data structure and semantic meaning. <strong>There should be only one h1 tag per page</strong></p>

<h2>Sub tittle</h2>

<p>Your paragraph goes inside the p tags. Tags are not only good for SEO but they also help to maintain data structure and syntax</p>

<h3>Sub-sub- tittle</h3>

<p>Your paragraph goes inside the p tags. Tags are not only good for SEO but they also help to maintain data structure and syntax</p>

Bullet points and lists:

<ul>

<li>First bullet point of an unordered list</li>

<li>Second bullet point of an unordered list </li>

<li>Third bullet point of an unordered list </li>

</ul>

Ordered lists are used when the order of the steps matter i.e when creating instructions:

<ol>

<li>First bullet point of an ordered list</li>

<li>Second bullet point of an ordered list </li>

<li>Third bullet point of an ordered list </li>

</ol>

HTML tags that are useful for formatting:

<strong>Makes text bold</strong>

<em>Makes text Italic</em>


<hr> Adds a horizontal visible brake line

&nbsp; Adds a non visible horizontal space

Adding styles for format purposes:

You can add any style to any type of tag by including style= “parameter: amount;” inside the opening tags <>

Example:

<h2 style= “font-size:20px; padding-bottom:30px;”>This subtitle will now be 20px in size and have 30px of empty space underneath</h2>

Useful styles:

font-size: 20px;

text-decoration: underline;

color: #00CC00;

(you can get color code from here http://www.w3schools.com/tags/ref_colorpicker.asp )

text-align: center;  

(you can also use justify, left, right)

padding-bottom: 30px;

padding-top: 30px;

margin-bottom: 10px;

(remember for both padding and margin you can also use bottom,top,right and left properties)

Facebooktwittergoogle_plusredditpinterestlinkedin

About Matias Berra

Matias Berra is a freelance WordPress developer and content marketing writer living in Pattaya city Thailand. Mat loves learning on the internet, creating content for the online masses and finding awesome people to build meaningful and fun projects with. Mat truly believes great ideas (and cooperation) will change the world for the better.

Leave a Reply

Want to Hire Mat? Contact Him... Here