Things You Need to Know About HTML to Work with Any CMS

When you buy a car, you don’t necessarily need to know how to take its engine apart and put it back together. But it helps if you can change its tires and oil yourself. The same principle applies to the HTML code on your website.

You can absolutely have a website and get by without touching HTML code. But sooner or later, there will be annoying little issues that will stand between your site and perfection.

Some headings might be acting up, the links you add could apply to the wrong text, or your lists might not format well. All you need to do sometimes is tweak the HTML a little bit to make your page or post shine.

If I were to stick to the car analogy, knowing HTML is like knowing how to drive manual gear. You can sit behind any wheel and go without worrying too much about the peculiarities of a particular model.

In this post, I’ll teach you the basics: how to work with headings, lists, text styling elements, tables, links, images, iframes, etc. But there is something you need to know before we get started.

An Important Rule of Thumb for HTML

HTML or (hypertext markup language) is used for creating almost any page on the web and is built of opening and closing tags. And the rule of thumb you should always follow to keep your content and layouts clean is:

If there’s an opening tag (<>), there should be a closing tag (</>) as well.

As you can see, the division symbol indicates that you’re closing the tag. And look—we just learned the first fact about HTML. That wasn’t hard at all. Now that we have learned not to leave tags open, let’s proceed to other, more interesting information.

Headings

Headings are used to divide and liven up content. They help you bring your points to the reader and generally make your content easier to comprehend.

It used to be super important to use headings in the right way for the sake of on-page SEO. But according to a recent study, search engines have become much smarter, and now you can just stick to using text in headings naturally.

The h1 tag is the biggest heading and is usually used in pages’ names. The headings from h2 to h6 descend in size.

Here’s how you’d create headings in HTML:

<h1> H1 heading </h1>

<h2> H2 heading </h2>

<h3> H3 heading </h3>

<h4> H4 heading </h4>

<h5> H5 heading </h5>

<h6> H6 heading </h6>

And here’s how they’d differ by size on the front end of your site:

Links

Almost any website’s existence revolves around links, backlinks, and anchor text because these are among the most important factors for ranking higher in search.

And at this point, it’s hard to imagine a text editor in modern CMS without a button that creates links.

But I’m sure your machine has failed you numerous times and your links get added to the wrong anchor text. Or you need to move your anchor text by just one character, which can be tricky. So sometimes it’s easier to go ahead and edit in HTML.

Here’s how you’d edit anchor text with an <a> tag:

<a href=”your_link_here”>anchor text here</a>

You also can set a target in which the link will open. For example, if you want it to open in a new tab you’d add the tag like this:

<a href=”your_link_here” target=”_blank”> anchor text here</a>

Images

Even though CMS text editors have come a long way already, images added with their media managers are often hard to move inside the content. It is difficult to manipulate them, edit their dimensions, etc.

To save you some stress, any time you’re struggling with manipulating an image, switch to HTML editor and add your picture like this:

<img src=”url of your image here” alt=”text that will appear if image doesn’t display for some reason ” >

Iframes

An iframe is like a window from your site to someone else’s through which you can display content. Say that you need to take a YouTube video and neatly display it on your site.

Your goal is to illustrate something in order to keep visitors on a page longer, rather than redirecting them to YouTube. You’d use an <iframe> tag for that.

A ready for use iframe looks like this:

<iframe src=”link to what you’d like to display”> some text here, if you want to have text before the iframe content</iframe>

Big resources such as YouTube, Vimeo, Twitter, and Facebook all have an option to share video in an iframe format. So you can use this strategy in your content without any additional editing.

Ordered and Unordered Lists

There are two kinds of lists at your command at any time: ordered lists and unordered lists. Here are their HTML tags:

<ol> ordered list here </ol>

<ul> unordered list here </ul>

The list items for both list types are added the same way:

<li> list item content </li>

So a ready for use ordered list would look like this:

<ol>

<li> I list item </li>

<li> II list item </li>

<li> III list item </li>

</ol>

An unordered list would look like this:

<ul>

<li> I list item </li>

<li> II list item </li>

<li> III list item </li>

</ul>

Tables

