What is HTML? A Beginner’s Guide with Simple Examples

Websites are in my simple terms document files sitting up there on a server. With this simple illutration web design and development will be simple. Now what the hell is HTML? HTML - Hypertext Markup Language is the structure of the web, like in building a real house you structure it first with blocks or wood. Thats while a website job is also called a project.

If you’ve ever wondered how websites are made, the answer always starts with HTML. Every page you see on the internet, from blogs to social media platforms, uses HTML as its foundation.

In this guide, we’ll explore HTML in a way that’s easy to understand, with practical examples you can try yourself — even if you’ve never written a line of code before.

Understanding HTML

HTML stands for HyperText Markup Language. Let’s break that down:

HyperText → Text with clickable links that take you to other pages
Markup → Special instructions (called tags) that tell the browser how to display content
Language → A way to communicate with web browsers

In simple terms:

HTML is the skeleton of your website. It tells the browser what each part of your page is — headings, paragraphs, images, and links.

Think of HTML like building a house:

HTML = the walls and structure
CSS = the paint, furniture, and style
JavaScript = electricity, plumbing, and interactive features

Without HTML, your website wouldn’t exist. It’s the first step in creating anything online.

The Basic Structure of an HTML Page

Every HTML page follows a similar structure. Here’s a simple example:


<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>

    <h1>Hello World!</h1>
    <p>Welcome to my very first website.</p>

</body>
</html>

What’s happening here?

<!DOCTYPE html> – tells the browser this is an HTML5 page.
<html> – the root element containing the entire page.
<head> – contains meta information like the page title.
<title> – the text that appears in the browser tab.
<body> – all visible content goes here (headings, paragraphs, images, etc.).

Understanding HTML Tags

HTML uses tags to define elements. Tags usually come in pairs:


<p>This is a paragraph.</p>

<p> → opening tag
</p> → closing tag
The content goes in between

Some tags, like <img>, don’t need a closing tag.

Common HTML Tags You’ll Use

1. Headings


<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>

There are six levels: <h1> to <h6>
<h1> is the largest, <h6> is the smallest

2. Paragraphs


<p>This is a simple paragraph of text.</p>

3. Links


<a href="https://google.com" target="_blank">Visit Google</a>

href specifies the link destination
target="_blank" opens the link in a new tab

4. Images


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

src = path to your image
alt = text description (important for accessibility)

5. Lists

Unordered list (bullets):


<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Ordered list (numbers):


<ol>
    <li>Step One</li>
    <li>Step Two</li>
</ol>

Build Your First Simple Page

Real coding skills starts by building something really special.

Let’s create a practical example.

Choose your code editor like VScode, Sublime text or Atom - This code editors helps dictect wrong syntaxs with its syntax highlighting and helps you code faster with its auto-complete feautures. Also make it eaiser to install some extensions - like Live Server so you don't have to refresh you browser each time you update and save your code.
Save the file as index.html.
Copy this code:


<!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
</head>
<body>

    <h1>Welcome to My Website</h1>

    <p>This is my first web design project. I’m learning HTML step by step!</p>

    <h2>About Me</h2>
    <p>I love learning web development and sharing what I know.</p>

    <h2>My Skills</h2>
    <ul>
        <li>HTML</li>
        <li>CSS (coming soon)</li>
        <li>JavaScript (coming later)</li>
    </ul>

    <a href="https://google.com" target="_blank">Search Google</a>

</body>
</html>

Open the file in your browser.

Here Are Common Beginner Mistakes To Advoid

Forgetting closing tags
```
<p>Hello</p> 
```

<p>Hello

Although some tags are self closing - you dont need to close them. But we come to that latter in this toturial.

Wrong file extension

Always use .html, not .txt. Example index.html, or mywebsite.html - index.html is prefered.

Improper nesting of tags


<p><b>Bold Text</b></p> <!-- Correct -->

Practice Exercises

Try these to reinforce your skills:

Create a page with your name as a heading and a paragraph about yourself.
Add a list of your favorite websites.
Insert an image with a proper alt description.
Add a link to a site you visit often.

What’s Next?

After mastering HTML, the next steps are:

CSS – to make your site look visually appealing.
Responsive Design – so it looks good on mobile devices.
JavaScript – to add interactivity.

Summary

HTML is the foundation of every website.
It uses tags to structure content.
Start simple: headings, paragraphs, lists, images, and links.
Practice, experiment, and build small projects.

Tech Chayah

Search This Blog