Blogging 101: Basic HTML for Blog Posts

As anyone who’s using WordPress and has accidentally ended up on the text tab knows, HMTL coding looks insanely complicated and hard to master. So many people are learning how to code now, and take courses to learn every little thing we could possibly do to create an amazing fully functional website. But then there’s the rest of us, who’s heads spin at the though of being able to code a whole page. So, here’s some quick ‘basic’ tips on HMTL you can use for your blogging needs without wanting to pull your hair out!

Create Links

WordPress is easy to use and can create links for you, whether you just copy and paste the link or use the link button at the top of the page. But it is always useful to understand how to add a link through HTML as well. You use the following:

<a href=”URL”>TEXT</a>

Which will look like this: TEXT (with the URL being this page)

This works the same when using images instead of text. Just change to the below and use the image URL from the image you’ve uploaded.

<a href=”URL“><img src=”IMAGE URL” /></a>

For example the header for this post looks like this when in text mode:

<a href=”https://www.uptownoracle.com/blogging-101-basic-html-for-blog-posts”><img src=”https://www.uptownoracle.com/755/2018/04/25.png” /></a>

No Follow Links

If you’re working with brands and using paid for links then you should know that link’s should be marked as no follow for when search engines crawl your site. This means that these outgoing links aren’t used when SEO ranking your site the URL’s that you link to.  The rel=”nofollow” section should appear after the URL but before the > in the code in order to work correctly.

<a href=”URL” rel=”nofollow” >TEXT</a>

Email Link

As well as usual URL’s you can also link to email addresses so that outlook automatically opens a new email to the address. Just use the ‘mailto:’ pre-fix before the email address and use as a normal URL. This can also be used for images.

<a href=”mailto:EMAIL ADDRESS”>TEXT</a>

Embed Images

HTML not only helps you add links to images, but can also let you add more information or instructions for formatting. You can add your alternative text via HTML by adding this to your image:

<img src=”IMAGE URL” alt=”ALT TEXT”>

Alt text is used for site visitors who can’t see images in their browser, it also helps those who are visually impaired and who use screen readers. It also improves your SEO as it enables the search engine to ‘read’ what the image is showing.

You can also use HTML to resize images. By adding width and height pixels you can choose to alter your images to be a specific size on your page. You can also use this method to make the 1x1pixels to make the image ‘invisible’ to visitors but still view-able when pinning images to Pinterest.

<img src=”IMAGE URL” width=”X” height=”Y” />

Tables

Tables are a handy little feature for blogs design wise – and I used tables for my monthly book release list.

An HTML table starts with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A usual table cell is defined with <td>.

<table>
<tr>
<th>Top Left Cell</th>
<th>Top Right Cell</th>
</tr>
<tr>
<td>Bottom Left Cell</td>
<td>Bottom Right Cell</td>
</tr>
</table>

When used in the text tab, this shows as:

If you don’t want to, then you don’t need to use a table header tag at all and the table can be all <td> tagged.

Are there any other quick HTML fixes you use for blog posts?