HTML Tutorial: A Complete Beginner’s Guide to Building Web Pages

What Is HTML?

HTML (HyperText Markup Language) defines the structure and meaning of content on a web page. It tells the browser which parts are headings, paragraphs, links, images, lists, tables, and forms. CSS controls presentation, while JavaScript adds behavior.

HTML is a markup language, not a programming language. It describes content with elements; it has no loops, variables, or functions of its own.

How a browser turns HTML into a page

1. Download: the browser requests the HTML file from a server (or reads it from disk).
2. Parse: it reads the tags and builds a tree of objects called the DOM (Document Object Model).
3. Style: it applies CSS rules to each node in the tree.
4. Render: it lays out the elements and paints pixels on the screen.

The three layers of the web

• HTML: structure and meaning (what the content is).
• CSS: presentation (how the content looks).
• JavaScript: behavior (how the content reacts to the user).

Anatomy of an element

• Opening tag: <p> marks where the element starts.
• Content: the text or child elements inside.
• Closing tag: </p> marks where it ends.
• Attributes: extra information in the opening tag, such as href or class.
• Void elements: elements like <img>, <br>, and <input> have no content and no closing tag.

<!-- element = opening tag + content + closing tag -->
<a href="https://example.com" target="_blank" rel="noopener">Visit Example</a>
<!--  ^ tag  ^ attribute        ^ attribute      ^ content     ^ closing tag -->

<!-- void element: no closing tag, no content -->
<img src="logo.png" alt="Company logo">

The Basic HTML Document

Every standard page starts with a doctype declaration, then the root <html> element. The <head> holds metadata that is not shown on the page; the <body> holds everything the visitor sees.

<!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>

What each part does

• <!doctype html> switches the browser into standards mode.
• lang="en" tells browsers, search engines, and screen readers the page language.
• <meta charset="utf-8"> makes text such as accents and emoji display correctly.
• The viewport meta tag makes the page scale properly on phones.
• <title> appears in the browser tab and in search results.

Headings, Paragraphs, and Text-Level Elements

Headings create an outline

• Use one <h1> for the main topic of the page.
• Use <h2> to <h6> in order, without skipping levels just to change size.
• Screen-reader users navigate by headings, so they act like a table of contents.

Common text elements

• <p> for paragraphs.
• <strong> for strong importance and <em> for stress emphasis.
• <code> for inline code and <pre> for preformatted blocks.
• <blockquote> and <cite> for quotations and their sources.
• <br> for a line break inside text, not for spacing between paragraphs.
• <span> and <div> are generic containers with no meaning of their own.

<h1>Learning HTML</h1>
<p>HTML gives <strong>structure</strong> to content. Use <em>emphasis</em> carefully.</p>

<h2>Quotations</h2>
<blockquote>
  <p>The web is for everyone.</p>
  <footer>Tim Berners-Lee, <cite>W3C</cite></footer>
</blockquote>

<h2>Code</h2>
<p>Print a message with <code>console.log("Hi")</code>.</p>
<pre><code>line one
  line two (spaces are preserved)</code></pre>

Links, Images, and Media

Links

• Absolute URLs include the full address, for example https://example.com/page.
• Relative URLs point to files in your own site, such as /about.html or ../contact.html.
• Fragment links jump to an element id on the same page, such as #faqs.
• When opening a link in a new tab, add rel="noopener" for safety.
• Link text should make sense on its own. Avoid "click here".

Images

• alt text describes the image for people who cannot see it. Use an empty alt="" for purely decorative images.
• Set width and height so the browser reserves space and the layout does not jump.
• Use loading="lazy" for images far below the fold.
• Use <picture> and srcset to serve different sizes or formats.

<nav>
  <a href="/">Home</a>
  <a href="#faqs">Jump to FAQs</a>
  <a href="https://example.com" target="_blank" rel="noopener">External site</a>
  <a href="mailto:hello@example.com">Email us</a>
</nav>

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
     sizes="(min-width: 800px) 800px, 100vw"
     width="800" height="533"
     alt="A mountain lake at sunrise"
     loading="lazy">

