HTML Reference

Created by Amy Nguyen

Structure of an HTML Document

    <title>[Title of Page]</title>
    [Content goes here!]

Useful HTML Tags

HTML Syntax Result Notes
<p>Let’s learn to make websites!</p>


Let's learn to make websites!

Use <p> to create separate paragraphs!
<div>First division</div>

<div>Second division</div>
First division
Second division
"div"s are used to separate sections of HTML content.
<h1>My h1 Header<h1>
<h2>My h2 Header<h2>
<h3>My h3 Header<h3>
<h4>My h4 Header<h4>
<h5>My h5 Header<h5>
<h6>My h6 Header<h6>

My h1 Header

My h2 Header

My h3 Header

My h4 Header

My h5 Header
My h6 Header
<b>Bold text!<b>
Bold text!
<u>Underlined text!<u>
Underlined text!
<i>Italicized text!<i>
Italicized text!
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  1. First item
  2. Second item
  3. Third item
"ol" stands for ordered list.
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  • First item
  • Second item
  • Third item
"ul" stands for unordered list.
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3
"tr" stands for table row. "th" stands for table header. "td" stands for table data.

Create a horizontal divider.
<a href="">Homepage</a>
<img src=""></img>

Styling your website with CSS

Getting Started

At the top of your HTML page, you need to include your CSS file:

<link rel="stylesheet" type="text/css" href="styles.css">

Note that styles.css is the name of your CSS file, so it should be changed if you have multiple CSS files.

Editing your HTML

Add a class tag to your HTML elements. For example:

<p class="class-name">Merhaba!</p>

Adding CSS

In your CSS file, you can use the name of the class you wrote for your HTML tag to add styles:

.class-name {
  color: white;
  font-size: 20px;
  text-align: center;
  background-color: black;

Call a section leader over if you need more details.