The Blogger’s Guide to HTML

The Blogger’s Guide to HTML

The very nature of being a blogger means that at some point you’re probably going to need play with some HTML. But what if you don’t have a technical background? Where do you start? That’s where I come in – here is my blogger’s guide to HTML.

What is HTML?

HTML stands for Hyper Text Markup Language. It’s basically a programming language that tells your browser (e.g. Internet Explorer, Chrome, Safari) what to display on your screen. It’s made up of different tags that represent the elements you see on screen.

 

HTML vs. CSS – what’s the Difference?

In a nutshell, HTML tells the browser what to display and CSS tells it how to display it. I’m going to be talking about CSS in depth next week, but to understand what’s going on with CSS you first need to know the basics of HTML.

For example

 

Anatomy of a HTML tag

So what does an HTML tag actually look like? Here is an example of a simple link to Google’s search engine.

<a href="google.com" id="MyTestLink" style="color:red;">Google</a>

Opening Tag

The opening tag starts with an angled bracket ‘<‘ and holds most of the information of the tag (attributes) and ends with another angled bracket ‘>’.
From the example above this is the opening tag

<a href="google.com" id="MyTestLink" style="color:red;">

 

Tag Content

This is basically whatever appears between the opening and closing tags. In the example above I put the text ‘Google’ but I could also have used an image or another HTML element instead.

 

Closing Tag

The closing tag always begins with an angled bracket ‘<‘ ends with a forward slash before the closing angled bracket ‘>’. This is the closing tag from the example
</a>

 

Self-Closing Tag

There are some HTML tags which are called self-closing, which means they don’t have separate opening and closing tags.
An example of a self-closing tag would be a line break or a horizontal rule.

<br/ > <!--line break-->
<hr/ > <!--horizontal rule-->

 

Attributes

Atributes hold the information that the tag needs. In the link example I used above the attributes are href (hypertext reference which is the source of the file being used by the tag), id which is a unique identifier for this tag  – it’s useful for programming languages like javascript, but can also be used for CSS too. The style attribute is one way that HTML and CSS meet, style is a HTML attribute but the content of it is CSS.

href="google.com" id="MyTestLink" style="color:red;"

Useful Tags

Here are the HTML tags you’ll probably use most often. The WordPress editor adds tags for most of these behind the scenes for you when you add headings or lists, but it’s still useful to know how they work. For a complete list of HTML tags head on over to W3C Schools where you can play with some examples too.

Links

Basic Link:

<a href="google.com">Google</a>

Basic Link to open in a new tab:

<a href="google.com" target="_blank">Google</a>

Link to send an email:

<a href="mailto:thebloggenie@gmail.com">Email The Blog Genie</a>

Nofollow Link:

<a href="google.com" rel="nofollow">Google</a>

Images

Images fall into the self closing tag category.

<img src="https://thebloggenie.com/wp-content/uploads/2018/04/Free-SSL-Certificate-With-Siteground-1.jpg" alt="Install Free SSL Certificate With Siteground" width="1000px" height="628px" />

src – should be set to the location of the image
alt – should include a description of the image for people who use screen readers
width – sets the width of the image, you can use pixels (px) or percentages (%)
height – sets the height of the image, you can use pixels (px) or percentages (%)

 

Tables

<table>
   <tbody><!--table body opening tag-->
      <tr><!--table row opening tag-->
         <td><!--table cell opening tag-->
            This is the first table cell in the top row <!--cell content-->
         </td><!--table cell closing tag-->
         <td>
            This is second table cell in the top row
         <td>
      </tr><!--table row closing tag-->
      <tr>
         <td>
            This is the first table cell in the second row
         </td>
         <td>
            This is second table cell in the second row
         </td>
      </tr>
   </tbody><!--table body closing tag-->
</table>

 

Lists

Unordered List:

Opening tag for unordered list:

<ul>

Closing tag for unordered list:

</ul>

List Item:

<li>List Item 1</li>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
Displays as
  • List Item 1
  • List Item 2
  • List Item 3

 

Ordered List

Opening tag for unordered list:

<ol>

Closing tag for unordered list:

</ol>

List Item:

<li>List Item 1</li>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
Displays as
  1. List Item 1
  2. List Item 2
  3. List Item 3

 

Headings

You’ll be using these in all your posts already, via the dropdown list in the top left corner of the WordPress text editor. If you were to look at the Text tab of the WordPress text editor you’d see these tags around your headers.

<h1>Header 1</h1>
Displays as

Header 1

<h2>Header 2</h2>
Displays as

Header 2

<h3>Header 3</h3>
Displays as

Header 3

<h4>Header 4</h4>
Displays as

Header 4

<h5>Header 5</h5>
Displays as
Header 5
<h6>Header 6</h6>
Displays as
Header 6

 

Others

If you want a horizontal line to display across your screen you can use

<hr />

which displays on the screen like this:


To create a line break use

<br />

which will display on screen like this:

Special characters

W3C Schools has a complete reference to special characters like arrows and mathematical symbols.

 

Examples