<figure>
  <img src="chart.png" alt="Bar chart of monthly visitors" width="600" height="320">
  <figcaption>Monthly visitors, January to June.</figcaption>
</figure>

<video controls width="640" poster="preview.jpg">
  <source src="intro.mp4" type="video/mp4">
  <track kind="captions" src="intro.vtt" srclang="en" label="English">
  Your browser does not support video.
</video>

Lists and Tables

Choosing the right list

• <ul> for unordered items where order does not matter.
• <ol> for steps or rankings where order matters.
• <dl> for terms and their descriptions.

Tables are for data, not layout

• Use <caption> to describe the table.
• Group rows with <thead>, <tbody>, and <tfoot>.
• Use <th scope="col"> or scope="row" so assistive tools can connect cells to headers.
• Never use tables to position page layout; use CSS for that.

<ol>
  <li>Write the HTML</li>
  <li>Add the CSS</li>
  <li>Test in a browser</li>
</ol>

<dl>
  <dt>DOM</dt>
  <dd>The tree of objects the browser builds from HTML.</dd>
</dl>

<table>
  <caption>Course schedule</caption>
  <thead>
    <tr><th scope="col">Day</th><th scope="col">Topic</th><th scope="col">Hours</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Mon</th><td>HTML basics</td><td>2</td></tr>
    <tr><th scope="row">Wed</th><td>CSS layout</td><td>3</td></tr>
  </tbody>
</table>

Forms and Validation

Forms collect user input. A good form is easy to read, easy to fill in, and validated both in the browser and on the server.

Key building blocks

• Labels: every control needs a visible <label> connected with for and id.
• Input types: email, tel, number, date, password, search, and url give better keyboards and built-in checks.
• Constraints: required, minlength, maxlength, min, max, and pattern validate in the browser.
• Grouping: <fieldset> and <legend> group related controls such as radio buttons.
• Autocomplete: the autocomplete attribute helps browsers fill known values.

<form action="/contact" method="post">
  <p>
    <label for="name">Full name</label><br>
    <input id="name" name="name" type="text" autocomplete="name" required>
  </p>
  <p>
    <label for="email">Email address</label><br>
    <input id="email" name="email" type="email" autocomplete="email" required>
  </p>
  <p>
    <label for="topic">Topic</label><br>
    <select id="topic" name="topic">
      <option value="support">Support</option>
      <option value="sales">Sales</option>
    </select>
  </p>
  <fieldset>
    <legend>Preferred contact method</legend>
    <label><input type="radio" name="method" value="email" checked> Email</label>
    <label><input type="radio" name="method" value="phone"> Phone</label>
  </fieldset>
  <p>
    <label for="message">Message</label><br>
    <textarea id="message" name="message" rows="5" minlength="10" required></textarea>
  </p>
  <button type="submit">Send message</button>
</form>

Semantic HTML and Page Layout

Semantic elements describe the role of content. They help screen readers, search engines, and other developers understand your page.

Landmark elements

• <header>: introductory content or site heading.
• <nav>: a block of major navigation links.
• <main>: the unique main content; use one per page.
• <article>: self-contained content such as a blog post.
• <section>: a thematic group of content, usually with a heading.
• <aside>: related but secondary content such as a sidebar.
• <footer>: closing information for a page or section.

<body>
  <header>
    <a href="/" class="logo">DevNotes</a>
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="/tutorials">Tutorials</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h1>Understanding the DOM</h1>
      <p>Published <time datetime="2026-10-10">10 October 2026</time></p>
      <section>
        <h2>What is the DOM?</h2>
        <p>...</p>
      </section>
    </article>
    <aside>
      <h2>Related posts</h2>
    </aside>
  </main>

  <footer><p>&copy; 2026 DevNotes</p></footer>
</body>

Accessibility Essentials

Accessible HTML works for everyone, including people who use screen readers, keyboards only, voice control, or zoom.

