Learn HTML for Beginners: A Complete Guide with Examples (2026)

HTML is the language every web page is written in. You don't need any software to start: a text editor and a browser are enough. This guide takes you from an empty file to a small, valid, accessible page, and explains each tag as you meet it. Every example can be copied and run as it is.

What you need

• A code editor. Visual Studio Code is free and works on Windows, macOS and Linux. Notepad works too.
• A browser. Chrome, Edge, Firefox or Safari. Press F12 to open the developer tools and see how the browser reads your HTML.

Your first HTML page

Create a folder, then a file named index.html inside it, and paste this in:

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

Save it and double-click the file. It opens in your browser. Change the text, save, and refresh (Ctrl+R) to see the change.

What each line does

Tags, elements and attributes

Most HTML is written as an opening tag, some content and a closing tag. Together they form an element. Extra information goes in attributes inside the opening tag:

<a href="https://techweb24.blogspot.com" target="_blank">Visit TECHWEB24</a>
<!-- tag: a   attributes: href, target   content: Visit TECHWEB24 -->

A few elements have no content and no closing tag, such as <img>, <br>, <meta> and <input>.

Text: headings, paragraphs and emphasis

<h1>Page title (use one h1 per page)</h1>
<h2>Section heading</h2>
<h3>Sub-section</h3>

<p>A paragraph. Use <strong>strong</strong> for important words
and <em>em</em> for emphasis.</p>

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save. Run <code>npm install</code>.</p>

<blockquote>A quotation from another source.</blockquote>

Links

<!-- another website (opens in a new tab) -->
<a href="https://developer.mozilla.org" target="_blank" rel="noopener">MDN Web Docs</a>

<!-- another page in the same folder -->
<a href="about.html">About me</a>

<!-- a section on the same page -->
<a href="#contact">Jump to contact</a>
<h2 id="contact">Contact</h2>

<!-- email -->
<a href="mailto:hello@example.com">Email me</a>

Images

<img src="photo.jpg" alt="Sunset over the Padma river"
     width="800" height="450" loading="lazy">

• alt describes the image for screen readers and shows if the image fails to load. It is required.
• width and height stop the page from jumping while the image loads.
• loading="lazy" waits to download images until the visitor scrolls near them.

Lists

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

<ol>            <!-- numbered list -->
  <li>Write the HTML</li>
  <li>Style it with CSS</li>
  <li>Publish it</li>
</ol>

Tables

Use tables for tabular data only, never for page layout.

<table>
  <caption>Course prices</caption>
  <thead>
    <tr><th>Course</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>HTML basics</td><td>Free</td></tr>
    <tr><td>CSS layout</td><td>Free</td></tr>
  </tbody>
</table>

Forms

Forms collect input. Each field needs a <label> linked to it with for and id, so clicking the label focuses the field.

<form action="/subscribe" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" required>

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

  <label for="level">Your level</label>
  <select id="level" name="level">
    <option>Beginner</option>
    <option>Intermediate</option>
  </select>

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

Input types like email, number, date and tel give phones the right keyboard and add basic validation for free.

Page structure with semantic elements

Instead of wrapping everything in <div>, use elements that say what the content is:

<body>
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/blog">Blog</a>
    </nav>
  </header>

  <main>
    <article>
      <h1>How to learn HTML</h1>
      <p>...</p>
    </article>
    <aside>Related links</aside>
  </main>

  <footer>&copy; 2026 My Site</footer>
</body>

Adding a little CSS

HTML describes content; CSS controls how it looks. Put a <style> block in the <head> to start:

<style>
  body { font-family: system-ui, sans-serif; max-width: 720px; margin: 40px auto; padding: 0 16px; line-height: 1.6; }
  h1   { color: #2563eb; }
  a    { color: #16a34a; }
</style>

When your styles grow, move them to a separate file and link it with <link rel="stylesheet" href="style.css">.

Check your HTML

• Paste your code into the W3C validator to find unclosed tags and typos.
• In the browser, right-click an element and choose Inspect to see how it was parsed.
• Run a Lighthouse report in Chrome DevTools to check accessibility and SEO.

Publish it for free

When your page is ready, you can put it online without paying for hosting. GitHub Pages, Netlify and Cloudflare Pages all host static HTML sites for free: upload your folder and you get a public URL.

What to learn next

1. CSS: Flexbox and Grid for layouts, and media queries for phones.
2. JavaScript: make pages interactive.
3. Git: track changes and publish to GitHub.

The best reference for all three is MDN Web Docs. Questions? Leave a comment below and I'll help.