HTML 101: Master Website Management With This HTML Cheat Sheet

Web Hosting Tips

HTML 101 Cheat Sheet

Most Common HTML Tips and Tricks

Understanding the basics of HTML will help you develop more confidence when managing your website. When you want to make simple site changes you don’t want to have to outsource the task every single time. Not only will it be time-consuming, but it can also get expensive fast.

This guide was written with complete beginners in mind. Even if you’ve never touched a piece of code in your life, you’ll be able to easily make HTML changes by the end of this post.

A little HTML knowledge can go a long way. Below you’ll learn the basics of HTML, and a few of the most common post and site formatting options you can use when coding in HTML.

Recommended WordPress Hosting

What You Need to Know About HTML

HTML is also known as Hypertext Markup Language and is the main programming language the web is built upon. Lucky for us it’s also one of the simplest to learn.

By knowing basic HTML commands you’ll be able to accomplish things like:

  • Easily embed and add analytics code to your site.
  • Take care of image alignment issues.
  • Properly format your post for improved readability.

If you’re using a CMS like WordPress, then you can edit your HTML code by clicking on the Text tab on your posts and pages.

edit text in wordpress

If you aren’t using a CMS, then you’ll need to locate your site’s HTML files, which can typically be found by logging into your host and locating your site’s files.

Common HTML Tags

For any piece of code, there are opening and closing tags. The opening tag will start the command and the closing tag will end it. The text in between the opening and closing brackets will be formatted based upon the HTML tag you used.

It looks like this: <p>This is a real sentence.</p>

The first <p> tag starts the sequence and it ends with the </p> tag. The final / in the closing tag is very important, without this tag your code won’t function properly and will lead to formatting errors.

Being able to identify where these tags open and close will help you edit your code better and know where to place certain site elements, so they don’t end up breaking your site.

Some of the most common HTML tags include:

  • <strong> </strong> – This tag will bold your text or headlines.
  • <em> </em> – This will italicize your text.
  • <body> </body> This is the body of your html document.
  • <a> </a> – This tag will allow you to insert links.
  • <center> </center> – This tag will align your text to the center of the page.
  • <head> </head> – The code within here will make up the header of your site.

There are dozens of other HTML tags you can use to modify your site. Below we’ll show you how to use these common HTML tags.

HTML Headings

One of the most popular formatting tips when writing for the web is to organize your text using various headings. These will decrease in size and help give your post a logical structure.

The most common headlines you’ll use are as follows:

  • <h1> </h1> – This tag will typically surround your page or post title.
  • <h2> </h2> – Your main headlines within the post will typically use the h2 tag.
  • <h3> </h3> – Headlines within the h2 tag will use the h3 tag.

Using the above headline structure will give your post a logical structure and make it easy for your readers to find the information they’re looking for.

HTML Tips and Tricks for Beginners

Now it’s time to show you how to put the above information to work. Below you’ll learn how to properly format your text using the HTML tags highlighted above.

Formatting Your Fonts

If you want to make certain portions of your text stand out, then the tags below will help you out. You’ll learn how to bold, italicize, and underline your existing text.

  • <strong> </strong> – This will bold your text.
  • <em> </em> – This will italicize your text.
  • <u> </u> – This will underline your text.

The above tags can be used within your existing paragraph tags to change the formatting of certain words and phrases, and will look like the following:

<p>This is a sentence that has <strong>bold text</strong>, <em>italic text</em>, and <u>even a bit of underlined text</u.</p>

Add a Link to Your Content

If you’re writing for the web then you’re probably going to be placing a lot of links within your content. To add a link you’ll be using the <a href> tag. You’ll also need to include the URL of the site you want to link to.

For example, let’s say you wanted to link to HostGator.com using the text 'visit HostGator'. The code would look like this: <a href=”https://www.hostgator.com”>visit HostGator</a>.

The site you want to link to will appear within the quotations, while the text that you want to be hyperlinked will go within the <a href=””> and </a> tags.

Add a Picture to Your Site

Adding images to your site will help users connect with your content and make it more interesting to read. Or maybe you want to add a few images to your site’s home page or about pages. Regardless of why you want to insert an image, you can do it with the code below.

The image tag is <img src=” “>. Notice that there is no end tag for the img command.

In order to locate an image, you’ll need to upload that image somewhere online. If you’re using a CMS you can upload the image to your backend, or you can host the image anywhere else online, just make sure there’s an active URL where you can visit the image.

The finished image code will look like this: <img src=”http://myimage.com/thisismyimage.jpg”>.

Align Text

Sometimes you want your text to align to the left or right, or align itself to the center of the page. It’s really frustrating when you try to use the alignment option in an editor and they simply won’t work. With the tips below you’ll be able to edit the HTML code by hand, so it justifies exactly how you want it.

To align your text you can use the following commands:

  • <p align=”left”> </p> – This tag will left align the text within the p tags.
  • <p align=”right”> </p> – This tag will right align the text within the p tags.
  • <p align=”center”> </p> – This tag will center align the text within the p tags.

Add Blockquotes to Your Site

Blockquotes are a great way to break up the formatting of your content and highlight quotes in a unique manner. This will help to create a separation, so readers can tell you’re quoting someone else.

Using block quotes is pretty straightforward. Just add the <blockquote> </blockquote> tags to any content you want to format. Everything within the tags will be given the blockquote formatting.

Add Bulleted Lists to Your Content

Bulleted lists will allow you to break up your content, and create non-numbed lists. This is great for summarizing key points within your content.

To use bulleted lists you’ll need to use the <ul> tag to define an unordered list, and the <li> tags to define every element of the list. It will look like the following:

<ul>

<li>This is your first item.</li>

<li>This is your second item.</li>

<li>This is your third item.</li>

</ul>

Hopefully the above tips will help you start making simple HTML changes to your site. If you have any questions about using the above commands and tags, please ask away in the comments below.

5 thoughts on “HTML 101: Master Website Management With This HTML Cheat Sheet”

  1. Thanks for this, it is always good to have the basics readily available. This is bread and butter stuff if you have any sort of presence on the web now days.

  3. Once you get the gist of it, HTML is mostly research and common sense. The errors you make are usually typos, but finding them can be rough!

Comments are closed.