Basic HTML for Everyone

Ten years ago, you had to know some web coding to protect yourself, but now there are so many editors and plugins available that even knowing the basics of HTML is no longer required to run a blog.

HTML code.

The problem with this is that if you donât know a few basics, you can easily get into real trouble in your blog and have to hire a pricey developer to fix what may be a minor problem. Not only that, but creating changes to your blog such as adding a custom text widget requires a little knowledge.

And if you are experiencing content layout doesnât look right, HTML knowledge can get you back on track.

Here are some very basic HTML pointers for everyone.

Word of warning before writing HTML

I want you to get comfortable using these tags, but you should always remember that if you leave out a portion of the tag, you can cause serious problems.

Each tag has an end and a beginning, and leaving one of those out tells the computer that the tag is still openâŚand all the following code will be included in that tag.

In addition, please type it out. If you copy and paste what Iâve written, you may get problems when the site interprets your code.

Links: The <a> Tag

One of the most important things to know is how to make links. The latest update of WordPress is experiencing some issues with some âno followâ plugins, so while you are waiting for a compliant plugin, youâll need to know how to set up a nofollow link for your sponsored and product review posts.

In the âaâ is the tag, âhrefâ tells the browser where to take the visitor once she clicks the link. The target â_blankâ tells the browser to open that link in a new tab â very important so that visitors donât leave your website completely.

Next, we have the all-important ânofollowâ link that you need to ensure you donât get penalized by Google for compensated posts. (If you are writing a post that is not compensated, you can leave out ârel=”nofollow”â to give the link a boost on Google.) Next comes the title – make it accurate and SEO-friendly. Finally, “</a>” closes this tag.

Images: The <img> Tag

Sometimes youâll want to create text widgets that include images or linked images.

Notice that this is a SINGLE tag, but it ends with â />â to close the tag. In this tag, youâll see âaltâ tag. This is what you fill out after you load your image and is necessary for visitors who are visually impaired. (Make sure you use it to denote what the photo is, and not what you want your SEO to be.) âSrcâ is the link to where your image is actually located. âWidthâ and âheightâ are just that â the size of your image in pixels. This is optional, and should match your actual image size, or else the image will appear warped.

That style tag allows all kinds of sizes and options, but here are these basic ones.

âWidthâ is the actual width of that paragraph. This had created a 200 pixel width paragraph. Make sure your width is NOT bigger than your column or just leave width out to spread text to the size of the column.

âPaddingâ literally puts space around your paragraph. You can add 5 pixels of space just to the right, for example, like itâs done here, if you feel your paragraph is too close to the edge on the right side. You can do the same for padding-left, padding-top and padding-bottom. You also have the options of âpadding:5pxâ to put 5 pixels on each and every side.

âText-alignâ justifies your text within the paragraph. Options are center, left, right and justify which spreads the text out to be even on both sides.

Finally, you can use a paragraph with images and links as well but make sure your images' width fits in your column too. Note that padding is added to that width:

The Link Break Tag: <br />

This tag gives you a one-line return without a paragraph. It can be used inside a paragraph if you want a series of lines where you single line breaks that you select yourself (so that you can even out the lines) and still have a paragraph around it, like so:

<p style="width:200px; padding-right:5px; text-align:center;">Welcome to my blog!<br />Come in and make yourself at home.</p>

Styles

Now that Iâve already shown you some styles, Iâm going to quickly list a few more that are useful for creating those text widgets:

Heading Tags

For SEO purposes, you may want to use critical tags with your siteâs main keywords in text widgets (on your sidebar, footer, etc.) These are heading tags and Google gives more weight to them. For example, your blogâs theme will usually have titles and site name within these tags.

These tags are:

<h1>Text goes here</h1>

<h2>Text goes here</h2>

<h3>Text goes here</h3>

<h4>Text goes here</h4>

<h5>Text goes here</h5>

<h6>Text goes here</h6>

These tags are in size order, with <h1> being the largest. Google gives the most weight to text in <h1>, next weight to <h2> and so on.

Often, <h1> tags are quite large and may have a color. To eliminate that, you can enter something this:

That will give you black textÂ (color: #000;)Â in a 12 pixel font (font-size: 12px;)Â and remove bold (font-weight:normal;). If this does not work, your site may have been coded in a more complex manner and you may simply want to select a smaller heading tag.

Bullets

Bulleted or numbered lists are a great way to show content to your audience. But you might find âweirdâ or inconsistent spacing when you edit them. This is what they should Â look like in your text editor:

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

<ul> means âunordered listâ â this will give you bullets. (If you want to use a numbered list, simply change all the âulâ tags to âol.â) <li> means list item. There are times you'll hit a return and it will create another <ul> within your list or close your list and start a new one in the middle. It should look like some variation of the above, so if you see extra “<ul>” opening and closing tags, you can delete them.

Try Writing Your Own

This will help you get started, but please make sure that you back up your site fully first (including theme) so you can restore.

If you get into trouble with a widget, you can just remove it to figure out where you wrote the wrong code. Finally, feel free to type as normal in your visual editor and compare what you see in the text editor to get a feel for these basics.

If you are interested, here are some of the previous articles on HTML r,

About BuildThis.io

Successful websites aren't just about web hosting and fantastic designs. BuildThis.io is focused on the building blocks that people need in the process - a combination of tools, process, and of course shared experience.