How to Use HTML- A Beginner's Tutorial

What HTML Actually Is

HTML stands for HyperText Markup Language. It's the backbone of every webpage you've ever visited. No HTML, no website. Simple as that.

People make HTML sound complicated. It isn't. HTML is just a way to tell your browser what content goes where. That's it. You're labeling stuff—headings, paragraphs, images, links—and the browser displays it.

You don't need to be a programmer to learn HTML. You need patience and attention to detail. That's the bitter truth.

The Basic Structure of an HTML Document

Every HTML page follows the same skeleton. Memorize this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Your Page Title</title>
</head>
<body>
    <!-- Your content goes here -->
</body>
</html>

Here's what each part does:

<!DOCTYPE html> — Tells the browser you're using modern HTML5
<html> — The root element that wraps everything
<head> — Stuff the browser needs but users don't see (title, meta info)
<body> — Everything visible on the page lives here

That's the foundation. Build from there.

Essential HTML Tags You Need to Know

There are dozens of HTML tags. You don't need all of them right now. Start with these:

Headings: <h1> Through <h6>

Use headings to structure your content. <h1> is the main title—use it once per page. <h2> for major sections. <h3> for subsections. Don't skip heading levels just because you like the way an h2 looks better.

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

Paragraphs: <p>

The <p> tag wraps text paragraphs. Browsers add space above and below paragraphs automatically. Don't use multiple <p> tags to create spacing—that's lazy and wrong.

Links: <a>

Links require the href attribute. Without it, the tag does nothing:

<a href="https://example.com">Click this link</a>

Add target="_blank" if you want the link to open in a new tab:

<a href="https://example.com" target="_blank">Opens in new tab</a>

Images: <img>

Images are self-closing tags. They need a src (source) and alt (alternative text):

<img src="photo.jpg" alt="Description of the image">

The alt text matters. It's required for accessibility and helps when images fail to load.

Lists: <ul> and <ol>

Unordered lists (<ul>) use bullet points. Ordered lists (<ol>) use numbers:

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

Attributes: Adding Information to Tags

Attributes provide extra information about an element. They go inside the opening tag:

<tag attribute="value">Content</tag>

Common attributes you'll use:

href — for links
src — for images and other media
alt — for image descriptions
class — for styling (CSS)
id — for unique identification

Some attributes are boolean—they just need to be present, not given a value. disabled and required work this way.

Semantic HTML: Why It Matters

Semantic tags describe their content's meaning. They're not just formatting—they tell both browsers and developers what the content is.

Non-Semantic	Semantic	Purpose
<div>	<header>	Page or section header
<div>	<nav>	Navigation links
<div>	<article>	Self-contained content
<div>	<footer>	Footer content
<div>	<section>	Thematic grouping

Use semantic tags because they help with SEO, accessibility, and code readability. If you're wrapping something in a <div> just because, you're probably doing it wrong.

Getting Started: Your First HTML File

Here's how to actually do this:

Open a text editor. Not Word—use Notepad, VS Code, or Sublime Text
Copy the basic HTML skeleton above
Save the file as index.html
Double-click the file to open it in your browser

That's your first webpage. It probably looks boring. That's fine. You're learning the structure, not winning design awards yet.

Quick Practice Exercise

Create a simple page that includes:

An h1 with your name
An h2 with "About Me"
A paragraph about yourself
A link to a website you use
An image (use any image file)
A list of your hobbies

Build this from memory first. Check the reference only when you're stuck. You'll learn faster that way.

Common Beginner Mistakes

You'll make these. Everyone does:

Forgetting to close tags — Every opening tag needs a closing tag (except self-closing ones like <img>)
Nesting tags incorrectly — Close inner tags before outer ones: <p><strong>correct</strong></p>
Using the wrong DOCTYPE — Just use <!DOCTYPE html>
Ignoring the alt attribute — It's not optional
Putting block elements inside inline elements — You can't nest a <div> inside a <span>

What Comes Next

HTML is only half the equation. You'll need CSS to make things look decent and JavaScript to add interactivity. But learn HTML first. Get comfortable with structure before you worry about style.

Build simple pages. Break them. Fix them. That's how you actually learn this stuff—not by reading tutorials, but by making mistakes and debugging them.