How To Format Code In A Blog

Blog Post Formatting and WordPress Basic HTML Formatting blog posts don't require you know much HTML but it definitely helps!

If you want your blog to be taken seriously then you need to master your blog post formatting.

This also means learning some basic HTML tricks to help make your articles interesting and consistently styled.

Now don't worry, I'm not saying you need to become a programmer or anything to create attractive and uninformed blog posts but picking up a few essential skills will help a lot.

WordPress is a CMS (Content Management System) and as such it doesn't require you to code everything yourself.

There are tools for that.

Most of the code is hidden away to avoid anything getting broken and you have a WYSIWYG (What You See is What You Get) Editor for writing and formatting blog posts and pages.

If you have been using WordPress for a while then you will know that there is both a Visual and Text tab in the top right of the content editor which allows you to switch from the styled version of your post and the raw HTML.

For the newbies.

Visual = WordPress Visual Editor

Text = WordPress HTML Editor / Raw Text

Most beginners are overwhelmed and scared when they see the raw HTML on the text tab for the first time and quickly revert back.

But this doesn't need to be the case and you will become a much better blogger by taking the time to get comfortable working and editing in this mode.

With a little practice, you can easily master some of the basics, the syntax is actually quite logical.

Syntax (Computer Definition): The structure of statements in a computer language.

So what is HTML?

HTML stands for Hypertext Markup Language and is the programming language used for creating web pages and applications.

HTML allows you to create basic functionality that you can then style with CSS (Cascading Style Sheets).

It was created in 1990 by Tim Berners-Lee, a personal hero of mine who also is attributed with inventing the internet, but I'm not going to teach you everything about HTML and the history but if you are the curious kind, you can continue reading on Wikipedia.

We are just here to look at how HTML pertains to writing and editing WordPress posts and pages.

When you see unfamiliar code in the Text tab of the WordPress editor you are looking at HTML and in some cases, it may include some CSS inline styles.

HTML Example

<h2>This is a title</h2>

The parts that are highlighted red are HTML and in this example, you see an opening h2 title tag at the beginning and the closing h2 title tag at the end.

Notice the only difference is that the closing tag has a backslash before the name of the tag? This is how you can quickly see when your HTML has opened and closed.

This is a great tip for spotting mistakes or broken HTML.

HTML with Inline CSS Example

<h2 style="color:red;">This is a title</h2>

In the above example, we have used the same h2, however, this time we have used HTML to call one piece of CSS to change the color to red. Notice the only part that is actually CSS is highlighted in red.

Ideally, you won't see much inline CSS because the best way is to style your HTML elements with external CSS files, this is the typical way WordPress Themes apply styles to your blog page automatically.

I personally don't advise styling your HTML inline in the WordPress editor but it's important to be aware of it in case you ever need to edit or clean up code that has found it's way in from other sources like a plugin or from copying and pasting from another source.

Inevitably you will benefit from being able to clean things up when gremlins (not a technical term) find their way into your content.

So let's look at how to add HTML to WordPress posts and posts and pages and what you need to know.

WordPress Basic HTML Essentials

When you are adding HTML to style your content you need to remember to wrap your content with the relevant opening and closing tags.

Example:

<p>Paragraphs should be wrapped with p tags</p>

There are examples of useful HTML elements that don't require a closing tag because they are self-closing.

One example is the line break<br> which will work without a closing tag, this is because line breaks don't and can't contain content inside.

Headings Tags & Sub Headings

WordPress Heading HTML

There are various types of heading on a WordPress post, first, you have the post title heading, this is a <h1> and then you have the ability to add heading titles to your content to help you group your thoughts.

These range from h1 (Heading 1) through to h6 (Heading 6) and your theme will typically style them to be appropriately sized.

Since your page or post title is automatically an h1 you want to avoid using this in your content as any other instances will compete with the main title which is the name of your post.

Instead, follow the semantically correct ordering process and the first time you need to use a section heading move down to the h2 heading title.

While you can easily set these using the drop-down in the top left of the post editor WYSIWYG, it's helpful to know how they work in HTML format so you can correct any mistakes.

Here are some examples

