HTML 101: Your HTML Cheat Sheet | HostGator Blog

HostGator Blog

Web Hosting Made Easy!

Blog / Web Hosting Tips

HTML 101: Your HTML Cheat Sheet

Thursday, July 4, 2013 by

HTML 101 Cheat SheetOnce your website is up and running, you may find yourself wanting to make some small additions or edits. Contacting your designer or a webmaster for every little change can become tedious (not to mention expensive), which is why it’s so helpful to understand some basic HTML. HTML is the language that most websites are coded in – it drives the layout, fonts, colors and other formatting and functionality aspects of your website.

You may be thinking, “That’s great! But I don’t know any HTML.” If you’re in this position, this short cheat sheet will serve as a guide to making basic HTML changes to your website. This way, if you’d like to change some minor formatting on a page, you can quickly make these changes yourself.

If you want to avoid learning HTML, you can use a CMS like WordPress that comes with a built-in WYSIWYG editor. WYSIWYG stands for What You See Is What You Get. It translates your text into html code for you. You can get your own WordPress site here.

What is an HTML tag?

An HTML tag is a snippet of code that tells the website how to read or format your content. HTML tags are surrounded by the < > characters. All HTML tags must be closed with corresponding </ > tags. This tells your website where your formatting changes begin and end.


Where do I make HTML changes?

Before we get started, it’s important to note where these changes get made. In most content management systems (CMSs), you’ll find that each page has two views. One is a design or visual view. This lets you see the page as it will look when it’s posted to your website. The other view is often referred to as the text, code or HTML view, depending on which CMS you are using. HTML changes should all be added to the text, code, or HTML view.

To enter a change, you’ll need to find the section of the page you’d like to change. Simply scroll until you see the text you’d like to alter or the space where you’d like to add new content. There, you can add the appropriate tags. After this, make sure to check the design view or preview the page to make sure everything looks the way you’d like it to.



Make text bold using HTML

To make text on a web page bold, use the HTML tag <strong>. For example, if you wanted to make the sentence, “This is important” bold, it would look like this:


<strong>This is important</strong>


Make text italic using HTML

To make text on a web page italic using HTML tags, you would use the HTML tag <em>. This is short for emphasis. For example, if you wanted to make the sentence “This is important” italic, it would look like this:


<em>This is important</em>


Add a link using HTML

Adding a link is somewhat trickier than simply changing the formatting of your text to be bold or italic. If you’d like to add a link, you’ll use the HREF tag. HREF tags tell the website what text should be linked, where the link should go, and how the link should be opened.


For example, if I wanted the text “Google” to be linked to the Google website, it would look like this:


<a href=””>Google</a>


For contrast, if I wanted the text “Yahoo” to link to the website for Yahoo, it would look like this:


<a href=””>Yahoo</a>


Additionally, if you’d like your link to open in a new window or tab so that users aren’t directed away from your site, you can add some additional information to the HREF tag. For this example, you would tell the code that you’d like to open the link in a new window by indicating that the target is blank. In this instance, the HTML code would look like this:


<a href=”” target=”_blank”>Yahoo</a>


Add a picture using HTML

Adding imagery is a great way to help users connect with your content and become more interested in what you have to say. To add an image, you’ll first need to host that image somewhere online, either on your CMS or on another service. Once you’ve uploaded the image to the place where you’re hosting it, simply add an image tag.

As an example, an image tag should look like this:


<img src=””>


Images are somewhat unique because they do not always have an end tag. The code does not need to know where the image ends – the image itself can dictate that. However, you can link images to a web page. For instance, if you wanted to link your image to your home page, it would look like this:


<a href=””><img src=””></a>


You’ll notice that, in this case, the code for the image simply replaces the text in the HREF tag.

Obviously, these few tweaks only scratch the surface of full HTML coding. However, simply knowing how to handle these simple changes on your own can save you big money by minimizing the need to contact your web designer every time edits must be made. Start with these HTML 101 steps and continue to grow your coding skills as you go!

  • Peter Mead
    4 July 2013 at 9:37 pm

    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.

  • Facebook User
    9 July 2013 at 4:02 am

    Great article

  • malkee
    25 July 2013 at 11:32 pm

    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!