Your First HTML Page – Step-by-Step Beginner Tutorial

Step 1 – The HTML5 Boilerplate

Every HTML page starts with the same skeleton. In VS Code, type ! and press Tab to generate it automatically. Here it is with detailed explanations:

HTML – The HTML5 boilerplate

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

  <!-- Everything visible goes inside <body> -->

</body>
</html>

Save this as index.html. Open it with Live Server. You will see a blank page with the title "My First HTML Page" in the browser tab. The page is blank because the <body> is empty — time to fill it in.

ℹ️

Why index.html?

By convention, the main page of a website is named index.html. When someone visits https://example.com/, the web server automatically serves index.html from the root folder. All other pages have descriptive names: about.html, contact.html, products.html.

Step 2 – Headings

HTML has six heading levels: <h1> through <h6>. <h1> is the most important (largest) and <h6> is the least important (smallest). Use headings to create a logical document outline — like chapters in a book.

HTML – Headings

<body>
  <h1>Welcome to My Personal Website</h1>
  <h2>About Me</h2>
  <h2>My Projects</h2>
  <h3>Web Projects</h3>
  <h3>Mobile Projects</h3>
  <h2>Contact</h2>
</body>

▶ Browser output

Welcome to My Personal Website About Me My Projects Web Projects Mobile Projects Contact

⚠️

Use only one <h1> per page