<h1>This is a heading 1, you won't need to use me in your content</h1>
<h2>This is a heading 2, I'm very useful, you can use me to organize your articles into sections.</h2>
<h3>This is a heading 3, Only use me if you already have h2 section headings and you need to divide those sections into sub-sections.</h3>
<h4>This is a heading 4, I'm similar to the above, only use me if you have already used h3's</h4>

Hopefully, you are starting to see a pattern here with the HTML syntax.

All HTML elements begin with an opening <

They also close with a closing >

Opening elements can simply contain the element name.

Closing tags contain a forward slash after their opening < and before the name of the HTML element they are closing.

Just getting a bit more familiar with the above will put you leaps and bounds beyond most bloggers using WordPress.

Bold or Italics

When you want to emphasize a point and bring attention to certain words you might want to use bold or italics to make them stand out.

I definitely prefer this approach to ALL CAPS, which to me comes across as shouting.

The HTML for bold is <strong> and for italics it's <em>.

Fun fact: Strong is easy to remember for making something bold, but why does theitalics element use em? Em is an abbreviation of emphasis. That might help it stick.

<em>This text is italicized, I am for gentle emphasis</em>

<strong>This text is bold, I am for strong emphasis</strong>

Additionally, you can use the WordPress WYSIWYG of course or the keyboard shortcut CTRL + B for Bold and CTRL + I for italics after highlighting the text you want to modify.

For a full list of WordPress keyboard shortcuts and other formatting, methods go here.

There are some rules to how you should and shouldn't use these including keeping them mutually exclusive, reserve them for short sentences and use sparingly.

Practical Typography has a great article explaining the importance of these rules.

If you are writing copy to really engage people, like sales-copy then these rules can be bent, but not broken.

emphasis

Remember, if everything is emphasized, then nothing is emphasized!

Lists – Ordered & Unordered

There are two types of lists you can add using HTML that are also supported by the WordPress WYSIWYG.

These are:

Ordered Lists –<ol>

Ordered lists display as a series of numbered items. This is useful when writing a list where the order matters.

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

The above code turns into:

Item 1
Item 2
Item 3

Unordered Lists –<ul>

Unordered lists are essentially bullet-point lists.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

And this one turns into the below bullet list.

Item 1
Item 2
Item 3

We all know how useful lists are and they also help to break up your content and make it look more interesting.

One key difference you will notice here is that there are individual list items <li> and they are wrapped in their entirety with one <ol> or <ul> wrapper.

This is important to be aware of, because if the wrapping<ol> or <ul> are missing the list items won't render.

Images

Another important aspect of formatting a blog post or any page with WordPress is the use of images and you should have no trouble finding some interesting photos you can get from Yahoo images and other copyright free image websites. Some of these options are paid but many of them are free provided you give credit with a Source mention and link.

A small price to pay to have professional visuals on your website or blog.

A picture is worth a thousand words, as they say, they also provide your readers with visual stimuli as well as pauses to help break it your content into digestible chunks.

This helps keep your readers engaged and while you don't need to code images yourself understanding the syntax is useful.

Here is an example of image code and how it will look when you look at the Text tab of your editor.

<img src="https://mazepress.com/image.png">

An image doesn't require a closing tag because all of the information it needs is contained within the opening and closing brackets of the HTML element. The src simply calls the location of the URL.

WordPress allows you to float your images left, right or you can center them. If you do so and check the code in the Text tab you will see that classes have been added which are used to style the images accordingly.

This is an example of where external CSS is being used to apply different styles to different images. Useful to know!

Important: Before adding images to your posts and pages make sure they are optimized for speed and search engines.

Embeds

Inevitably you will want to use embed codes from external websites.

One example is when you want to add a video from YouTube or Vimeo, you go to share and it gives you some long code you can copy.

The main thing to remember is you can't paste HTML or any other code onto the visual tab of the content editor. Doing so will scramble the code and render it useless when you hit save.

Make sure you go to the text tab and then paste it where you want it to appear.

Below is an example of embed code from YouTube.

<iframe width="560" height="315" src="https://www.youtube.com/embed/ssxCQuv3KzE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

While WordPress allows you to simply paste a YouTube URL into your post to display it as a video, this may not give you full control over the video dimensions and the other embed settings.

For this reason, and because I'm old school, I still use the iframe embed code.

Most websites which offer embed codes aren't natively supported by WordPress and so you will still need to be aware of embed codes, iframes and how they work to be able to add multimedia to your posts.