I don’t think a blogger’s guide to HTML would  be complete without some working examples. Here is some sample HTML to a few questions I’ve been asked recently.

 

Putting linky badge html for people to copy

It can be a bit fiddly to add HTML to your post for it too look like a tag because WordPress thinks it’s just some HTML you want it to interpret. The most common use for this for non-tech bloggers is for them to leave code for alinky badge for other bloggers to paste into their posts when they take part in a linky. The easiest way to do this is to put the code that you want people to be able to copy in a text area. The HTML for that would look like this:

<textarea style="width:50%;">
   <div align="center">
      <a href="http://www.naptimenatter.com" rel="nofollow" title="Naptime Natter">
         <img src="https://i1.wp.com/naptimenatter.com/wp-content/uploads/2017/02/bc-feature-badge.png?w=1440" title="Naptime Natter" style="border: none;" width="250" height="250">
      </a>
   </div>
</textarea>

Setting Linky Badges to be the same Size

A linky badge normally looks like this

<div align="center">
   <a href="http://www.naptimenatter.com" rel="nofollow" title="Naptime Natter">
      <img src="https://i1.wp.com/naptimenatter.com/wp-content/uploads/2017/02/bc-feature-badge.png?w=1440" title="Naptime Natter" style="border: none;" width="250" height="250">
   </a>
</div>

The height and width are set by the width=”250″ height=”250″ settings. This particular example sets the image to 250 pixels square.

You might get a badge where there is no height or width set:

<div align="center">
   <a href="https://www.myrandommusings.co.uk/" title="My Random Musings">
      <img src=" https://www.myrandommusings.co.uk/wp-content/uploads/2017/01/BloggerClubUK-Feature-Image.jpg" alt="My Random Musings" style="border:none;">
   </a>
</div>

If they’re not set just add them like this:

<div align="center">
   <a href="https://www.myrandommusings.co.uk/" title="My Random Musings">
      <img src=" https://www.myrandommusings.co.uk/wp-content/uploads/2016/06/BloggerClubUK-Badge.jpg" alt="My Random Musings" style="border:none;" height="250" width="250">
   </a>
</div>

As long as you keep the height and width in proportion, e.g. if it’s square the height and width should be the same. If you set them to huge sizes they might look a bit blurred.

 

Laying out more than one Linky Badge

If I need to add more than one linky badge to a post I always use a table. In this example I’ve created a table and set it to fill the available width.

<table style="width:100%">
   <tbody>
      <tr> <!‐‐Start a new row here‐‐>
         <td><!‐‐Start a new column here‐‐>
            <div align="center">
               <a href="http://www.naptimenatter.com" rel="nofollow" title="Naptime Natter">
                  <img src="https://i1.wp.com/naptimenatter.com/wp-content/uploads/2017/02/bc-feature-badge.png?w=1440" title="Naptime Natter" style="border: none;" width="250" height="250">
               </a>
            </div>
         </td><!‐‐Close the column here‐‐>
         <td><!‐‐Start a new column here for the next badge‐‐>
            <div align="center">
               <a href="https://www.myrandommusings.co.uk/" title="My Random Musings">
                  <img src="https://www.myrandommusings.co.uk/wp-content/uploads/2016/06/BloggerClubUK-Badge.jpg" alt="My Random Musings" style="border:none;" width="350" height="250">
               </a>
            </div>
         </td> <!‐‐Close the column here‐‐>v
      </tr> <!‐‐Close the row here‐‐>
   </tbody>
</table> This sample table looks like this:

 

Navigate to link within same page

Creating a link to jump to a different part of the same screen is almost as simple as creating a new link. Firstly, the element you want to jump to needs to have an id attribute. Clicking on the word attribute in the last sentence will make the screen jump to the Attributes section of this page near the beginning of this post. The HTML for the attributes heading looks like this:

<h3 id='attributesHeader'> Attributes </>

Then you need to create a link, and set the href attribute to #nameOfTheElementYouWantToLinkTo. The # means that any text that comes afterwards is an id of another element on the screen.
In this post, the HTML for the attributes link looks like this:

<a href='#attributesHeader'>attribute</a>

Add spaces between lines of text

The add space between elements on screen just use as many

<br />

tags as you need to get the gap that you want. You might find that the WordPress editor has changed it to &nbsp; the next time you view the text editor which is fine. You can use either in the WordPress editor, they’ll both be interpreted in the same way.

 

Summary

So there’s my blogger’s guide to HTML. You now know how HTML is different to CSS and what a HTML tag looks like. I’ve included some examples of HTML that I use often as well as some I’ve been asked for recently.

If there’s some HTML that you’re struggling with and would like a working example or some help with, please leave me a comment or email me at thebloggenie@gmail.com and I’ll update this post.

 

 

The blogger's guide to HTML - how to use HTML in your WordPress blog

 

 

You may also enjoy:

The 3 Best Cookie Consent Plugins for WordPress

5 Habits to Keep your WordPress Blog Running Smoothly

7 Essential WordPress Plugins for Mum Bloggers

My Random Musings

Leave a Reply

Your email address will not be published.