As everyone in tech learns early in their training, HTML is a coding language that describes what each part of a web page is to your browser. This language breaks information down into chunks called elements, most of which begin with an opening tag and end with a closing tag that specify what kind of information is being conveyed. The tags make each piece of information “complete,” and they help designers and developers to see where each element begins and ends.
But as you might imagine, different tags relay many different types of information—and some are easier to remember than others. You’ll probably remember early on that <p> is for paragraph, but it might take you a few tries (and maybe a few debug sessions) to remember how to link to an external stylesheet with <link rel=”stylesheet” href=”http://www. example.com/css/stye.css”>.
When you’re just starting out in HTML, it can be tricky to remember which tags are used where, or whether some elements need opening and closing tags (like links) or just one self-closing tag (like an image), or what the correct spelling or abbreviation is for each tag.
Below you will find a downloadable HTML Tags Cheatsheet with a list of all the tags you need in order to get started in HTML, as well as notes on how to put ‘em to use!
Use our cheatsheet to build your own website or fix something in WordPress. Print it out, tape it up, and get your HTML on! While we promise you’ll get this all down eventually, it definitely helps to have a bit of support in the beginning.
And while you’re getting used to HTML, here are some quick tips to keep you ahead of the game!
Write opening and closing tags at the same time.
While it’s tempting to create an opening tag and then get right into the text of your headline or the body of your paragraph, chances are pretty good that you’ll eventually forget your closing tag. (It happens to all of us!) To prevent this, get in the habit of writing your opening and closing tags first, like this: <h1></h1>. Then you can put the content in between them without having to worry that you’ve left something out.
Space out elements appropriately.
Don’t forget to give each element its own line of code! Getting into the habit of spacing out your HTML makes it easier for you to navigate. You’ll be better able to identify coding errors, insert new code or remove old code, and make sure more complicated elements like tables are built correctly.
Remember that case matters!
Modern versions of HTML are case sensitive! This means that <H1> with an uppercase H and <h1> with a lowercase h mean two different things (or more accurately, the latter is an opening headline tag and the former means…nothing). All HTML tags must be lowercase. Get into the habit of paying attention now so that you can avoid this common coding problem down the road when you’re working with more complex projects.