Shortcodes

Shortcodes aren't HTML. In fact, they aren't even a programming language, they are a WordPress native function that allows plugin and theme developers to create simple ways for you and me to add elements to our web pages and posts.

The simplest example that features on pretty much every blog is a contact form shortcode but there are hundreds if not thousands of potential uses for shortcodes that include the ability to add:

Tables
Galleries
Pricing Packages
Videos
Lead Magnets / Email Opt-in forms
Podcast Episodes

Here is a shortcode for a contact form generated by the Contact Form 7 plugin, one of our recommended plugins we install on 90% of our sites and blogs.

Note: I had to add spaces after the opening and before the closing brackets to stop it from actually showing the contact form, so imagine it without the spaces.

[ contact-form-7 id="28" title="Contact form 1" ]

Notice the syntax for a shortcode is different. They begin with an opening [ and end with a closing ] parenthesis instead of < and >.

They are then formatted by the shortcode developer to make it easy for you to adjust and change essential settings.

When the web page loads, this contact form actually loads about 20 lines of messy HTML, so it's much easier for you when you can access a shortcode.

The only caveat is you don't want to overuse shortcodes as they will slow down your web pages.

They are useful to know about and can make the process of editing your post a lot less cumbersome when you don't have to use large amounts of HTML that you don't understand and have to work cautiously around.

Miscellaneous Formatting Advice

There are several other tips I advise new WordPress students keep in mind that I'm going to cover briefly.

These include:

Don't add unnecessary line breaks. This means try not to use <br> HTML tag and avoid hitting enter twice between paragraphs and sections unless you absolutely have to. It makes your articles look messy and you are bound to create inconsistencies.
Don't add page specific font families, sizes, and colors – Again this makes your posts look horrendous and like they were created in 1995. You might think that custom sized green title with a unique font grabs attention when actually it sticks out as inconsistent, and unprofessional. Your theme should dictate these styles.
Never add HTML or embed code to the Visual Tab – This may lead to unexpected results, involve lots of cleaning up or break your page entirely.
Never upload videos to WordPress – Your website hosting is not built for delivering video content. Fortunately, YouTube and Vimeo provide super fast and 100% free video hosting anyway. This is why it's best to embed videos from YouTube even when they are your own.

Nothing too complicated but I often see people making these mistakes and making their lives harder.

But soon, things might be different, very different in-fact!

Gutenberg, The Future of Blogging?

Gutenberg is a new content editor being built from the ground up by WordPress and will be coming to an install near you very soon.

Is it the future of blogging? Who knows? But it's definitely the future of WordPress so it's time to get with it.

Gutenberg is a different beast.

If you have ever used Medium.com for blogging then when you first try Gutenberg it will feel eerily similar.

In my opinion, this is a good thing, Medium's distraction-free content editor is beautifully easy to use and seeing WP take note of this is a positive for all involved in running blogs and websites running on WP.

The Gutenberg editor is also modular and allows you to drag and drop blocks into your content which each have a different purpose.

This is similar to how page builder plugins and certain themes currently provide this kind of drag and drop solution, but now these features are coming to WordPress by default.

If there's one aspect of WordPress that hasn't evolved much over the years it's been the TinyMCE editor so I welcome this innovation with open arms.

If you are struggling with formatting blog posts with the current editor, you can already try Gutenberg by downloading and installing it by going to plugins in your dashboard and searching for "Gutenberg".

Blog Post Formatting & Basic HTML Final Word

If you spend a little bit of time practicing the above you will gain much greater control over your content and how it's presented.

Hopefully, you feel a bit more comfortable now with blog post formatting and basic HTML usage.

This skills can save you a lot of time, money and head-scratching when your content formatting goes wrong or doesn't render properly.

While the above basics are enough for most bloggers and WordPress website owners, if you are curious to learn more there are some great free websites where you can learn HTML including CodeAcademy and w3Schools.

Now, go and make your content pretty! 🙂

If you found this article useful, consider checking out some of our other useful blogging guides like our Blog Post Checklist: Essentials Guide or How to Repurpose Content and if your a fan of these kind of guides, subscribe to my newsletter and I will share my best content and discoveries with you via email.

Blog Post Formatting and WordPress Basic HTML