Learn HTML: Your First Page

HTML (HyperText Markup Language) is the foundation of every website. This beginner-friendly tutorial will teach you how to create your first HTML page from scratch.

What is HTML?

HTML is the standard markup language for creating web pages. Think of it as the skeleton of a website—it provides the structure and content. HTML uses special codes called “tags” to define different parts of your page, like headings, paragraphs, links, and images.

Your First HTML Document

Every HTML document follows a standard structure. Here’s a minimal HTML page you can copy and save as index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first HTML page.</p>
</body>
</html>

Understanding the Structure

<!DOCTYPE html>

This declaration tells the browser that this document is written in HTML5 (the latest version of HTML). It must be the very first line of your HTML file.

<html>

The root element that wraps all content on the page. The lang="en" attribute specifies that the page content is in English, which helps search engines and screen readers.

Contains metadata about your page—information that isn’t displayed on the page itself but is important for browsers and search engines:

<body>

Contains all the visible content of your page—everything users will see and interact with.

Adding Headings

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important):

<h1>Main Page Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Minor Heading</h4>
<h5>Smaller Heading</h5>
<h6>Smallest Heading</h6>

Best Practice: Use only one <h1> per page (your main title), and use the other headings to organize your content hierarchically.

Working with Text

Paragraphs are created with the <p> tag. You can also emphasize text with <strong> (bold) and <em> (italic):

<p>This is a regular paragraph.</p>
<p>This paragraph has <strong>bold text</strong> and <em>italic text</em>.</p>
<p>You can also combine <strong><em>bold and italic</em></strong> together!</p>

Links are what make the web interconnected. Use the <a> (anchor) tag with an href attribute:

<a href="https://htmleditor.net">Visit htmlEditor.net</a>
<a href="/about">About Page (relative link)</a>
<a href="https://google.com" target="_blank">Open in New Tab</a>

Adding Images

Images make your page more engaging. Use the <img> tag with src (image URL) and alt (description) attributes:

<img src="logo.png" alt="Company Logo" />
<img src="https://example.com/photo.jpg" alt="Beautiful scenery" width="600" />

Important: Always include the alt attribute—it helps visually impaired users and improves SEO.

Creating Lists

Unordered Lists (Bullets)

<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

Ordered Lists (Numbers)

<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>

Complete Example Page

Here’s a complete HTML page that uses everything we’ve learned:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Recipe Website</title>
</head>
<body>
  <h1>Chocolate Chip Cookies</h1>

  <img src="cookies.jpg" alt="Delicious chocolate chip cookies" width="500" />

  <h2>Introduction</h2>
  <p>
    These are the <strong>best</strong> chocolate chip cookies you'll ever make!
    This recipe has been in my family for <em>generations</em>.
  </p>

  <h2>Ingredients</h2>
  <ul>
    <li>2 cups flour</li>
    <li>1 cup butter</li>
    <li>1 cup sugar</li>
    <li>2 eggs</li>
    <li>2 cups chocolate chips</li>
  </ul>

  <h2>Instructions</h2>
  <ol>
    <li>Preheat oven to 350°F (175°C)</li>
    <li>Mix butter and sugar until creamy</li>
    <li>Beat in eggs one at a time</li>
    <li>Add flour and mix well</li>
    <li>Fold in chocolate chips</li>
    <li>Bake for 10-12 minutes</li>
  </ol>

  <h2>More Recipes</h2>
  <p>
    Check out my <a href="/recipes">other recipes</a> or
    <a href="https://example.com" target="_blank">visit our blog</a>!
  </p>
</body>
</html>

Try It Yourself!

The best way to learn HTML is by doing. You can:

Next Steps

Now that you know the basics, explore these topics:

💡 Practice Makes Perfect

Keep practicing and experimenting with HTML. Try our ready-made templates to see more examples, or explore our step-by-step tutorials for hands-on learning!