HTML Basics Explained — Build Your First Web Page
HTML (HyperText Markup Language) is the standard language used to structure content on the web — it tells the browser what text is a heading, what is a paragraph, and where images or links go.
What You’ll Learn
By the end of this tutorial, you’ll understand what HTML is, how tags and attributes work, and you’ll have built your first web page from scratch. You’ll also know common mistakes to avoid and where to go next.
Why HTML Matters
Every website you visit — Google, YouTube, Amazon, this page — uses HTML. Without it, a browser wouldn’t know what to show. You type a URL, the server sends back HTML, and the browser reads that HTML to display the page.
Real-world use: Companies like Doda Browser render millions of HTML pages every day. When you build a web app, you start with HTML. It’s the foundation that CSS styles and JavaScript brings to life.
Where This Fits in Your Learning Path
flowchart LR
A["No knowledge"] --> B["**HTML Basics**"]
B --> C["Text & Headings"]
C --> D["Links & Images"]
D --> E["CSS Basics"]
E --> F["Build Your First Site"]
style B fill:#f97316,stroke:#c2410c,color:#fff
style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
style F fill:#22c55e,stroke:#16a34a,color:#fff
What is HTML?
Let’s start simple. Imagine you’re writing a letter. You have a title at the top, maybe “Dear Mom.” Then paragraphs. Maybe a list of things you’ve been up to. A signature at the end.
Now imagine you need to send that letter to a computer so the computer can display it. The computer doesn’t know what “this is a title” means — you need to mark up the text with labels that the computer understands.
That’s what HTML is. It stands for HyperText Markup Language.
Let’s break that down:
| Word | What it means |
|---|---|
| HyperText | Text that can link to other text (like clicking a link to jump to another page) |
| Markup | You “mark up” text with tags to tell the browser what each part is |
| Language | It has its own rules and syntax, just like English or Spanish |
How Tags Work
Think of HTML tags like sticky labels you put on boxes.
You have a box. If you put a label that says “Books,” you know what’s inside. If you put a label that says “Clothes,” you know that’s different.
HTML does the same thing with content on a page:
<!-- The <h1> tag labels this as a main heading -->
<h1>This is a Main Heading</h1>
<!-- The <p> tag labels this as a paragraph -->
<p>This is a paragraph of text.</p>Why this matters: Without these labels, a browser would just show a wall of text. You wouldn’t know what’s important, what’s a link, or what’s an image. HTML tags bring structure and meaning to your content.
How the Browser Reads HTML
When you open an HTML file in a browser, the browser reads it from top to bottom, line by line:
- It sees
<!DOCTYPE html>— “OK, this is an HTML5 document.” - It sees
<html>— “Starting the HTML now.” - It sees
<head>— “Metadata section (stuff the user doesn’t see directly).” - It sees
<body>— “Content the user should see.” - It follows each tag and renders (displays) the content accordingly.
This is called parsing. The browser parses your HTML and turns it into the visual page you see.
Your First HTML Page
Let’s build something right now. Create a new file on your computer called index.html and type (or copy) the following:
<!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 web page built with HTML.</p>
</body>
</html>Now open that file in any browser (Chrome, Firefox, Edge, Doda Browser — any of them). You’ll see your first web page come to life!
Let’s walk through every single line so you understand what’s happening:
<!DOCTYPE html>
This tells the browser: “Hey, I’m written in HTML5 (the latest version).” Without this, the browser might get confused and display your page incorrectly.
<html lang="en">
This is the root element — it wraps everything. lang="en" says the page is in English. This helps screen readers (for visually impaired users) pronounce words correctly and helps search engines understand your page’s language.
<head> and </head>
The <head> is like the settings panel of your page. Stuff in here is NOT shown on the page itself. It contains instructions for the browser, search engines, and social media platforms.
<meta charset="UTF-8">
This tells the browser which character set to use. UTF-8 supports every character from every language, plus emojis. Without it, special characters like é or 😊 might show up as garbage.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This makes your page look good on phones and tablets. It tells the browser: “match the screen width and don’t zoom in by default.” Without this, your page would look tiny and zoomed out on mobile devices.
<title>My First Page</title>
This is the text that appears in the browser tab. It’s also what search engines show as the clickable link in results. Very important for SEO.
<body> and </body>
Everything inside <body> is what the user sees on the page. This is your visible content.
<h1>Hello, World!</h1>
<p>This is my first web page built with HTML.</p>The <h1> is a top-level heading. The <p> is a paragraph. The browser displays them as a large bold title and a normal text block underneath.
Why This Structure Matters
You might be wondering: “Why do I need all this boilerplate? Why not just write the text directly?”
Here’s why:
- The
<head>tells browsers, search engines, and social media how to handle your page — without meta tags, your page won’t display correctly on phones and won’t rank well in search results. - Separating
<head>from<body>keeps instructions separate from content. Imagine if the instructions for assembling furniture were printed on the same page as the furniture diagram — it would be confusing. <!DOCTYPE html>prevents “quirks mode” — older browsers used different rendering rules. This line ensures modern standards are used.
Essential HTML Tags
Now that you’ve seen a complete page, let’s learn the individual building blocks.
Headings (<h1> through <h6>)
Think of headings like a book’s table of contents:
Book Title → <h1>
Chapter 1 → <h2>
Section 1.1 → <h3>
Section 1.2 → <h3>
Chapter 2 → <h2>
Section 2.1 → <h3><h1>is the most important heading — use it once per page for the main title<h2>through<h6>are sub-headings, each less important than the last- Search engines use headings to understand your page structure — a well-structured heading hierarchy helps your SEO
<h1>Main Title (use once per page)</h1>
<h2>Section Heading</h2>
<h3>Sub-section</h3>
<h4>Sub-sub-section</h4>
<h5>Minor heading</h5>
<h6>Smallest heading</h6><h1> — this tells Google what the page is about. Think of it as the page title. Use <h2> through <h6> to create a logical hierarchy just like a book outline.Paragraphs & Text
The <p> tag creates a paragraph. Browsers automatically add space before and after paragraphs to make text readable — you don’t need to add extra blank lines.
<p>This is a paragraph of text. Browsers add space before and after each paragraph so text doesn't feel like one big wall of words.</p>
<p>This is <strong>bold text</strong> and this is <em>italic text</em>.</p>
<p>Use <br> to insert a line break inside a paragraph.</p>A few text-formatting tags:
| Tag | What it does | Example |
|---|---|---|
<strong> | Bold text — also tells screen readers to emphasize | <strong>Warning!</strong> |
<em> | Italic text — also adds verbal emphasis | <em>Please read carefully</em> |
<br> | Line break (like pressing Enter mid-paragraph) | Line 1<br>Line 2 |
<hr> | A horizontal line / thematic break | <hr> |
Lists
Lists are everywhere on the web — navigation menus, product features, step-by-step instructions. There are two types:
Unordered lists (<ul>) — use when order doesn’t matter (like a shopping list):
<ul>
<li>HTML structures content</li>
<li>CSS adds style</li>
<li>JavaScript adds behavior</li>
</ul>Renders as:
- HTML structures content
- CSS adds style
- JavaScript adds behavior
Ordered lists (<ol>) — use when sequence matters (like a recipe or steps):
<ol>
<li>Plan your page</li>
<li>Write the HTML</li>
<li>Add CSS</li>
<li>Test in browser</li>
</ol>Renders as:
- Plan your page
- Write the HTML
- Add CSS
- Test in browser
Links & Images
Links (<a> tag) are what make the web “web-like” — they connect pages together:
<!-- The 'href' attribute tells the browser where the link goes -->
<a href="https://tutorials.dodatech.com">Visit DodaTech Tutorials</a>
<!-- You can link to other pages on your own site too -->
<a href="/frontend/html/html-text">Next: Text & Headings</a>The <a> tag has two parts:
- The
hrefattribute — the destination URL - The text between the tags — what the user clicks on
Images (<img> tag) embed pictures into your page:
<img src="https://via.placeholder.com/600x200" alt="A colorful placeholder image">Always use alt text on images! The alt attribute describes the image for:
- Screen readers — visually impaired users hear the description
- Search engines — helps Google understand what the image shows
- Broken images — users still see the description when the image fails to load
The <img> tag is self-closing — it doesn’t need a </img> tag because it doesn’t wrap any text content. It’s a void element.
Attributes — Adding Superpowers to Tags
Attributes give extra instructions to HTML tags. Think of them like settings on a microwave — the microwave itself is the tag, but you set the time, power level, and mode using its buttons (attributes).
Attributes always go inside the opening tag and follow the pattern name="value":
<!-- 'href' attribute specifies the URL -->
<a href="https://example.com">Click me</a>
<!-- 'src' and 'alt' are attributes of <img> -->
<img src="photo.jpg" alt="A scenic mountain view">
<!-- 'class' is used for CSS styling -->
<p class="highlight">This paragraph can be styled with CSS.</p>
<!-- 'id' must be unique on the page — used for linking and JavaScript -->
<div id="main-content">This is the main area of the page</div>Common Attributes at a Glance
| Attribute | Used On | Purpose | Example |
|---|---|---|---|
href | <a> | Link destination URL | <a href="page.html"> |
src | <img>, <script> | File source path | <img src="photo.jpg"> |
alt | <img> | Accessible description | <img alt="A red flower"> |
class | Any tag | CSS class reference | <p class="highlight"> |
id | Any tag | Unique identifier | <div id="header"> |
style | Any tag | Inline CSS styling | <p style="color:red"> |
title | Any tag | Tooltip on hover | <abbr title="World Health Organization">WHO</abbr> |
HTML and Security
Even with a simple language like HTML, security matters. Here are two things every beginner should know:
1. Always use alt text on images. This isn’t just for accessibility — it also prevents phishing attacks where an image says “Click here to log in” but screen readers can’t detect it.
2. Never trust user input. If you display content that users typed (like comments on a blog post), you must escape HTML characters — otherwise someone could inject malicious code. This is called XSS (Cross-Site Scripting), and it’s one of the most common web vulnerabilities.
DodaTech Insight: Security tools like Durga Antivirus Pro scan web pages for malicious HTML and JavaScript. Understanding how HTML works helps you write safer code from day one.
Common HTML Mistakes (And How to Avoid Them)
Here are the most common mistakes beginners make. Keep these in mind and you’ll save hours of debugging:
1. Forgetting to Close Tags
<!-- ❌ Wrong: missing closing tag -->
<p>This paragraph never ends...
<!-- ✅ Correct: always close what you open -->
<p>This paragraph ends properly.</p>Some tags like <img> and <br> are self-closing, but most tags need both an opening and closing tag.
2. Using the Same id Twice
<!-- ❌ Wrong: id must be unique -->
<div id="header">...</div>
<div id="header">...</div>
<!-- ✅ Correct: use class for repeated styles -->
<div class="header">...</div>
<div class="header">...</div>Remember: id is like a person’s passport number — it identifies exactly one thing. class is like a team jersey — many elements can share it.
3. Nesting Tags Incorrectly
<!-- ❌ Wrong: overlapping tags -->
<p>This is <strong>bold and <em>italic</strong></em>
<!-- ✅ Correct: close in reverse order (first opened, last closed) -->
<p>This is <strong>bold and <em>italic</em></strong></p>Think of it like boxes inside boxes. The inner box must close before the outer box.
4. Using <h1> Multiple Times
<!-- ❌ Wrong: two h1s confuse search engines -->
<h1>My Site</h1>
<h1>Another Title</h1>
<!-- ✅ Correct: one h1 per page, use h2 for sections -->
<h1>My Site</h1>
<h2>Another Title</h2>5. Not Adding alt to Images
<!-- ❌ Wrong: screen readers can't describe this -->
<img src="chart.png">
<!-- ✅ Correct: descriptive alt text -->
<img src="chart.png" alt="Bar chart showing sales growth from 2024 to 2026">Try It Yourself
Build this simple “About Me” page — then edit the code live in the sandbox below:
Try changing: the heading text, add a new list item, or change the link URL. See how the page updates instantly.
Practice Questions
Test your understanding:
Q1: What does HTML stand for? HyperText Markup Language
Q2: What’s the difference between <head> and <body>?<head> contains metadata (title, character set, styles) that isn’t displayed on the page. <body> contains everything visible to the user.
Q3: Which tag creates the largest heading?<h1> — and you should use it only once per page.
Q4: What attribute tells an The <a> tag where to link to?href attribute (e.g., <a href="https://example.com">Click</a>).
Q5: Why should every For accessibility (screen readers describe the image), SEO (search engines understand the image), and fallback (users see the description if the image doesn’t load).<img> tag have an alt attribute?
Challenge
Create a simple “My Favorite Recipes” page that includes:
- A heading with the page title
- An unordered list of 3 recipe names
- A link to an external recipe website
- An image (use a placeholder URL)
Real-World Task
Open any website you like (your favorite blog, news site, etc.), right-click and select “View Page Source” (or Ctrl+U). You’ll see the raw HTML. Try to identify:
- The
<head>section and its<title> - Where headings (
<h1>,<h2>) are used - How links (
<a>) and images (<img>) are written
This is a great way to learn — real websites are the best teachers!
Frequently Asked Questions
What’s Next?
You’ve built your first page. Now let’s go deeper:
Before moving on: Practice by creating 3 different HTML pages — one for yourself, one for a fictional business, and one for a hobby. The more you practice, the more natural it becomes.
What’s Next
Congratulations on completing this Html Basics tutorial! Here’s where to go from here:
- Practice daily — Consistency is more important than long study sessions
- Build a project — Apply what you learned by building something real
- Explore related topics — Check out other tutorials in the same category
- Join the community — Discuss with other learners and share your progress
Remember: every expert was once a beginner. Keep coding!
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro