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>
<sub>subscripted </sub>
<sup>superscripted </sup>
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.
Eugene Mekheda
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
For someone like me who has very little knowledge about HTML, I found your article to be very helpful. I like the fact that it is explained in an easy way with the pictures. I shall recommend this page to this my friends who have a hard time understanding such things.
Thanks for sharing relevant information about html . html stands for hyper text markup language and basics of any web designing if you are web designer then you should have knowledge of html
Great Work…
I really liked your article as I was having basic knowledge of HTML but your article has given me more information as how to work on any CMS by using HTML.
Thanks for sharing this.Keep it up.
Hi Eugene,
Thank you for providing us such a great information.
This is amazing blog.
Hi Evgen,
Great tutorial! I noticed that you may be used CushyCMS to modify pages that already exist. Can CushyCMS be used to create pages as well??
Advance thanks!!!
Hey Mira,
Don’t recall ever using the builder you refer to. For my personal needs I use Elementor builder for WordPress now though.
Cheers,
Evgen
Evgen would love you to read ..Nostalgic feelings about the times you despised
Great article about HTML work with CMS. I really like your article and its really helpful and interesting. thanks for sharing this blog.
Wow, this post was extremely informative. We hired someone to upgrade our website a few months ago and well, long story short, I have ended up doing most of the work. I have basically had to learn everything about building and maintaining a website from scratch and am still trying to learn and read stuff about it every day and it’s a bit overwhelming. I have bookmarked this site and when I have time so that I can refer to it when working on our site. I’m still constantly changing things on the website to help our ranking (tags, meta titles and descriptions, content, etc.).
I did have a few questions if any experts could weigh in, I would appreciate!
I did have a questions regarding h1 tags. I know that can be used to help with SEO, but how many per page are acceptable if your page has different sections? Our homepage has sliders with each service we provide and each one has an h1 tag assigned, but should I change them to h2? Should our company name be the H2 tag and what we do be the h1 tag to help with SEO?
What’s the overall consensus on using stock photos? Our industry is very photo-rich (i.e., it’s not people sitting and doing paperwork at a desk). We feel having real images of our company at work gives us a slight edge over our competitors as most of their sites use stock photos (and very little), plus, they’re cool photos. I have read that stock photos are typically higher quality and could help with SEO, but I wasn’t sure if it really mattered.
Thanks in advance to anyone who answers!
Hey Alison,
Thanks for a great comment!
Sorry to hear that you had to do all the work yourself.. But I think these new skills will definitely be useful in the future.
Let me see if I can help.
1. The generally accepted best practice is to have one h1 tag per page. And if you have several sections of same importance in your content – use h2’s.
In my opinion, it also helps user-friendliness. It’s easier to navigate and to quickly grasp the hierarchy of content importance through different headings.
But overall, the on-page factors have lost a lot of their influence according to recent studies. Things that correlate with rankings stronger at the moment are:
– behavioral factors;
– links pointing to your site;
– loading speed;
– mobile-friendliness;
2. Regarding the photos. In my opinion, it’s better to use custom photos or illustrations since they kind of have more soul.
Stock images can work as well, especially if you customize them a little and if you don’t have the resources to create quality photos of your own.
In terms of SEO, honestly, I don’t think it’s that important to search engines. Just follow the best practices in terms of formatting files and alt tags.
But quality visuals do contribute to better user experience and therefore to higher engagement (lower bounce rates, more shares, comments, etc). And this is more likely to help your marketing efforts that way or another.
So if I had to give a piece of advice, not analyzing your particular case, I’d say that you should just make sure that the visuals are relevant and bring value to the users.
Hope that helps!
Feel free to get in touch with me on any of the social media I’ve added to the author bio in this post. I’ll be happy look deeper into it and see what I can do for you 🙂
Evgen would love you to read ..Industrial buildings
Hi Eugene,
When I started learning web development, the first thing that learned was HTML and until today I am using it to make my work easier.
You have written an amazing post.
I really appreciate your effort in writing this
Keep it up.
And have a good week ahead.
Robin Khokhar would love you to read ..How to become a digital nomad?
it is a great site of learning for me. i really appreciate your work. this site contains enough material of learning and also I have learned from this.
Thanks Eugene for sharing your valuable insights with snapshot this was really useful, i just wanted to know if we can create an e commerce website just using HTML and CSS code?
Hey Jisha,
Thanks for your comment .
To build an ecommerce website with billing and shipping modules you’d need more than just HTML and CSS. I’d recommend looking into solutions like PrestaShop or Magento.
I would like to say that this site is very helpful to me and has great contant.