Super Basic HTML Guide

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: