HTML Reference

This guide covers the core HTML tags you'll use to build your web pages. HTML (HyperText Markup Language) provides the structure and content of web pages.

Layout Tags

These tags define the major sections and structure of your page.

<header>

Purpose: Contains introductory content or navigation for a page or section.

Example:

<header>
  <h1>My Website</h1>
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
  </nav>
</header>

<footer>

Purpose: Contains footer information like copyright, contact info, or related links.

Example:

<footer>
  <p>&copy; 2026 Your Name. All rights reserved.</p>
</footer>

<main>

Purpose: Contains the main content of the page. There should only be one <main> per page.

Example:

<main>
  <article>
    <!-- Your main content here -->
  </article>
</main>

<nav>

Purpose: Defines a section of navigation links.

Example:

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

<article>

Purpose: Represents a self-contained piece of content that could stand alone (like a blog post or news article).

Example:

<article>
  <h2>Understanding Web Development</h2>
  <p>Web development involves creating and maintaining websites...</p>
</article>

<section>

Purpose: Defines a thematic grouping of content, typically with a heading.

Example:

<section>
  <h2>My Skills</h2>
  <p>HTML, CSS, and JavaScript</p>
</section>

<div>

Purpose: A generic container for grouping content. Use when no other semantic tag fits.

Example:

<div class="card">
  <h3>Card Title</h3>
  <p>Card content goes here</p>
</div>

Text Tags

These tags format and structure your text content.

<h1> through <h6>

Purpose: Headings from most important (h1) to least important (h6). Only one <h1> per page.

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

<p>

Purpose: Defines a paragraph of text.

<p>This is a paragraph. It contains one or more sentences of text.</p>
<p>This is a second paragraph.</p>

<strong> and <em>

Purpose: <strong> indicates strong importance (bold), while <em> indicates emphasis (italic). Use these for semantic meaning, not just visual styling.

<p>This is <strong>very important</strong> information.</p>
<p>I <em>really</em> want to learn web development.</p>
<p>You can <strong>combine <em>both</em> tags</strong>.</p>

<a>

Purpose: Creates a hyperlink to another page or location.

<a href="https://developer.mozilla.org/">MDN Web Docs</a>
<a href="#text-tags">Text Tags</a>

Attributes:

• href - The destination URL or anchor
• target="_blank" - Opens link in new tab (use sparingly)

<ul> (Unordered List)

Purpose: Defines an unordered (bulleted) list. Use for items where order doesn't matter.

<ul>
  <li>HTML for structure</li>
  <li>CSS for styling</li>
  <li>JavaScript for interactivity</li>
</ul>

<ol> (Ordered List)

Purpose: Defines an ordered (numbered) list. Use for items where sequence matters.

<ol>
  <li>Plan your website structure</li>
  <li>Write the HTML content</li>
  <li>Style with CSS</li>
  <li>Add JavaScript functionality</li>
</ol>

<li>

Purpose: Defines a list item (used inside <ul> or <ol>). See examples above.

<span>

Purpose: A generic inline container for styling a portion of text. Use when no other semantic tag fits.

Example:

<p>The price is <span class="highlight">$19.99</span> today only.</p>

Content Tags

These tags embed or display specific types of content.

<img>

Purpose: Embeds an image. This is a self-closing tag (no closing tag needed).

<img src="images/photo.jpg" alt="A description of the photo">
<img src="logo.png" alt="Company logo" width="200" height="100">

Attributes:

• src - Path to the image file (required)
• alt - Text description for accessibility (required)
• width and height - Dimensions (optional, but recommended)

<blockquote>

Purpose: Indicates a quotation from another source.

<blockquote>
  <p>The web is more a social creation than a technical one. I designed it for a social effect — to help people work together — and not as a technical toy.</p>
  <footer>— Tim Berners-Lee</footer>
</blockquote>

<figure>

Purpose: Contains self-contained content like images, diagrams, or code snippets, often with a caption.

Example:

<figure>
  <img src="diagram.png" alt="Website architecture diagram" />
  <figcaption>Figure 1: Basic website structure</figcaption>
</figure>

<figcaption>

Purpose: Provides a caption for a <figure> element.

Example: See <figure> example above.

<code>

Purpose: Displays inline code or computer text.

<p>Use the <code>background-color</code> property to change the background.</p>
<p>The <code>&lt;img&gt;</code> tag is self-closing in HTML.</p>

<pre>

Purpose: Displays preformatted text (preserves spaces and line breaks). Often used with <code> for code blocks.

function greet(name) {
  console.log("Hello, " + name + "!");
}
greet("World");

<pre><code>function greet(name) {
  console.log("Hello, " + name + "!");
}
greet("World");</code></pre>

<button>

Purpose: Creates a clickable button. Can be styled and made interactive with JavaScript.

<button>Click Me</button>
<button type="submit">Submit Form</button>

Tables

Tables organize data into rows and columns.

<table>

Purpose: Creates a table for tabular data. Tables should be used for data, not for page layout.

<table>
  <thead>
    <tr>
      <th>Language</th>
      <th>Purpose</th>
      <th>File Extension</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Structure</td>
      <td>.html</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Styling</td>
      <td>.css</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>Interactivity</td>
      <td>.js</td>
    </tr>
  </tbody>
</table>

Table Elements:

• <table> - The container for the entire table
• <thead> - Contains header rows
• <tbody> - Contains body rows with data
• <tr> - Table row
• <th> - Table header cell (bold by default)
• <td> - Table data cell

Basic HTML Structure

Every HTML page follows this basic structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <!-- Header content -->
    </header>

    <main>
      <!-- Main content -->
    </main>

    <footer>
      <!-- Footer content -->
    </footer>
  </body>
</html>

Tips for Writing Good HTML

1. Use semantic tags - Choose tags that describe the content's meaning, not just how it looks
2. One <h1> per page - Your main title should be the only h1
3. Always include alt text - Describe images for accessibility
4. Indent nested elements - Makes your code easier to read
5. Close your tags - Every opening tag needs a closing tag (except self-closing tags like <img>)
6. Check for errors - Phoenix Code has built-in HTML validation that highlights errors as you type. You can also use the W3C Validator for additional checking

Common Mistakes to Avoid

• Forgetting to close tags
• Using <div> when a semantic tag would be better
• Missing alt attributes on images
• Using heading tags just to make text bigger (use CSS instead)
• Nesting tags incorrectly (tags must be closed in reverse order they were opened)

Need more help? Check out MDN Web Docs for comprehensive HTML documentation.