Share:

HTML Tags Cheat Sheet

HTML, or Hyper Text Markup Language, is a programming language used to create the display seen by the end user. Or more simply put, to arrange things in the computer window for people to view.

HTML is straightforward and simple to learn. A lot can be accomplished with just a few common commands. Start with any text editor. Most computers will come factory equipped with Wordpad or Notepad, either will work fine. Do not use Microsoft Word or Works, as they are not strictly text editors. Open a text editor and begin with a blank page. Save the page as a .htm or .html document before beginning, then save and check each step of the way before moving on.

All HTML commands are enclosed in brackets, < and >. Within the brackets are a set of display properties, or instructions for the browser. The first and last thing on your page should be and .

Web pages have two parts, a head and a body. Inside the HEAD command at the top of the page, the DOCTYPE can be defined (this is not strictly necessary, the page will work without this definition) and link to any other files that will be used, like javascript and CSS. The page title goes here plus any metatags, description or keywords. For the purposes of this exercise, leave the head section empty, since it does not display on the page. Just type the section opener and closer: and .

After closing the HEAD section, open the section. Some basic HTML defaults are predefined, such as white page color, black text and font style, so skip defining the body style out and let’s get straight to the elements that will be displayed on the page. These are the most common tags and properties for those tags. Remember, everything between the opening and closing tags will have the attribute of that tag

Paragraphs: There are several options to make a line break, or separate paragraphs. You may use the paragraph command

. This will result in too much space between lines for something like an address. For a one-line break, use the break command
. This is an exception to the open and close rule: You do not need to close a
tag.

Fonts: To change the font display, set your properties, like color and size.

Some other font commands you can use anywhere in the document (remember to close the tag after the text you want to change):

strong: bolds text

u: underlines text

em: italicizes font

Images: To place an image on the page, the image must first be uploaded to a location and then drawn from that source. An image command looks like this: . This tag is another exception and does not require a closing command. It is self-contained and doesn’t influence anything that follows.

Links: To make a clickable link, a command that begins with “a href” is needed. Click here to go to Google.com will create an active link to google.com. The addition of TARGET=”_BLANK” opens the link in a different window. This command MUST have a closing. Without an ending tag, it will make a mess of the rest of the document.

That covers the very basics. Here are some references for more detailed instructions: