GrowMap

Map Your Path To Grow Your Business

  • Home
  • About
  • Contact
  • G.A.S.P
  • Press
  • Portfolio
  • GrowMap Services
  • PostsComments

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

January 23, 2018 By Eugene Mekheda 14 Comments

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.

Things you need to know about HTML to work with any CMS

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.

Table of Contents

  • An Important Rule of Thumb for HTML
      • If there’s an opening tag (<>), there should be a closing tag (</>) as well.
    • Headings
    • Links
    • Images
    • Iframes
    • Ordered and Unordered Lists
    • Tables
    • Inline Styles
    • Text Styling Elements
    • Buttons
    • IDs and Classes
    • Divs and Spans
  • To Sum Up
      • Eugene Mekheda
      • Latest posts by Eugene Mekheda (see all)

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.

Opening and closing tags

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:

Header sizes

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>

Editing anchor text in html

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 ” >

Editing images in html

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.

Iframes

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>

Ordered and unordered lists

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:

Tables in html

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.

Inline styles

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>

Text styling elements

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. 🙂

Buttons in html

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.

IDs and classes

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:

Divs and spans

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
My Twitter profileMy Facebook profileMy LinkedIn profile

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.
My Twitter profileMy Facebook profileMy LinkedIn profile

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
Tweet
Share
Share22
Pin32
Share
Share
Pocket
Flip
54 Shares
« Professional Indemnity Insurance for Business – Pointers and Pitfalls
The Challenges of Funding Your Business for Growth »

Filed Under: Blogging Best Practices, Small Business Advice, Web Design / Basics Tagged With: cms, content management systems, web design, website performance

Comments

  1. Nithya says

    April 9, 2020 at 2:03 am

    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.

    Reply
  2. webocity tech says

    January 16, 2019 at 11:53 pm

    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

    Reply
  3. Addy Brown says

    April 10, 2018 at 5:39 am

    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.

    Reply
  4. Sophie says

    March 24, 2018 at 12:57 am

    Hi Eugene,
    Thank you for providing us such a great information.
    This is amazing blog.

    Reply
  5. Mira Edorra says

    February 4, 2018 at 12:47 pm

    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!!!

    Reply
    • Evgen says

      February 5, 2018 at 1:14 am

      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 despisedMy Profile

      Reply
  6. Traveloweb says

    January 31, 2018 at 4:07 am

    Great article about HTML work with CMS. I really like your article and its really helpful and interesting. thanks for sharing this blog.

    Reply
  7. Allison says

    January 28, 2018 at 2:11 pm

    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!

    Reply
    • Evgen says

      January 31, 2018 at 1:34 am

      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 buildingsMy Profile

      Reply
  8. Robin Khokhar says

    January 24, 2018 at 12:07 pm

    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?My Profile

    Reply
  9. zeeshan says

    January 24, 2018 at 10:50 am

    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.

    Reply
  10. jisha says

    January 24, 2018 at 3:31 am

    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?

    Reply
    • Evgen says

      January 25, 2018 at 2:38 am

      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.

      Reply
  11. Indore SEO says

    January 24, 2018 at 2:51 am

    I would like to say that this site is very helpful to me and has great contant.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

CommentLuv badgeShow more posts
You can add a link to follow you on twitter if you put your username in this box.
Only needs to be added once (unless you change your username). No http or @

Search

UPC CODES don't fall for fakes

Categories

Recent Posts

  • 4 Ways To Improve Your Email Marketing Campaigns
  • What You Need to Think About When Building Your WordPress Site
  • The Importance of Relaxation When Starting a New Company
  • Stay Afloat: Reduce Monthly Expenses Using These Tips
  • Free Mentoring: How to Use the Inexpensive CRM Bigin to Increase Income
Don't Miss Your Path to Growth!
Enter your email to receive new
blog posts:

Did MOZ Drop Your Site’s DA?

https://www.youtube.com/watch?v=Iv_cL50MpZA

Popular Posts

What You Need to Think About When Building Your WordPress SiteWhat You Need to Think About When Building Your WordPress Site
4 Ways To Improve Your Email Marketing Campaigns4 Ways To Improve Your Email Marketing Campaigns

Greatest eCommerce Competitive Risks to Small Businesses

https://www.youtube.com/watch?reload=9&v=bmlJmDYaax0

Serpstat: What it Does

https://youtu.be/rjIfKdIWk7M

GrowMap Policies

  • Disclosure Policy
  • Privacy Policy
  • GrowMap Guest Blogging Guidelines

Connect With Growmap

growmap on twitter growmap on g plus growmap on linkedin growmap on pinterest growmap on facebook growmap on stumbleupon growmap on skype

Copyright © 2008-2021 Growmap · Centric Mobile Responsive Theme by StudioPress · Genesis Framework · Site maintaned By MarketingTilt

We are using cookies to give you the best experience on our website.

You can find out more about which cookies we are using or switch them off in settings.

GrowMap
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

You can adjust all of your cookie settings by navigating the tabs on the left hand side. Read our complete privacy policy.

Strictly Necessary Cookies

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.