HTML is the backbone of every website on the internet. Every page you've ever visited — from Google to Netflix to this blog post — is built with HTML.

And here's the thing: you can learn it in a week. Not in a month. Not in a semester. In 7 days, you can go from zero knowledge to building your own websites.

This guide gives you a day-by-day plan. Each day covers specific concepts, with real code examples you can practice directly in the Deoit online editor — no downloads, no setup.

The 7-Day Roadmap

1First Page

2Text & Links

3Media & Lists

4Forms

5Semantics

6HTML5 APIs

7Full Website

How to Use This Guide

Don't just read — write the code yourself. Open the Deoit editor in another tab, type each example, and see it work. That's how real learning happens.

Day 1

What is HTML & Your First Page

HTML stands for HyperText Markup Language. It's not a programming language — it's a markup language. That means it describes the structure of content using tags.

Think of it like this: if your website is a house, HTML is the walls, doors, and windows. CSS is the paint and furniture. JavaScript is the electricity.

Your First HTML File

Every HTML file follows the same skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first web page.</p>
</body>
</html>

<!DOCTYPE html> Tells the browser this is HTML5

<html> The root of the entire page

<head> Hidden info (title, meta, links)

<body> Everything visible on screen

Practice Exercise

Open the Deoit editor, type the code above, and click "Run". Change "Hello, World!" to your name and run it again.

Day 2

Text, Headings & Links

Now that you have a page, let's make it readable. HTML gives you tools to structure text and connect pages together.

Headings

There are 6 heading levels — <h1> is the biggest (usually the page title), <h6> is the smallest:

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Sub-section Title</h3>

Paragraphs & Formatting

<p>This is a normal paragraph.</p>
<p>This word is <strong>bold</strong> and this is <em>italic</em>.</p>
<p>This is <mark>highlighted</mark> and this is <code>inline code</code>.</p>
<p>Line<br>breaks use the &lt;br&gt; tag.</p>

Links

Links are what make the web a web. The <a> tag (anchor) connects pages:

<a href="https://google.com">Visit Google</a>
<a href="about.html">About Page</a>
<a href="#section2">Jump to Section 2</a>

<h1> to <h6> Heading sizes (h1 biggest)

<p> Paragraph of text

<strong> Bold / important text

<em> Italic / emphasized text

<a href> Hyperlink to another page

<br> Line break (self-closing)

Day 3

Images, Lists & Tables

Your pages need more than text. Let's add visual content and organized data.

Images

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

<!-- Images are self-closing — no </img> needed -->

The alt attribute is mandatory. It describes the image for screen readers and shows when the image fails to load.

Lists

<!-- Unordered (bullet) list -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Ordered (numbered) list -->
<ol>
  <li>First, learn HTML</li>
  <li>Then, learn CSS</li>
  <li>Finally, learn JavaScript</li>
</ol>

Tables

<table>
  <thead>
    <tr>
      <th>Language</th>
      <th>Purpose</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Structure</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Style</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>Behavior</td>
    </tr>
  </tbody>
</table>

Practice Exercise

Build a "My Favorite Foods" page with an ordered list of 5 foods, each with a description. Add a table comparing their prices.

Day 4

Forms & User Input

Forms are how websites collect information — from login pages to search bars to contact forms. This is where HTML gets interactive.

<form action="/submit" method="POST">
  <label for="name">Your Name</label>
  <input type="text" id="name" name="name" placeholder="John Doe" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" placeholder="john@example.com" required>

  <label for="msg">Message</label>
  <textarea id="msg" name="message" rows="4"></textarea>

  <label for="lang">Favorite Language</label>
  <select id="lang" name="language">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </select>

  <button type="submit">Send</button>
</form>

<input> Text, email, password, number...

<textarea> Multi-line text input

<select> Dropdown menu

<label> Label for accessibility

required Field must be filled

placeholder Hint text inside input

Key Rule

Always use <label> with your inputs. Without them, your form is inaccessible to screen readers and harder to use on mobile. The for attribute must match the input's id.

Day 5

Semantic HTML & Accessibility

So far you've built pages that work. Today you'll learn to build pages that are meaningful.

Semantic HTML means using tags that describe what the content is, not just how it looks. Instead of wrapping everything in <div>, you use specific tags:

<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

<main>
  <article>
    <h1>Blog Post Title</h1>
    <time datetime="2026-07-25">July 25, 2026</time>
    <p>Article content here...</p>
  </article>

  <aside>
    <h2>Related Posts</h2>
    <ul>
      <li><a href="#">Post 1</a></li>
    </ul>
  </aside>
</main>

<footer>
  <p>&copy; 2026 My Website</p>
</footer>

<header> Top section of a page

<nav> Navigation links

<main> Main content area

<article> Self-contained content

<section> Thematic grouping

<footer> Bottom section

<aside> Sidebar / tangential content

<figure> Image with caption

Why This Matters

SEO: Search engines understand semantic pages better — they rank higher
Accessibility: Screen readers use these tags to navigate pages
Maintainability: Your code reads like a document outline, not a pile of divs

Day 6

HTML5 Media & Modern Features

HTML5 gave us native media support, no plugins required. Let's use it.

Video & Audio

<!-- Video player -->
<video controls width="600" poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support video.
</video>

<!-- Audio player -->
<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

Other Useful HTML5 Features

<!-- Details / Accordion (no JS needed) -->
<details>
  <summary>Click to expand</summary>
  <p>Hidden content appears here!</p>
</details>

<!-- Dialog box -->
<dialog id="myModal">
  <p>This is a native modal!</p>
  <button onclick="this.closest('dialog').close()">Close</button>
</dialog>

<!-- Progress bar -->
<progress value="70" max="100">70%</progress>

<!-- Mark text -->
<p>You scored <mark>95%</mark> on the test.</p>

Fun Fact

The <details> and <dialog> elements work without any JavaScript. Native HTML can do more than most beginners realize — and it's faster and more accessible than custom solutions.

Day 7

Build a Complete Website

Everything you've learned in 6 days comes together. Today you'll build a real, multi-page website.

Project: Personal Portfolio

Build a 3-page website with:

index.html — Home page with hero, about section, and contact form
projects.html — Grid of project cards with images
contact.html — Full contact form with validation

Page Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Portfolio</title>
</head>
<body>

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

  <main>
    <section id="hero">
      <h1>Hi, I'm a Web Developer</h1>
      <p>I build things for the web.</p>
    </section>

    <section id="about">
      <h2>About Me</h2>
      <p>I learned HTML in 7 days. Here's my story.</p>
    </section>

    <section id="contact">
      <h2>Get In Touch</h2>
      <form>
        <input type="text" placeholder="Your name" required>
        <input type="email" placeholder="Email" required>
        <textarea rows="4" placeholder="Message"></textarea>
        <button type="submit">Send</button>
      </form>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 My Portfolio</p>
  </footer>

</body>
</html>

Next Steps

Once your HTML structure is done, add CSS to make it beautiful, and JavaScript to make it interactive. Try the Deoit courses to continue learning.

Your HTML Cheat Sheet

Here's everything you learned in one place:

Category	Tags	Purpose
Document	`<!DOCTYPE> <html> <head> <body>`	Page skeleton
Text	`<h1>-<h6> <p> <strong> <em>`	Content formatting
Links	`<a href>`	Navigation between pages
Media	`<img> <video> <audio>`	Images and media playback
Lists	`<ul> <ol> <li>`	Ordered and unordered lists
Tables	`<table> <tr> <td> <th>`	Tabular data
Forms	`<form> <input> <textarea> <button>`	User input
Semantic	`<header> <nav> <main> <article> <footer>`	Meaningful structure

Common Mistakes Beginners Make

Skipping the <!DOCTYPE html> — Without it, the browser renders in "quirks mode" and things break.
Using <br> for spacing — Use CSS margins and padding instead. <br> is for line breaks within a paragraph, not for adding space between elements.
Nesting elements wrong — Tags must close in the right order. <p><strong>text</p></strong> is wrong. <p><strong>text</strong></p> is right.
Ignoring alt text on images — Every <img> needs an alt attribute. It's not optional.
Using <div> for everything — Use semantic tags. A <div> says nothing about its content. A <nav> says "this is navigation".

What to Learn Next

HTML is just the beginning. Here's the natural progression:

CSS — Make your pages beautiful (colors, layouts, animations)
JavaScript — Make your pages interactive (clicks, forms, API calls)
Responsive Design — Make pages work on all screen sizes
Git & GitHub — Save and share your code

The Deoit courses section has free lessons for all of these. And the editor lets you practice everything directly in your browser.

The best way to learn HTML is to build things.
Not watch tutorials. Not read documentation. Build. Break it. Fix it. Build again.

Learn HTML in 7 Days: The Complete Beginner Guide (2026)