Important HTML tags

Structure Tags:

On this page, we’ll discuss the following tags:
HTML, HEAD, TITLE, BODY, H1, H2, H3…, P, LI, UL, OL

Obligatory Structure Tags:

To be a true HTML document instead of simply a text file, every HTML file must include the tags HTML, HEAD, TITLE and BODY laid out in the structure seen below. All HTML pages use this structure, so you may as well memorize it. Anything you wanted to be visible on the page would do  between the <body> and </body> tags. In fact, every tag we discuss from this point will be assumed to be between the body tags. BTW, in HTML, indentation is purely optional, but we recommend doing it because it ensures that your tags are matched up correctly.

<html>
      <head>
            <title>
                  The name of this page
            </title>
      </head>
      <body>
            All the content on this page
      </body>
</html>

Headline Tags:

To “headline” your content tags, you can use the h1,h2,h3 … tags to create Headings and Subheadings. It’s very important to use these tags to break up your content into manageable chunks. You don’t want your HTML pages to be one long paragraph, or your readers will get tired and probably stop reading. To give you an idea of how these are used in practice on this page, I’ve labeled the headline tags I used for this page in parentheses below. Notice how the headings typically get smaller as you get further away from h1.

Examples of headline tags from this page:

<h1>Important HTML tags</h1>
<h2>Structure Tags</h2>
<h3>Obligatory Structure Tags</h3>
<h3>Headline Tags</h3>
<h4>Examples of headline tags from this page</h4>

Common Grouping Tags:

With the headline tags done, we now have to format all the text that comes after it. The most commonly used tag is the new paragraph tag (p). Without it, all your text will appear in one big unreadable chunk.  It’s simple to use, just sandwich each paragraph with the <p> and </p> tags like so:

<p>
This is the first paragraph… Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>

This is the second paragraph… Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

Another popular way to format content is to place it into a bulleted list. To do that, we use the “List Item” tag (<li>). This one is a bit tricky because you have to envelope the entire list within an extra “container” tag: either the “Ordered List” <ol> or the Unordered List <ul> tags.  Here’s what they look like:

What it looks like:The HTML used:
  • This
  • is
  • an
  • Unordered
  • List…
<ul>
   <li>This</li>
   <li>is</li>
   <li>an</li>
   <li>Unordered</li>
   <li>List…</li>
</ul>


  1. … and THIS
  2. is
  3. an
  4. Ordered
  5. List
<ol>
   <li>… and THIS</li>
   <li>is</li>
   <li>an</li>
   <li>Ordered</li>
   <li>List…</li>
</ol>

How To View HTML Source:

Now I suppose you’d like to see a sample web page that makes use of all the tags you’ve just learned about. No problem, just click here to see just such a sample file. Now, once you’re on the new page, we will want to look over the actual HTML source code that the page is built from. This is called “Viewing the HTML Source Code” or just “Viewing Source” for short. (If you happen to check the source of THIS page, don’t fret if it’s too complex for you at this point, just stick to the example page for now).

There are a number of ways to View Source:

Once you view source, you’ll notice how I’ve indented the HTML to make it easier to read and check for matching tags as mentioned earlier, but it isn’t strictly necessary to create legal HTML.

STOP: IT’S EXERCISE TIME!

Now that you have all the knowledge needed to write your first real HTML file, all that is missing is a suitable text editor. Although you can write text in pretty much any word processor program, I highly recommend using Notepad++ for Windows or TextMate for the Mac. These programs give you a feature called “syntax highlighting” which displays your Content in a different color than your HTML Tags. As you’ll soon see, this feature alone will save you from TONS of headaches later. Here’s a pretty decent tutorial on how to install it. For the CSS step, just create a dummy file called ‘style.css’ on your desktop. PS. make sure to click the HQ button to watch the vid in High Quality.

Video Tutorial: Installing Notepad++

At this point, go back into the test site you created in Lesson 1 and replace all the .html files with VALID html files written from scratch with your new text editor (Notepad++). Simply use the basic HTML structure mentioned above (under Obligatory Structure Tags) as your template, then experiment with the tags you’ve learned so far. Don’t forget to update the name of each page (between the <title> tags)!

Advanced Tactic: You don’t have to re-upload an html file to a server just to preview it! You can just drag an .html file on your computer into an open browser window and it will work just as well. So your workflow should be: make edits in your editor, hit save, then drag the file into a browser and see your changes (or just hit refresh). Uploading takes time and should only be done once you’re satisfied in your changes.

Ultra Tactic: Use your FTP program (FileZilla) to download your site’s entire html folder to your computer. This will now be your permanent “local working copy” of your site. Don’t ever delete it. Anytime you need to make a change to your site, you will already have a copy to work with. Simply drag the relevant local html file to Notepad++ to make your changes, then save it (and preview using the Advanced Tactic above). Once all your files have been updated, you can upload your entire working copy directory back to the website in one shot. This saves you from reuploading each file one by one.

Prev Page: HTML Syntax
Next Page: Links and Images