Super Basic HTML Guide

| June 16th, 2011 | Last Updated:

I tend to forget the beginners with my writing. So I’m going to take it way back momentarily to the basics.

How to Create a Text Link

Code

<a href="http://website.com/">Check This Site Out</a>

Demo

Check This Site Out

How to Display an Image

Code

<img src="http://website.com/images/kittens.jpg" alt="Kittens" />

Demo

Kittens

How to Create an Image Link (Combining What We Just Learned)

Code

<a href="http://website.com/"><img src="http://website.com/images/kittens.jpg" alt="Kittens" /></a>

Note: You can also put text and images together in a link.

Demo

Kittens

How to Make Text Bold

Code

I do believe the word is <strong>they're</strong>, not there or their.

Demo

I do believe the word is they’re, not there or their.

How to Make Text Italic

Code

I do believe the word is <em>they're</em>, not there or their.

Demo

I do believe the word is they’re, not there or their.

How to Create a Paragraph

Code

<p>Goodnight. Today was a beautiful day, wasn't it?</p> <p>Night. Today was a beautiful day.</p>

Demo

Goodnight. Today was a beautiful day, wasn’t it?

Night. Today was a beautiful day.

How to Break and Return

Code

I'm not really.<br /> Sure, if I know.<br /> How haikus work.

Demo

I’m not really.
Sure, if I know.
How haikus work.

How to Use Header Hierarchy / Page Structure

Code

<h1>Domestic Animals (Title of Page)</h1> On this page we'll discuss various domestic animals. <h2>Kittens (Main Sub-topic)</h2> Kittens are good pets for indoors and outdoors. <h3>Brown Kittens (Sub-topic of Main Sub-topic)</h3> Many people like brown kittens. <h2>Puppies (Another Main Sub-topic)</h2> Puppies are better pets for outdoor play. <h3>Brown Puppies (Sub-topic of Another Main Sub-topic)</h3> Many people like brown puppies.

Note: You can use headers all the way to h6.

Demo

Domestic Animals (Title of Page)

On this page we’ll discuss various domestic animals.

Kittens (Main Sub-topic)

Kittens are good pets for indoors and outdoors.

Brown Kittens (Sub-topic of Main Sub-topic)

Many people like brown kittens.

Puppies (Another Main Sub-topic)

Puppies are better pets for outdoor play.

Brown Puppies (Sub-topic of Another Main Sub-topic)

Many people like brown puppies.

How to Create Unordered Lists

Code

<ul> <li>Milk</li> <li>Eggs</li> <li>Cheese</li> </ul>

Demo

  • Milk
  • Eggs
  • Cheese

How to Create Ordered Lists

Code

<ol> <li>Milk</li> <li>Eggs</li> <li>Cheese</li> </ol>

Demo

  1. Milk
  2. Eggs
  3. Cheese

How to Create Sub-lists (List Inside of a List Item)

Code

<ul> <li>Breakfast Stuff <ol> <li>Milk</li> <li>Eggs</li> <li>Cheese</li> </ol> </li> <li>Lunch Stuff</li> <li>Dinner Stuff</li> </ul>

Demo

  • Breakfast Stuff
    1. Milk
    2. Eggs
    3. Cheese
  • Lunch Stuff
  • Dinner Stuff

How to Use Divs (Should Be Used 9 out of 10 Times Over Tables)

Code

<div>Anything can be put inside of a div! However, it won't do much, but sit there and wait to be styled with CSS. Divs are a web designer's best friend and are useless until you learn CSS...</div>

Demo

Anything can be put inside of a div! However, it won’t do much, but sit there and wait to be styled with CSS. Divs are a web designer’s best friend and are useless until you learn CSS…

You’re always welcome to post HTML and CSS questions for me in the Web + Tech Answers forum.

Also, here are some highly respected places to learn online: