Warning: include_once(/customers/2/b/c/il-mato.biz/httpd.www/wp-content/plugins/wp-super-cache/wp-cache-phase1.php): failed to open stream: No such file or directory in /customers/2/b/c/il-mato.biz/httpd.www/wp-content/advanced-cache.php on line 14 Warning: include_once(): Failed opening '/customers/2/b/c/il-mato.biz/httpd.www/wp-content/plugins/wp-super-cache/wp-cache-phase1.php' for inclusion (include_path='.:/usr/share/php') in /customers/2/b/c/il-mato.biz/httpd.www/wp-content/advanced-cache.php on line 14 Notice: register_sidebar was called incorrectly. No id was set in the arguments array for the "Blog Sidebar" sidebar. Defaulting to "sidebar-1". Manually set the id to "sidebar-1" to silence this notice and keep existing sidebar content. Please see Debugging in WordPress for more information. (This message was added in version 4.2.0.) in /customers/2/b/c/il-mato.biz/httpd.www/wp-includes/functions.php on line 3733 Notice: register_sidebar was called incorrectly. No id was set in the arguments array for the "Page Sidebar" sidebar. Defaulting to "sidebar-2". Manually set the id to "sidebar-2" to silence this notice and keep existing sidebar content. Please see Debugging in WordPress for more information. (This message was added in version 4.2.0.) in /customers/2/b/c/il-mato.biz/httpd.www/wp-includes/functions.php on line 3733 Notice: register_sidebar was called incorrectly. No id was set in the arguments array for the "WooCommerce Sidebar" sidebar. Defaulting to "sidebar-3". Manually set the id to "sidebar-3" to silence this notice and keep existing sidebar content. Please see Debugging in WordPress for more information. (This message was added in version 4.2.0.) in /customers/2/b/c/il-mato.biz/httpd.www/wp-includes/functions.php on line 3733 Notice: register_sidebar was called incorrectly. No id was set in the arguments array for the "Footer Area 1" sidebar. Defaulting to "sidebar-4". Manually set the id to "sidebar-4" to silence this notice and keep existing sidebar content. Please see Debugging in WordPress for more information. (This message was added in version 4.2.0.) in /customers/2/b/c/il-mato.biz/httpd.www/wp-includes/functions.php on line 3733 Notice: register_sidebar was called incorrectly. No id was set in the arguments array for the "Footer Area 2" sidebar. Defaulting to "sidebar-5". Manually set the id to "sidebar-5" to silence this notice and keep existing sidebar content. Please see Debugging in WordPress for more information. (This message was added in version 4.2.0.) in /customers/2/b/c/il-mato.biz/httpd.www/wp-includes/functions.php on line 3733 Deprecated: Function create_function() is deprecated in /customers/2/b/c/il-mato.biz/httpd.www/wp-content/themes/salient/functions.php on line 3430 Notice: The called constructor method for WP_Widget is deprecated since version 4.3.0! Use
__construct()
instead. in /customers/2/b/c/il-mato.biz/httpd.www/wp-includes/functions.php on line 3568 Notice: The called constructor method for WP_Widget is deprecated since version 4.3.0! Use
__construct()
instead. in /customers/2/b/c/il-mato.biz/httpd.www/wp-includes/functions.php on line 3568 A basic cheat sheet for editing text using HTML | il-mato Designs

A basic cheat sheet for editing text using HTML

using html code to format text [vc_row][vc_column][vc_column_text]

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?[/vc_column_text][vc_row_inner][vc_column_inner width=”1/2″]

bad text formatting example
[/vc_column_inner][vc_column_inner width=”1/2″]
good text formatting using HTML
[/vc_column_inner][/vc_row_inner][vc_column_text]

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!![/vc_column_text][vc_column_text]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)[/vc_column_text][/vc_column][/vc_row]

About Matias Berra

Matias Berra is a WordPress developer and content marketing writer. Mat loves learning on the internet, creating content and finding awesome people to build meaningful projects with. Mat truly believes great ideas (and cooperation) will change the world for the better. Cryptocurrencies, diving and travelling are his passions.

Leave a Reply

Want to Hire Mat? Contact Him... Here