Introduction to HTML

What is HTML?

HTML is the foundation of the web. It uses a series of elements represented by tags to describe and structure content. Whether you’re building a simple webpage or a complex website, understanding HTML is essential.

Basic Structure of an HTML Document

Every HTML document starts with a doctype declaration and is divided into a head and a body section. The head contains metadata such as the title and links to stylesheets, while the body contains the content visible to users.

What this code does: Shows the minimal valid HTML5 document structure with a title and a simple heading + paragraph in the body.

<!DOCTYPE html>
<html>
  <head>
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to HTML</h1>
    <p>This is a simple HTML document structure.</p>
  </body>
</html>

Common HTML Elements and Their Uses

HTML provides a variety of elements to structure your content. Below are some essential elements with examples:

1. Headings

Headings organize your content into sections. There are six levels, from <h1> (the most important) to <h6> (the least important).

What this code does: Demonstrates the three most commonly used heading levels.

<h1>Main Heading (H1)</h1>
<h2>Subheading (H2)</h2>
<h3>Section Heading (H3)</h3>

2. Paragraphs

Paragraphs (<p> tags) are used to display blocks of text.

What this code does: Creates a single paragraph of readable text.

<p>This is an example of a paragraph. Use paragraphs to separate different blocks of text in your document.</p>

3. Hyperlinks

Hyperlinks (<a> tags) allow you to navigate to other pages or websites.

What this code does: Creates a clickable link that opens the Academic Block website.

<a href="https://www.academicblock.com/">Visit Academic Block</a>

4. Images

Images are embedded using the <img> tag. Always include an alt attribute for accessibility.

What this code does: Displays an image with a descriptive alt text for screen readers and SEO.

<img src="https://www.academicblock.net/wp-content/uploads/2025/04/Bird-01-AB.jpg" alt="Image of a Bird">

5. Lists

Lists help organize items. Use ordered lists (<ol>) for numbered items, and unordered lists (<ul>) for bulleted items.

What this code does: Shows both an ordered (numbered) list and an unordered (bulleted) list.

<!-- Ordered List Example -->
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>
<!-- Unordered List Example -->
<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>

6. Tables

Tables are used for displaying data in rows and columns. They are defined with <table>, and contain rows (<tr>), header cells (<th>), and data cells (<td>).

What this code does: Creates a simple two-column table with a header row and two data rows.

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>25</td>
  </tr>
</table>

Additional HTML Features

Comments: Use comments to annotate your code. Comments start with <!-- and end with -->.

What this code does: Shows an HTML comment that is ignored by the browser and a heading that is displayed.

<!-- This is a comment in HTML -->
<h3>Comments enclosed in the comment tag are not displayed on the Webpage.</h3>

Semantic HTML: HTML5 introduced semantic tags like <header>, <footer>, <article>, and <section> which provide more meaning to your markup.

Experiment and Practice

The best way to learn HTML is to experiment with these examples. Use the “Test My Code” button above, modify the code, and see how each change affects the outcome.

Web Resources on HTML

1. University of Washington : HTML Basics
2. University of Vermont : HTML Tutorial
3. Wellesley College : HTML Coding Guide
4. Brandeis University : HTML Reference
5. North Carolina State University : HTML Basics
6. MDN Web Docs HTML: HyperText Markup Language