HTML for Beginners: Your First Webpage in 10 Minutes

So you want to build a website. Good news: HTML is the easiest place to start, and you can write your first webpage in about 10 minutes.

What is HTML?

HTML stands for HyperText Markup Language. It’s not a programming language — it’s a markup language that tells browsers how to structure content. Every website you’ve ever visited is built on HTML.

Think of HTML as the skeleton of a webpage. It defines what’s on the page: headings, paragraphs, images, links, forms, and more. CSS makes it look pretty, and JavaScript makes it interactive — but HTML comes first.

Your first HTML file

Every HTML document follows the same basic structure:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first webpage.</p>
  </body>
</html>

Let’s break it down:

<!DOCTYPE html> — tells the browser this is an HTML5 document
<html> — the root element that wraps everything
<head> — metadata (title, character set, links to CSS)
<body> — the visible content of your page

Common HTML elements

Here are the elements you’ll use most often:

Headings

HTML has six heading levels, <h1> through <h6>:

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>

Use <h1> once per page for the main title. Use <h2> for major sections, <h3> for subsections, and so on.

Paragraphs and text

<p>This is a paragraph.</p>
<p>You can make text <strong>bold</strong> or <em>italic</em>.</p>

Links

<a href="https://learnhypersheets.com?utm_source=learnhtmlcss.dev&utm_medium=blog&utm_campaign=html-beginners">Learn web development</a>

The href attribute tells the browser where the link goes.

Images

<img src="photo.jpg" alt="A description of the photo" />

Always include the alt attribute — it describes the image for screen readers and shows up when the image can’t load.

Lists

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

<!-- Ordered (numbered) list -->
<ol>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
  <li>Build something</li>
</ol>

What’s next?

You now know enough HTML to build a simple webpage. The best way to learn is to practice writing code, not just reading about it.

Hyper Sheets has 100+ interactive HTML exercises where you write real code in your browser and get instant feedback. No setup, no install — just open and start coding.

Start with the HTML Basics category and work your way through elements, forms, semantic HTML, and more.