HTML 101

How Does HTML Work?

Web browsers read HTML documents from web servers and display the contents written in the file. An HTML document is simply a text file with a .html extension (like index.html). Browsers read these files from top to bottom, displaying elements in the order they appear.

The basic building blocks of an HTML document are:

Where Do I Start?

Let's start be creating a simple web page. To do this, follow these instructions:

  1. Open Windows Explorer (on a PC) or Finder (on a Mac)
  2. Create a new folder
  3. Create a new file inside the folder, and name it index.html
  4. Open the file in a text editor
  5. Open the file in a web browser

Note: index.html is the default page that a web server will load if nothing is specified specified. So when you go to, the web browser will render

My First Web Page

Bring up the text editor and enter the following code into your HTML file:

<!DOCTYPE html>
  <title>Page Title</title>

Now save the file and refresh your web browser. If you've done it right, you'll see something like this:



The text with < and > symbols around it is called a tag, and it defines the type of element we're creating. Let's take a closer look at the code one line at a time:

Code Description
<!DOCTYPE html> Tells the web browser that this is an HTML file
<html> Indicate where the HTML code starts
<head> Describes information about the document
<title>Page Title</title> Defines the text that appears in the upper-left corner of the web browser
<body> Signals the start of page content to be displayed
<h1>Heading</h1> An example of a heading element
<p>Paragraph</p> An example of a paragraph element
</body> Signals the end of page content
</html> Indicates where the HTML code ends

Notice that there are two kinds of tags: ones with a / symbol and ones without. These are start and end tags, and anything between them becomes the content of that particular element.

The beginning and end tags of an element can be on the same line, as it is with <h1>Heading</h1>, or separated with many lines of text between the tags, as it is with <body></body>.

Also note that the text between the start and end body and html tags is indented. Indentation is a common practice in programming because it helps make code easier to read and reduces the chance of error.

More Tags

Try playing around with the code between the body tags. You can also try inserting some of these elements:

Tag Description Example
<h2></h2> Text between these tags is displayed as a smaller heading <h2>Smaller Heading</h2>
<b></b> Text between these tags is bold <b>Bold Text</b>
<i></i> Text between these tags is italic <i>Italic Text</i>
<br> Creates empty space between elements <br>
<hr> Creates a horizontal line (rule) between elements <hr>
<a href=""></a> Text inside the " " symbols defines the URL of a hyperlink, and text between the tags is what is displayed <a href="">My Website</a>
<img src=""></img> Text inside the " " symbols defines the URL of the image <img src="image.jpg"></img>


So now we know how to use tags to create elements. In addition to specifying the text to be displayed between the tags, we can also define attributes of the element. Although there are many more, the three attributes that are primarily used to modify elements are:

  1. id
  2. class
  3. style

Let's take a closer look at the first two. Copy this code and place it between the body tags in your file:

  <h1 id="heading">Heading</h1>
  <p class="paragraph">Paragraph One</p>
  <p class="paragraph">Paragraph Two</p>

If you save the file and refresh your browser, you should see this:


Paragraph One

Paragraph Two

There's nothing special about the appearance of the content, but these elements can now be identified by their id or class attributes. This is essential when we learn to customize elements with CSS or manipulate elements with JavaScript later on.

For now, just remember that an id attribute specifies a unique element (there should only be one element with that id), while the class attribute specifies the element to be of a certain type (there can be multiple elements with the same class, and one element can have multiple classes).

The <div> Tag

Now let's take a look at the div tag. A div tag is used to specify a division or section in an HTML document. As we'll see later on, this will allow us to customize and manipulate whole sections of code. Copy the following code and place it between the body tags of your file:


Before moving on, make sure you have a basic grasp of creating various HTML elements, especially div elements.

Continue to Next Lesson »