The <h1> represents the single most important heading on the page — its title. Search engines use it as a key signal for what the page is about. Every page should have exactly one <h1>. Use <h2>–<h6> for subheadings, following a logical hierarchy without skipping levels (e.g. don't go from <h2> directly to <h4>).

Step 3 – Paragraphs and Text Formatting

The <p> tag creates a paragraph. Use <strong> for important text (bold), <em> for emphasised text (italic), and <br> for a line break within a paragraph.

HTML – Paragraphs and text formatting

<h2>About Me</h2>

<p>
  My name is <strong>Jane Smith</strong> and I am a
  <em>front-end developer</em> based in London.
  I specialise in building fast, accessible web interfaces.
</p>

<p>
  I have <strong>5 years of experience</strong> with HTML, CSS,
  and JavaScript. I recently started learning
  <em>OWL JS</em> for Odoo development.
</p>

<!-- <br> forces a line break within text (use sparingly) -->
<p>
  Phone: 07700 900 000<br>
  Email: jane@example.com<br>
  Location: London, UK
</p>

Step 4 – Links

The <a> (anchor) tag creates a hyperlink. The href attribute specifies the destination URL. Links are what make the web a web.

HTML – Links

<!-- External link — opens in same tab -->
<a href="https://ylearner.org">Visit ylearner</a>

<!-- External link — opens in new tab (target="_blank") -->
<!-- rel="noopener noreferrer" is a security best practice -->
<a href="https://github.com" target="_blank" rel="noopener noreferrer">
  My GitHub Profile
</a>

<!-- Internal link — navigates to another page in the same site -->
<a href="about.html">About Me</a>
<a href="/contact.html">Contact (absolute path)</a>

<!-- Jump link — scrolls to an element with a matching id -->
<a href="#projects">Jump to Projects Section</a>
<!-- ... later in the page ... -->
<h2 id="projects">My Projects</h2>

<!-- Email link — opens the user's email client -->
<a href="mailto:jane@example.com">Send me an email</a>

<!-- Phone link — tappable on mobile -->
<a href="tel:+447700900000">Call me</a>

Step 5 – Images

The <img> tag embeds an image. It is a void element — no closing tag. The two required attributes are src (the image path or URL) and alt (description for screen readers and if the image fails to load).

HTML – Images

<!-- Local image file (in the same folder as index.html) -->
<img src="photo.jpg" alt="Jane Smith smiling at camera" width="300" height="200">

<!-- Image from a URL -->
<img
  src="https://picsum.photos/400/300"
  alt="A random placeholder image"
  width="400"
  height="300"
>

<!-- Image inside a link (clicking the image navigates) -->
<a href="https://ylearner.org">
  <img src="logo.png" alt="ylearner homepage" width="120">
</a>

<!-- Responsive image (modern approach — CSS handles sizing) -->
<img src="hero.jpg" alt="Hero banner" style="max-width: 100%; height: auto;">

💡

Always write descriptive alt text

The alt attribute is not optional — it is a legal requirement in many countries for accessibility. Screen readers read alt text aloud to visually impaired users. Search engines also use alt text to understand image content. Write a concise description of what the image shows. For decorative images that add no information, use an empty alt: alt="".

Step 6 – Lists

HTML has two main list types: unordered (<ul>) for bullet points and ordered (<ol>) for numbered items. Both use <li> (list item) elements as children.

HTML – Lists

<!-- Unordered list — bullet points -->
<h3>My Skills</h3>
<ul>
  <li>HTML5</li>
  <li>CSS3 and Flexbox</li>
  <li>JavaScript (ES6+)</li>
  <li>OWL JS and Odoo</li>
</ul>

<!-- Ordered list — numbered -->
<h3>How to Make a Cup of Tea</h3>
<ol>
  <li>Boil the kettle</li>
  <li>Place a tea bag in a mug</li>
  <li>Pour boiling water into the mug</li>
  <li>Wait 3 minutes</li>
  <li>Remove tea bag and add milk</li>
</ol>

<!-- Nested list — list inside a list item -->
<ul>
  <li>Front-End
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Back-End
    <ul>
      <li>Python</li>
      <li>Node.js</li>
    </ul>
  </li>
</ul>

The Complete First Page

Putting it all together — here is a complete personal about page using everything from this lesson:

HTML – Complete first page (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jane Smith – Front-End Developer</title>
</head>
<body>

  <h1>Jane Smith – Front-End Developer</h1>

  <img src="https://picsum.photos/200/200" alt="Profile photo of Jane Smith" width="200">

  <h2>About Me</h2>
  <p>
    I am a <strong>front-end developer</strong> with 5 years of experience
    building fast, accessible web interfaces. Currently learning
    <em>OWL JS</em> for Odoo module development.
  </p>

  <h2>My Skills</h2>
  <ul>
    <li>HTML5 and Semantic Markup</li>
    <li>CSS3 — Flexbox and Grid</li>
    <li>JavaScript (ES6+)</li>
    <li>React</li>
    <li>OWL JS and Odoo</li>
  </ul>

  <h2>My Projects</h2>
  <ol>
    <li>Portfolio Website — <a href="https://janesmith.dev" target="_blank" rel="noopener noreferrer">janesmith.dev</a></li>
    <li>Odoo Custom Dashboard Module</li>
    <li>React Todo App</li>
  </ol>

  <h2>Contact</h2>
  <p>
    Email: <a href="mailto:jane@example.com">jane@example.com</a><br>
    GitHub: <a href="https://github.com" target="_blank" rel="noopener noreferrer">github.com/janesmith</a>
  </p>

</body>
</html>

Save this, open with Live Server, and you have a real — albeit unstyled — about page. The next step is CSS to make it look good.

📋 Summary

Every HTML page needs the boilerplate: <!DOCTYPE html>, <html lang>, <head> with <meta charset> + <meta viewport> + <title>, and <body>.
Headings: <h1>–<h6> — one <h1> per page, logical hierarchy for subheadings.
Paragraphs: <p> — use <strong> for important text and <em> for emphasis.
Links: <a href="url"> — use target="_blank" rel="noopener noreferrer" for external links.
Images: <img src="path" alt="description"> — always write descriptive alt text.
Lists: <ul> (bullets) and <ol> (numbered), both containing <li> items. Can be nested.

🏋️ Exercise

Build your own about page using everything in this lesson:

Start with the HTML5 boilerplate. Set the <title> to your name.
Add an <h1> with your name and job title or goal.
Add a section with an <h2> and two <p> tags describing yourself. Use <strong> and <em> at least once each.
Add an unordered list of at least 5 skills or interests.
Add an ordered list of your top 3 goals for this year.
Add at least two links: one to an external site (opens in new tab) and one email link.
Add an image (use https://picsum.photos/250/250 if you don't have a photo handy). Write a proper alt description.

🔥 Challenge Exercise

Create a two-page mini-website. Page 1: index.html (your about page from above). Page 2: projects.html — a page listing three fictional or real projects, each with a heading, a short description paragraph, a list of technologies used, and a link. Add navigation links on both pages so users can switch between them. Use relative paths in the <a href> attributes.