Basic HTML Everyone Should Know

Originally published on Music Meets Social.

Okay, okay, I know you’re thinking “why do I need to know this? Developers aside, everyone uses a CMS, so HTML isn’t important.” And I definitely see your point. I do. I used to be in your camp. Or rather, I knew I should learn some, but I didn’t actually get to the learning stage. Then I took a class that had everything I didn’t know I wanted to learn into one semester on Tuesday and Thursday afternoons, and changed the course of my career aspirations. (I’m not kidding. It was a wonderful class!) I’m by no means a coding wizard, but I do have a (working) website that I’ve coded and designed from scratch. Through that, I’ve learned that it really is important to know at least what certain tags mean.

Why it’s important to know HTML basics:

  • a better understanding of SEO at the page level
  • can understand various concepts better because of your knowledge
  • can know enough to not screw up a web page (IT will thank you)
  • when posting comments or posts when a CMS doesn’t allow you to bold, italicize, or embed images

And that, my friends, is invaluable.

Enter my basic HTML guide (with an infographic!) that will give you a basic understanding of HTML that will give you an edge up on others.

Side note: I’m also working on a companion post for CSS basics. Stay tuned!

HTML cheat sheet

(Click on the image to view and save a full-size version.)

The Basics

  • HTML means HyperText Markup Language
  • It’s the building block of a web page
  • Made up of elements within < >
  • / denotes a closing tag (ie, <body> text </body>). Every tag you open, needs to be closed, with a few exceptions.
  • The most basic coding language, as opposed to JavaScript, PHP, Flash, and others
  • Often used in tandem with CSS (Cascading Style Sheets, explained in more detail below)
  • Best practice is to use all lowercase for tags, though for HTML and CSS it’s not necessary. (Always go with best practice!)
  • Can be written in programs like Adobe’s Dreamweaver, but there are also free programs like Text Wrangler and Text Edit (standard on OS X)

Tags

Basic

<html> </html> shows the browser that the document is an HTML document

<body> </body> denotes the body of the document

<head> </head> the header of the document, which has metadata, title, and a link to a CSS page, if applicable

<div> </div> think of divs as containers, or boxes, that help shape the page’s layout. These can be layered within each other to help organize your page, but be careful to keep the layers straight!

Text

<h1> </h1> “h” stands for heading, and there are 6 levels (h1-h6). If you’re knowledgeable about SEO, you’ll know that headings are important for a page’s rankings; this is how that’s done!

<p> </p> This stands for paragraph, which is pretty self-explanatory. It’s used to create separations between paragraphs.

<br> Creates a blank space in the document. Useful for between images, text, or other elements. It’s important to note that there is no closing bracket; it stands by itself.

<ul> </ul> This is used to create unordered lists.

<ol> </ol> This is used to create ordered lists.

<li> </li> These are placed between the list tags, for each point on the list.

dreamweaver HTML example

(Click on the image to see a larger view.)

Special

<a href> </a> This tells the browser there’s a link. You’ve seen links that are a different color and underlined? Placing that text between the opening and closing tags allows the words to take the place of the actual URL. This creates the standard bright blue and underlined link, but it can be changed with CSS. (That being said, best practice is to keep it underlined and use a different text color to minimize confusion.)

<img src=” “> This tag is used to embed images within the document. This can either be a link to a website like Imgur, or the file/folder path on your server. (One of the reasons why it’s important to maintain paths!)

Within the img tag there are options for size (width and height), and something called alt text. If you’re familiar with a CMS like WordPress, you’ve probably noticed an option “alt text” when uploading images. This is what appears if the picture can’t load, but it’s also crucial for accessibility and also helps boost SEO.

A full img tag looks like this:

<img src=”http://www.example.com/image01” alt text=”descriptive bit about image01” width=”160” height=”180”>

Code Broken?

If your page doesn’t look right, there’s a few things to check.

  • closing tags
  • semi-colons/colons
  • quotes
  • misspelled tags
  • incorrect links

If all else fails, or to save time, try the W3 Validator. It can sometimes give false warnings, but it’s still a great tool. (And you can just ignore the false warnings.)

Resources

Here are some great resources I’ve used to learn, refresh my memory, and to write parts of this post.

  • W3 Schools - a great resource that’s organized into clear sections, and has information on anything from basic HTML to JQuery.
  • “Try it Yourself” on W3 Schools - type code into one box, and it shows up in the other like it’d appear in a browser. It’s a great tool for playing around with new concepts!
  • Text Wrangler - I mentioned this above, but it’s a great free tool to code. It’s not as testing-friendly as programs like Dreamweaver, but this is the initial program I learned on and it’s great for when you’re not sure if you want to pay for a program.
  • HTML & CSS  - I got this book for Christmas last year, and it’s still a resource I’ll pull out. Duckett writes in plain language about all different aspects and provides examples. (Paperback is also under $20 - you won’t regret it!)

Is there anything I could help you understand better?

If you’ve learned some HTML, what has been the biggest benefit?

Please note that some links on this page and throughout the site are affiliate links. Thank you for helping support this little blog!