Today, we're going to learn the basics of making a webpage using HTML. HTML stands for HyperText Markup Language, and when combined with CSS and JavaScript, it can be used to make beautiful web sites! HTML's main purpose is to put content on the page (rather than making the web page look nice or dealing with any math or logic on it), so today, we're going to start adding some content to our page.

First, click here to set up the title of the web page and learn more about the head section of an HTML document.

Content - Basic Tags

In HTML, you add content to a page by adding elements. An element typically looks like:
where you have some content encased by two tags. The tags will determine what the content looks like or how it's spaced.

Try to add some content to the page by putting some text in the input box below. You can also choose what type of element you would like to add.

Example 2 - Code



Above is what the code that you've added looks like in HTML. Below is what the code looks like once it's been rendered on the page. How cool is that?

Example 2 - Rendering

You've just made text in different sizes! Before we move on, we also want to say that there are two other very common types of elements, which are called divs and spans. They're both used to separate/group elements to make the code easier to read, but you can't really see that they're there just by looking at the page.

Now that we can add content to our page, click here to make some lists!


In HTML, there are three different ways to display lists of items. You can have an unordered list, where the items are displayed using bullet points, you can have an ordered list, where items are numbered, and you can have description lists, where items are given terms and descriptions. Let's check them out!

Example 3 - Code

<li>I'm a list item in an unordered list!<li>
<li>I'm a list item in an ordered list!</li>
<dt>I'm a description list term!</dt>
<dd>And I'm a description list description!</dd>

Example 3 - Rendering

  • I'm a list item in an unordered list!
  1. I'm a list item in an ordered list!
I'm a description list term!
And I'm a description list description!

Notice the differences between the three different kinds of lists. Next, we're going to learn how to add images to our HTML.


Yes, the content that you add to your page can be more than just text! To add an image, you need two things:

  1. A link to an image (either a URL for an image online, or a path to it from the folder your HTML document is in)
  2. A description of the image that can be displayed in case the image doesn't load

In the code snippet below, try changing the source for an image. To do this:

  1. Go to, a free website that has thousands of high quality photos, and find a picture that you want to add.
  2. Right click on the picture, and click Copy Image Location (if you're on Firefox) or Copy image address (if you're on Chrome) from the dropdown that appears (this is different from just "Copy Image").
  3. On this page, in the code snippet below, remove everything in the input box next to src=, and paste in the link you just found by right clicking in the box and selecting Paste
  4. Remove the text in the input box next to alt= that currently says "Foggy Sunset", and type in a description of the picture you chose.
  5. Click the Change Image button and voila, your image should appear below!

Example 4 - Code

<img src="" alt="" width="200" >

Example 4 - Rendering

Foggy Overlook

The width attribute in the img element above havs been set to 200, so the image will always be 200 pixels wide, and the height will be scaled proportionately. If that wasn't there, then the picture would show up as the size that it was when you copied its link.

When you change the image, you shouldn't see the alternate description that you entered - which is good! That will only be displayed if the picture can't be for some reason.

Now that we have images, let's learn how to create links to new pages.

User Inputs

Even though you'll be the one adding content to your website, there's a good chance that you'll want other users to be able to interact with it, too!

You can collect user input through a number of ways, the most common being input elements.

Every input element has something called a type, which determines what type of information it will accept. This could be text, a color, a date, or something else. Pick a type value from the code below to see what an input box for that type would look like!

Example 6 - Code

<input type="" id="userInput">
<button onClick="printUserInput()" >Print the user's input</button>

We haven't learned about buttons or IDs yet, but for now just know that clicking the button will print the value of the input you entered

Example 6 - Rendering

Feel free to choose different values for the type and enter different values in the resultant input fields to see what will be printed.

Notice how when you try to type in an input box when value="password", the letters are replaced by dots in the box!

If you're giving the user certain choices to pick from, you'll have to make options for each choice with values assigned to them. Try putting different foods in the input boxes below and seeing how that changes the code in Example 7 - Rendering.

Example 7 - Code

<input type="radio" name="food" id="food1" value="">
<label for="food1">Secret Food Option 1</label>
<input type="radio" name="food" id="food2" value="">
<label for="food2">Secret Food Option 2</label>
<button onclick="printRadioButtonValue()">Print Value</button>

Below, you can see how the code above would look once rendered on a webpage. Notice how only the label is displayed next to the button, but we can still access the value of the button. Also, notice how the label and the value do not have to be the same.

Try clicking one of the buttons and seeing what gets printed.

Example 7 - Rendering

Wow! Now you can add content to your website, link other websites to it, and collect input from other users! While there's still a lot more out there, we're going to focus on one more type of element in HTML: buttons.


Buttons are often used to "submit" data when collecting user input, so it's important to know how to create both types of elements. Luckily, buttons are quite easy to create. Let's look at an example!

Example 8 - Code

<button onclick="myFunction()">Click</button>

Example 8 - Rendering

Click the button above and see what happens!

Now that you've seen what the button did, it's important to note that all of the functionality of the button (a.k.a. the color changing) was done using JavaScript in a method called "myFunction()". If you're page doesn't include any JavaScript, then buttons won't be able to do very much.

Websites are normally built using a combination of HTML, CSS, and JavaScript! Later today, we're going to look at more ways to style your website using CSS! Before you move on to this, there's one more topic that we need to go over: classes and IDs

Classes and IDs

You can write an HTML page without using classes or IDs (as you've seen in the previous examples); however, if you want to add any colors, styles, or interactive functions to your page, classes and IDs will be quite useful. Plus, they're super simple to add!

Example 9 - Code

<h1 class="timesNew" id="mainTitle">You're almost at the end of the lesson!</h1>
<h3 class="timesNew" id="subTitle">Congratulations!</h3>

.timesNew {
font-family: 'Times New Roman', Times, serif;
#mainTitle {
color: white;

The code above may look a bit confusing, but don't worry - everything in between the two style tags is just CSS, which you'll be learning later today. For now, just know that the CSS is saying "anything in the "timesNew" class will be written in Times New Roman font, and any item with the ID "mainTitle" will be colored white."

Example 9 - Rendering

You're almost at the end of the lesson!


The above code shows how a class and ID would look in HTML. Any type of element can have an ID or classes.

Congratulations! You finished our lesson on HTML! While we learned a ton here, there's still a lot more to learn in HTML that we didn't get the chance to go over. Back at, we've made a list of resources on HTML that we encourage you to explore! It has more examples of what we did today, plus some links to examples of things that we haven't covered yet!

Even though we only covered a bit of HTML today, you still have enough to get started on an awesome web page of your own!