Tables are a bit more tricky, so you’ll need more concentration for this technique. But once you figure it out, the process will stick with you, kind of like riding a bicycle. Any table is contained within a <table> tag, e.g., <table>content of the table here</table>.

Inside the table tag,  you can add several opened and closed table row tags like this: <tr>table column tags here</tr>.

And inside the table rows you want to add table data (the cells), which are added like this: <td>cell data here</td>.

However many <td> tags will be in each <tr>, that’s how many columns will there be in the row. For example:

<table>

<tr>

<td>Jill</td>

<td>Smith</td>

<td>50</td>

</tr>

<tr>

<td>Eve</td>

<td>Jackson</td>

<td>94</td>

</tr>

</table>

And here’s how the result would look:

Inline Styles

Don’t tell any professional coder or programmer that I taught you this! But if you need to style your elements right now and you don’t have access to the CSS files of your site, you can use inline styling.

Inline styles are not good for your website’s management and maintenance. In the future, it will be much harder to find out where on earth a site gets these styles, especially if a new person is taking over a project.

So use inline styles with caution and only if there’s no one around to implement a better fix to your issue.

You can add any style declaration to almost any element directly in HTML code. Inline styling is a dirty hack. It’s not the most sophisticated solution for your styling needs, but in an emergency, it gets the job done.

For example, you have a paragraph that you want to be colored differently from all of its fellow paragraphs. And you want it to move to the right by 30 pixels.

Your code for these changes will look like this:

<p style=”color:orange; margin-left:30px;”>Your paragraph text here</p>

So inside an opening tag you add style=””. And between the braces add your CSS style declarations, such as margins, paddings, colors, and borders.

Text Styling Elements

You can also add pretty much any text styling tags directly in HTML when you need to eliminate some issues caused by default CMS editors’ imperfections.

Here are the most common text styling tags:

<b> bold text here</b>

<i>text in italics here</i>

<u>underlined text here</u>

_subscripted

^{superscripted}

Buttons

To this day, adding a button in most CMSs without any plugins or modules might be a challenge. Luckily there’s an HTML tag for this process. Use  the <button type=”button”></button> tag to create simple buttons on your pages quickly.

Put your button text between the opening and closing tags. If you want your button to open a link, put it inside a <a href=””> tag like this:

<a href=”your link here”><button type=”button”>Click Me!</button></a>

You can also apply your inline styling and link targeting knowledge from earlier in this article. 🙂

IDs and Classes

In case you need to apply certain styles only to a specific HTML element or a narrow group of elements on your site, you can use selectors such as IDs and classes.

An ID is a selector you add to one HTML element in order to later add styles for it into CSS. And you can add a class to as many elements as you need in order to add similar styles or functions to them later.

If you’re just creating a simple blog, there’s no reason to add custom IDs and classes to many of your elements.

These selectors are more of an advantage for big projects with tons of code changes going on all the time. Yet they’re worth knowing.

Divs and Spans

Think of div and span tags as the building blocks for your page. They are among the most important elements when creating layouts on any page, so it’s important you know how they look and how to use them.

An important fact to keep in mind is that elements such as <p>, <h1>, and <div> take up the whole row, while inline elements like <span> take up only as much space as their content requires.

Coders use spans and divs on a very basic level to separate content sections and create layouts. So you’d add your lists, paragraphs, images, forms, and all kinds of other content inside these tags.

Here’s how they look on the front end:

You can read more about using block and inline elements here.

To Sum Up

Now you know the most important HTML tags and how to use them in case of a CMS emergency. But if you’re still craving knowledge, you can check out all of the current tags here. In case I’ve missed something, feel free to share your HTML hacks and favorite tags for CMSs below.

The following two tabs change content below.

• Bio
• Latest Posts

Eugene Mekheda

Marketer

Right now Eugene does all kinds of marketing work for his clients. In the past, he worked in advertising, tech support, and journalism, but found himself more drawn to marketing and copywriting.

Latest posts by Eugene Mekheda (see all)

• Things You Need to Know About HTML to Work with Any CMS - January 23, 2018
• Must Have SEO Toolbars and How to Use Them - February 1, 2017