• Use native elements first. A <button> is focusable, activates with Enter and Space, and announces itself. A clickable <div> does none of that.
• Provide text alternatives for informative images, icons, and media.
• Keep a logical heading order and use landmarks.
• Make focus visible. Never remove focus outlines without replacing them.
• Ensure sufficient color contrast between text and background.
• Use ARIA only when needed. The first rule of ARIA is to use a native element when one exists.

<!-- Bad: not focusable, no keyboard support, no role -->
<div class="btn" onclick="save()">Save</div>

<!-- Good: native, accessible by default -->
<button type="button" onclick="save()">Save</button>

<!-- Icon-only button needs an accessible name -->
<button type="button" aria-label="Close dialog">
  <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16">
    <path d="M2 2l12 12M14 2L2 14" stroke="currentColor" stroke-width="2"/>
  </svg>
</button>

<!-- Skip link for keyboard users -->
<a class="skip-link" href="#main">Skip to main content</a>

Metadata, SEO, and Performance Basics

• Write a unique, descriptive <title> for every page.
• Add a meta description that summarizes the page in about 150 characters.
• Add a canonical link when the same content can be reached from several URLs.
• Add Open Graph tags so links look good when shared.
• Defer non-critical scripts and lazy-load offscreen images.
• Use a clear heading structure and meaningful link text.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML Tutorial for Beginners | DevNotes</title>
  <meta name="description" content="Learn HTML step by step with examples for text, links, forms, and semantic layout.">
  <link rel="canonical" href="https://example.com/html-tutorial">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="/css/site.css">

  <meta property="og:title" content="HTML Tutorial for Beginners">
  <meta property="og:description" content="Learn HTML step by step.">
  <meta property="og:image" content="https://example.com/images/html-share.jpg">
  <meta property="og:type" content="article">

  <script src="/js/app.js" defer></script>
</head>

Common Beginner Mistakes

• Skipping heading levels or choosing headings for size instead of meaning.
• **Using <div> for everything** instead of semantic elements.
• **Missing alt attributes** on informative images.
• Unlabelled form fields that rely only on placeholder text.
• Using tables for layout instead of CSS.
• Forgetting the viewport meta tag, which breaks mobile layouts.
• Unclosed or badly nested tags that make the DOM unpredictable.
• Inline styles everywhere instead of an external stylesheet.

Run your pages through the W3C Markup Validator and a tool such as Lighthouse to catch many of these automatically.

Complete Example: A Small Personal Page

Save this as index.html and open it in a browser. It combines the head metadata, semantic layout, an image, a list, a table, and an accessible form.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Asha Rao | Web Developer</title>
  <meta name="description" content="Portfolio of Asha Rao, a junior web developer.">
</head>
<body>
  <a href="#main">Skip to main content</a>

  <header>
    <h1>Asha Rao</h1>
    <nav aria-label="Main navigation">
      <a href="#about">About</a>
      <a href="#skills">Skills</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main id="main">
    <section id="about">
      <h2>About me</h2>
      <p>I build simple, accessible websites and I am learning JavaScript.</p>
      <img src="asha.jpg" alt="Portrait of Asha smiling at a laptop" width="240" height="240">
    </section>

    <section id="skills">
      <h2>Skills</h2>
      <table>
        <caption>Skill levels</caption>
        <thead><tr><th scope="col">Skill</th><th scope="col">Level</th></tr></thead>
        <tbody>
          <tr><th scope="row">HTML</th><td>Advanced</td></tr>
          <tr><th scope="row">CSS</th><td>Intermediate</td></tr>
          <tr><th scope="row">JavaScript</th><td>Beginner</td></tr>
        </tbody>
      </table>
    </section>

    <section id="contact">
      <h2>Contact</h2>
      <form action="/contact" method="post">
        <label for="email">Email address</label>
        <input id="email" name="email" type="email" autocomplete="email" required>
        <label for="msg">Message</label>
        <textarea id="msg" name="msg" rows="4" required></textarea>
        <button type="submit">Send</button>
      </form>
    </section>
  </main>

  <footer><p>&copy; 2026 Asha Rao</p></footer>
</body>
</html>

Frequently Asked Questions