The Beginner’s HTML Guide

This page explains how websites are built using HTML: the language that gives structure to every web page. You can open this file in your browser and also in a text editor (like Notepad or VS Code) to experiment!

1. The Basic Page Structure

Every web page starts the same way. The <html> tag wraps everything, the <head> holds info about the page, and the <body> is what people actually see.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is my very first webpage.</p>
  </body>
</html>

💡 The <!DOCTYPE html> at the top just tells the browser “this is a modern HTML5 page.”

2. Headings and Text

Headings make text bigger and are used for titles. Paragraphs are for normal text.

<h1>Big Title</h1>
<h2>Smaller Title</h2>
<p>This is a normal paragraph.</p>
<strong>Bold</strong> and <em>Italic</em> make text stand out.

Example:

Big Title

Smaller Title

This is a normal paragraph. You can make bold or italic text easily.

3. Links and Images

Links use the <a> tag (“a” stands for “anchor”). Images use the <img> tag.

<a href="https://example.com">Go to Example</a>
<img src="https://via.placeholder.com/150" alt="A sample picture">

Example:

Go to Example

💡 Always include an alt description for images — it helps screen readers and shows text if the image doesn’t load.

4. Lists

Lists can be “unordered” (with bullets) or “ordered” (with numbers):

<ul>
  <li>Apples</li>
  <li>Bananas</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

Apples
Bananas

First
Second

5. Tables

Tables organize data in rows and columns.

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Zak</td>
    <td>19</td>
  </tr>
</table>

Name	Age
Zak	19

6. Forms (Getting Input)

Forms let people type or click things. Each input is a field where a user can enter data.

<form>
  <label>Name: <input type="text" name="username"></label><br>
  <label>Email: <input type="email" name="email"></label><br>
  <input type="submit" value="Send">
</form>

💡 Nothing will actually “send” unless you connect the form to a backend, but it still works for testing layout!

7. Media

You can show pictures, play audio, and even include video clips:

<img src="cat.jpg" alt="A cat">
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
</audio>
<video width="320" height="180" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

8. Page Layout (Semantic Tags)

Modern HTML uses special “semantic” tags to describe different parts of a page:

<header>Top area</header>
<nav>Links or menu</nav>
<main>Main content</main>
<section>A section of content</section>
<article>An article or post</article>
<aside>Side info</aside>
<footer>Bottom area</footer>

9. Comments

Comments are notes you leave for yourself that don’t show up on the page.

<!-- This is a comment and won’t appear in the browser -->

10. Final Tips

Always close your tags (like <p>...</p>).
Use lowercase letters for tags — it’s the convention in HTML5.
Check for typos — one missing bracket can break your page!
Use <br> for a line break (but not too often).

Written for Zak: A quick and kind introduction to HTML. You can edit this page and learn by experimenting!