Learn > HTML

HTML for Absolute Beginners

Published on August 15, 2025

Build Your First Web Page

New to coding? Perfect. This guide explains the real basics of HTML—what it is, how tags work, and how to structure a page—so you can publish your first web page with confidence.

Estimated reading time: 10–15 minutes

Table of Contents

  1. What Is HTML?
  2. Tags & Elements
  3. The Page Skeleton
  4. Headings & Text
  5. Links & Images
  6. Lists & Tables
  7. Attributes (the “settings” on tags)
  8. Semantic HTML
  9. Your First Form
  10. Nesting & Validation
  11. Beginner Best Practices
  12. Copy-Paste Starter Template
  13. Next Steps

1) What Is HTML?

HTML stands for HyperText Markup Language. It’s the standard language used to create web pages. Think of it as the skeleton of the web—HTML structures content (headings, paragraphs, images, links), while CSS handles design and JavaScript adds interactivity.

A web browser (Chrome, Firefox, etc.) reads your HTML file and renders it as a page. If the HTML is clear and well-structured, your page will be easier to style, maintain, and make accessible.

Structure Accessible Open Standard

2) Tags & Elements

HTML is made of elements, and most elements are written with an opening tag and a closing tag. 

<tagname>Content goes here</tagname>

Example:

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

Some elements are void (self-closing) and don’t wrap content, like the line break <br> or an image <img>.

Tip: Tags are case-insensitive, but writing them in lowercase is the standard.

3) The Page Skeleton

Every modern HTML page starts with a simple structure:

<!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>
  • <!DOCTYPE html> tells the browser to use modern HTML.
  • <html> wraps your whole page.
  • <head> holds meta info (title, character set, SEO).
  • <body> contains everything visible on the page.

4) Headings & Text

Use headings to give your page a logical outline. There are six levels:

<h1>Main Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>
<h4>Detail Heading</h4>

Paragraphs, emphasis, and inline elements:

<p>A paragraph of text.</p>
<em>Emphasized</em> and <strong>important</strong> words.
A line break here<br>without starting a new paragraph.
Avoid: Using headings only to make text big. Headings should reflect the content hierarchy.

6) Lists & Tables

Lists

<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>

<ol>
  <li>Mix ingredients</li>
  <li>Bake</li>
  <li>Serve</li>
</ol>

Tables (for data)

<table>
  <thead>
    <tr><th>Product</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>T-Shirt</td><td>$20</td></tr>
    <tr><td>Cap</td><td>$12</td></tr>
  </tbody>
</table>
Avoid: Using tables for page layout. Use CSS for layout; tables are for tabular data.

7) Attributes (the “settings” on tags)

Attributes add extra information to elements. They go inside the opening tag as name="value" pairs. 

<a href="https://example.com" title="More info">Example</a>
<img src="cat.jpg" alt="A smiling cat" width="400" height="300">

Common attributes include id, class, src, href, alt, title, width, and height.

8) Semantic HTML

Semantic tags describe the meaning of content, which helps accessibility and SEO. 

<header>Site header</header>
<nav>Main navigation</nav>
<main>
  <article>A blog post</article>
  <section>A themed section</section>
</main>
<aside>Sidebar content</aside>
<footer>Site footer</footer>
Tip: Use one <h1> per page (usually inside <main> or the top of the document) to define the page’s primary topic.

9) Your First Form

Forms collect user input and send it to a server.

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

  <label for="plan">Plan</label>
  <select id="plan" name="plan">
    <option value="free">Free</option>
    <option value="pro">Pro</option>
  </select>

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

Use meaningful name attributes (they become keys on the server) and connect labels to inputs using for and matching id.

10) Nesting & Validation

Nesting means placing elements inside others. Always close tags in the reverse order you opened them and avoid overlapping structures. 

<p>Correct: <strong>bold text</strong> inside a paragraph.</p>

<p>Incorrect: <strong>bold text</p></strong>  <!-- don’t cross-close -->

Validate your HTML using online validators to catch typos and structural mistakes early.

11) Beginner Best Practices

  • Always start with the modern <!DOCTYPE html>.
  • Use lang on <html> (e.g., lang="en").
  • Include <meta charset="utf-8"> and a descriptive <title>.
  • Write clean, indented code; keep lines short and readable.
  • Add alt text to images; it’s crucial for accessibility.
  • Use semantic tags for structure; don’t use tables for layout.
  • Keep content and presentation separate (learn CSS for styling).
  • Test pages on mobile (the viewport meta tag helps responsiveness).

12) Copy-Paste Starter Template

Use this as a simple starting point for any new page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Your Page Title</title>
  <meta name="description" content="Short description of this page." />
</head>
<body>

  <header>
    <h1>Welcome to My Page</h1>
  </header>

  <main>
    <section>
      <h2>About This Page</h2>
      <p>Write a short intro here.</p>
    </section>

    <section>
      <h2>Gallery</h2>
      <img src="images/example.jpg" alt="An example photo">
    </section>
  </main>

  <footer>
    <p>© <span id="year"></span> Your Name</p>
  </footer>

  <script>
    document.getElementById('year').textContent = new Date().getFullYear();
  </script>
</body>
</html>

13) Next Steps

  • Learn basic CSS to style your HTML (colors, spacing, layout).
  • Explore responsive design so pages look good on phones.
  • Add JavaScript for interactivity (menus, forms, dynamic content).
  • Practice by rebuilding simple pages you like—start small and iterate.

Remember: clean structure first, then style and interactivity. That’s how pros do it.