HTML

What we will cover

This page covers the core fundamentals of HTML, step by step.

1. Basic Structure — how an HTML page is organized
2. Tags & Elements — the building blocks of HTML
3. Headings & Paragraphs — structuring text content
4. Links — connecting pages together
5. Images — adding pictures to a page
6. Lists — ordered and unordered lists
7. Forms — collecting input from users
8. Tables — displaying data in rows and columns
9. Quiz — test what you've learned

Basic Structure

Every HTML page follows the same basic skeleton. Here's the simplest possible HTML page:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Breaking it down

• <!DOCTYPE html> — tells the browser this is an HTML5 document
• <html> — wraps the entire page content
• <head> — holds info about the page (like the title), not shown directly on the page itself
• <title> — sets the text shown in the browser tab
• <body> — holds everything visible on the page — text, images, buttons, etc.

Key rules

• Most tags come in pairs — an opening tag <tag> and a closing tag </tag>
• Tags can be nested inside each other, but must close in the right order
• HTML isn't case-sensitive, but lowercase tags are the standard convention

Tags & Elements

A tag is a keyword enclosed within angle brackets <> that tells the browser how to display or structure content.

An element consists of the opening tag, content, and usually a closing tag.

HTML is built entirely out of tags. A tag tells the browser what kind of content follows — like marking something as a heading, a paragraph, or a link.

Opening and closing tags

Most tags come in pairs: an opening tag and a matching closing tag (which has a forward slash before the tag name). Everything between them is called an element.

<p>This is a paragraph.</p>

Self-closing tags

Some tags don't wrap around content, so they don't need a separate closing tag — they close themselves.

<br>
<img src="photo.jpg">
<hr>

• <br> — inserts a line break
• <img> — displays an image
• <hr> — draws a horizontal line

Attributes

Attributes give extra information to a tag, written inside the opening tag as name="value" pairs.

<img src="photo.jpg" alt="A description">
<a href="https://example.com">Click here</a>

• src — tells an image which file to load
• alt — describes the image, used if it fails to load
• href — tells a link where to go

Nesting elements

Tags can be placed inside other tags, but they must close in the correct order — like closing brackets, the last one opened must be the first one closed.

<p>This is <strong>bold text</strong> inside a paragraph.</p>

The <strong> tag is used to indicate that the enclosed text has strong importance or significance. Browsers normally display it in bold.

Line breaks

If you just want to move text to a new line without starting a whole new paragraph, use <br>.

<p>Line one<br>Line two</p>

Headings & Paragraphs

Headings and paragraphs are the most basic building blocks for text content on a webpage.

Headings

HTML has six levels of headings, from <h1> (biggest, most important) to <h6> (smallest). They're used to organize content, similar to chapter titles and subtitles in a book.

<h1>Main Title</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>

Paragraphs

Regular text content goes inside a <p> tag. Browsers automatically add spacing above and below paragraphs.

<p>This is a paragraph of text. It can be as long as you want.</p>

Why heading order matters

Headings should be used in order (don't skip from <h1> straight to <h4>) — this keeps your page organized and is important for accessibility, since screen readers rely on heading structure to help users navigate a page.

Links

HTML links are used to connect one webpage to another webpage, website, file, or section of the same page.

Links are what make the web a "web". In HTML, links are created using the <a> tag (short for "anchor").

Basic link

<a href="https://example.com">Visit Example</a>

The href attribute holds the URL the link points to. The text between the opening and closing tags is what's clickable.

Linking to another page on your own site

<a href="about.html">About Us</a>

If the file is in the same folder, you can just use its filename instead of a full web address.

Opening a link in a new tab

<a href="https://example.com" target="_blank">Visit Example</a>

target="_blank" tells the browser to open the link in a new tab instead of navigating away from the current page.

Linking to an email address

<a href="mailto:someone@example.com">Email Us</a>

This opens the user's default email app with the address already filled in.

Jumping to a section on the same page

<a href="#section2">Go to Section 2</a>

<h2 id="section2">Section 2</h2>

A link starting with # jumps to an element on the same page that has a matching id.

Images

Images are added using the <img> tag. Unlike most tags, it doesn't need a closing tag — it's self-closing, since it doesn't wrap around any content.

Basic image

<img src="photo.jpg">

The src attribute tells the browser which file to load — this can be a file in your own project folder, or a full web address.

Adding alt text

<img src="photo.jpg" alt="A sunset over the ocean">

alt provides a text description of the image. It shows up if the image fails to load, and it's also read aloud by screen readers — making your page more accessible.

Controlling image size

<img src="photo.jpg" alt="A sunset" width="300" height="200">

width and height set the image's size in pixels. It's usually better to control sizing with CSS instead, but these attributes work fine for quick adjustments.

Making an image a link

<a href="https://example.com">
    <img src="photo.jpg" alt="Click me">
</a>

Wrapping an <img> inside an <a> tag makes the whole image clickable.

Key points

• <img> is self-closing — no separate closing tag needed
• Always include alt text for accessibility
• File paths matter — make sure src points to the correct location of the image file

Lists

HTML has two main types of lists: ordered (numbered) and unordered (bulleted). Both are made up of individual list items.

Unordered lists

Use <ul> for a bulleted list, with each item wrapped in <li>.

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

Ordered lists

Use <ol> for a numbered list. The browser automatically numbers each item for you.

<ol>
    <li>Preheat the oven</li>
    <li>Mix the ingredients</li>
    <li>Bake for 20 minutes</li>
</ol>

Nested lists

Lists can be placed inside other list items, useful for showing sub-categories or steps within steps.

<ul>
    <li>Fruits
        <ul>
            <li>Apples</li>
            <li>Bananas</li>
        </ul>
    </li>
    <li>Vegetables</li>
</ul>

Key points

• <ul> — unordered (bulleted) list
• <ol> — ordered (numbered) list
• <li> — each individual item, used inside either type

Forms

Forms are used to collect input from users — like text, choices, or file uploads — usually to send that data somewhere for processing.

Basic form structure

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

Common input types

<input type="text">      <!-- single line of text -->
<input type="email">     <!-- email address -->
<input type="password">  <!-- hides typed characters -->
<input type="checkbox">  <!-- yes/no option -->
<input type="radio">     <!-- pick one from a group -->
<input type="submit">    <!-- button to send the form -->

Labels

A <label> describes what an input field is for. Connecting a label to its input with matching for and id attributes makes forms more accessible — clicking the label also focuses the input.

<label for="email">Email:</label>
<input type="email" id="email" name="email">

Text areas and dropdowns

<textarea>Write a longer message here...</textarea>

<select>
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Key points

• Every input should have a matching <label> for accessibility
• The name attribute identifies each field's data when the form is submitted
• Since EDUhub is login-free with no backend, forms here are for learning structure — not actually collecting real data

Tables

Tables are used to display data in rows and columns — useful for things like schedules, price lists, or any structured data.

Basic table structure

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Akshay</td>
        <td>21</td>
    </tr>
</table>

Breaking it down

• <table> — wraps the entire table
• <tr> — table row
• <th> — table header cell (bold, centered by default)
• <td> — table data cell (regular content)

A slightly bigger example

<table>
    <tr>
        <th>Subject</th>
        <th>Grade</th>
    </tr>
    <tr>
        <td>Math</td>
        <td>A</td>
    </tr>
    <tr>
        <td>Science</td>
        <td>B</td>
    </tr>
</table>

Key points

• Each row is wrapped in <tr>
• Header cells use <th>, data cells use <td>
• Tables have no styling by default — borders, spacing, and colors need CSS to look polished