Trevor Hunsaker

A Gentle Introduction to HTML: HTML 101

You're at the very beginning

If you're: A) Not a programmer, and B) have ever wanted to create a web page from scratch, you've come to the right place. I'm here to tell you that you don't have to be a programmer to get started with HTML, and I think you'll have fun along the way.

Now, if you've never seen what HTML looks like, take a moment to look at the source of this web page. In most browsers, using the keyboard shortcut ctrl+U will open up a tab showing the HTML source of the current page. Try it now, and take a minute to just check out the code this article. Try to find this paragraph in the source code!

Hopefully that wasn't too difficult. The strange bits were probably all the tags you saw floating around in there, which look like this: <p></p> (that's an example of a paragraph tag).

What is HTML anyway?

HTML stands for HyperText Markup Language. “HyperText” just refers to HTML's ability to link to other web pages. And a markup language is just a language used to make annotations to a document. In our case, the document is a web page (and you'll often hear people use the term “document” and “page” interchangeably). HTML's annotations are created with tags, like the paragraph example we showed above. That tag just says “what's in here is a paragraph.”

And that's really the basics of HTML: Using tags to define what a given piece of content is. HTML defines a whole bunch of tags you can use to mark up a web page.

A couple basic tags

The <p> is the most common. Here are a few more tags you'll want to know about as you're getting started.

Headings: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Each header tag has a rank, denoted by its number, with <h1> as the highest rank, and <h6> the lowest. Higher-ranked headers are typically rendered larger on the page.

1
<h1>I'm the most importantest heading on the page</h1>

Which, using this page's style rules (an article on style rules is forthcoming), will look like this:

I'm the most importantest heading on the page

Lists: <ol> (ordered list) and <ul> (unordered list). List Item <li>

Often you'll want to mark up a list of items in your HTML. If the ordering of your items matters, use the Ordered List tag, otherwise the Unordered List tag. Each is essentially a wrapper around a group of List Items. A to-do list might be marked up like this:

1
2
3
4
5
<ul>
  <li>Go skydiving</li>
  <li>Make the world's best soufflé</li>
  <li>Win at Yatzee. For once.</li>
</ul>

Which the browser will render like this:

Note: the browser adds the bullet by default. It's something you can change with style rules.

An ordered list might look like this:

1
2
3
4
5
<ol>
  <li>Collect underpants</li>
  <li>???</li>
  <li>Profit</li>
</ol>

Which renders as:

  1. Collect underpants
  2. ???
  3. Profit

Again, note that the browser renders the numbering for you. This is handy if you end up needing to re-order the list, or add an item in the middle; the numbering gets updated automatically.

Emphasis <em> and Strong <strong>

Often you'll want to emphasis a piece of text. The Emphasis tag is typically rendered as italic. Strong is generally bolded:

1
<p>I <em>wished</em> he wouldn't have said that, Ralph always knew how to push my buttons. It made me so <strong>mad</strong>.</p>

I wished he wouldn't have said that, Ralph always knew how to push my buttons. It made me so mad.

Anchor (links): <a>

Linking to other pages is accomplished with the Anchor tag.

1
<a href="http://google.com">Google's Home Page</a>

Which will render as:

Google's Home Page

You'll notice the extra little bit in the opening tag, that “href” bit? That's called an attribute. Typically (thought not always) attributes appear in name-value pairs, with the name of the attribute followed by an equals sign, followed by the value for the attribute enclosed in quotation marks. So in the example above, the value for the href attribute is “http://google.com”. (In case you're wondering, href stands for HyperText Reference.) This is the address the browser will navigate to when the link is clicked. And the text between the opening and closing tags is what will become the link.

Image: <img>

If you'd like to include images in your document, you use the <image> tag. It uses some attributes, and is different from the previous tags we've seen, in that it's self-closing.

1
<img src="/images/bird.jpg" alt="Bird flying in blue sky" />

The attributes in that tag are as follows:

And there's your introduction to the basics of HTML. Now to practice: try out some exercises.

If you have any questions, please feel free to email me: trevor@saturdayplace.com. There are a few more blog posts planned along these lines for complete beginners. Let me know if you'd like me to cover something specific. I'm also writing an eBook with the same audience in mind.

Web Dev 101

More free lessons delivered to your inbox!

You might want to subscribe to my newsletter. I'm writing a complete guide to web development for beginners, and subscribers get notified when there's an update.