suraj's Newsletter
Posts
Learn HTML in One Article: A Beginner's Guide

Learn HTML in One Article: A Beginner's Guide

A Complete, Practical Guide to HTML for Absolute Beginners

suraj sakhare
December 10, 2025

HTML (HyperText Markup Language) is the foundation of every website you visit. It's not a programming language—it's a markup language that structures content on the web. Think of it as the skeleton that gives shape to web pages.

The best part? You can learn HTML in a single afternoon and start building websites immediately.

What You Need to Get Started

You only need two things:

A text editor (Notepad, TextEdit, or VS Code)
A web browser (Chrome, Firefox, Safari, or Edge)

That's it. No complex setup required.

Your First HTML Page

Open your text editor and type this:

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

Save it as index.html and open it in your browser. Congratulations—you just created a website!

What each part does:

<!DOCTYPE html> - Tells the browser this is HTML5
<html> - Root element containing everything
<head> - Information about the page (not visible)
<title> - Text shown in the browser tab
<body> - All the visible content
<h1> - Main heading
<p> - Paragraph

Understanding HTML Tags

HTML uses tags to define elements. Most tags come in pairs:

<tagname>Your content here</tagname>

The first tag opens, the content goes in the middle, and the closing tag (with /) ends it.

Some tags are self-closing and don't need a closing tag:

<img src="photo.jpg" alt="A photo"/>
<br/>
<hr/>

Essential HTML Elements

Headings

HTML has six heading levels, from largest to smallest:

<h1>Most Important Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>
<h4>Even Smaller</h4>
<h5>Very Small</h5>
<h6>Smallest</h6>

Tip: Use only one <h1> per page for the main title.

Paragraphs and Line Breaks

<p>This is a paragraph. It automatically adds spacing above and below.</p>

<p>This is another paragraph.<br>
This is a new line within the same paragraph.</p>

<hr/>

The <br> tag creates a line break, while <hr> creates a horizontal line.

Text Formatting

<strong>Bold text (important)</strong>
<em>Italic text (emphasized)</em>
<u>Underlined text</u>
<mark>Highlighted text</mark>

Links

Links connect pages together:

<a href="https://www.example.com">Click here</a>
<a href="about.html">About Us</a>
<a href="mailto:[email protected]">Email Me</a>
<a href="https://www.example.com" target="_blank">Open in new tab</a>

The href attribute specifies where the link goes.

Images

<img src="photo.jpg" alt="Description of the image"/>
<img src="logo.png" alt="Company logo" width="300" height="200"/>

Important: Always include the alt attribute for accessibility and SEO.

Lists

Unordered List (Bullets)

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

Ordered List (Numbers)

<ol>
    <li>Step one</li>
    <li>Step two</li>
    <li>Step three</li>
</ol>

Nested Lists

<ul>
    <li>Fruits
        <ul>
            <li>Apples</li>
            <li>Bananas</li>
        </ul>
    </li>
    <li>Vegetables</li>
</ul>

Tables

Tables organize data in rows and columns:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>25</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Sarah</td>
            <td>30</td>
            <td>London</td>
        </tr>
    </tbody>
</table>

<table> - Creates the table
<tr> - Table row
<th> - Header cell (bold)
<td> - Data cell

Forms

Forms collect information from users:

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4"></textarea>
    
    <button type="submit">Send</button>
</form>

Common Input Types

<input type="text">        <!-- Text field -->
<input type="email">       <!-- Email field -->
<input type="password">    <!-- Password field -->
<input type="number">      <!-- Number field -->
<input type="date">        <!-- Date picker -->
<input type="checkbox">    <!-- Checkbox -->
<input type="radio">       <!-- Radio button -->

<select name="country">
    <option value="">Choose a country</option>
    <option value="usa">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="canada">Canada</option>
</select>

Semantic HTML

Semantic HTML uses meaningful tags that describe their content:

<header>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
    </nav>
</header>

<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content goes here...</p>
    </article>
    
    <aside>
        <h3>Related Content</h3>
        <p>Sidebar information...</p>
    </aside>
</main>

<footer>
    <p>© 2024 Your Website</p>
</footer>

Why use semantic HTML?

Makes your code more readable
Helps search engines understand your content
Improves accessibility for screen readers

Divs and Spans

These are generic containers for grouping content:

<div class="container">
    <h2>Section Title</h2>
    <p>Some content here</p>
</div>

<p>This is <span class="highlight">highlighted text</span> in a sentence.</p>

<div> - Block-level container (starts on new line)
<span> - Inline container (stays within text flow)

Attributes

Attributes provide extra information about elements:

<!-- ID - unique identifier -->
<div id="header"></div>

<!-- Class - can be reused on multiple elements -->
<p class="intro"></p>
<p class="intro highlight"></p>

<!-- Style - inline CSS -->
<p style="color: blue;">Blue text</p>

<!-- Title - shows tooltip on hover -->
<p title="This is a tooltip">Hover over me</p>

Comments

Comments are notes in your code that browsers ignore:

<!-- This is a comment -->

<!-- 
    Multi-line comment
    Useful for documentation
-->

<p>Visible text</p> <!-- Inline comment -->

Complete Example

Let's put it all together:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
</head>
<body>
    <header>
        <h1>John Doe</h1>
        <nav>
            <a href="#about">About</a>
            <a href="#projects">Projects</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <main>
        <section id="about">
            <h2>About Me</h2>
            <p>I'm a web developer passionate about creating beautiful websites.</p>
        </section>

        <section id="projects">
            <h2>My Projects</h2>
            <article>
                <h3>Project 1</h3>
                <img src="project1.jpg" alt="Project 1 screenshot" width="400">
                <p>Description of my first project.</p>
            </article>
        </section>

        <section id="contact">
            <h2>Contact Me</h2>
            <form>
                <label for="email">Email:</label>
                <input type="email" id="email" required>
                
                <label for="message">Message:</label>
                <textarea id="message" rows="5"></textarea>
                
                <button type="submit">Send</button>
            </form>
        </section>
    </main>

    <footer>
        <p>© 2024 John Doe. All rights reserved.</p>
    </footer>
</body>
</html>

Best Practices

Always close your tags - Every opening tag needs a closing tag
Use lowercase - Write tags in lowercase (<div>, not <DIV>)
Indent your code - Makes it easier to read
Add alt text to images - Important for accessibility
Use semantic HTML - Use <header>, <nav>, <main>, <footer> instead of just <div>
Include proper structure - Always start with <!DOCTYPE html>, <html>, <head>, and <body>

Common Mistakes to Avoid

<!-- Wrong: Forgetting to close tags -->
<p>This is a paragraph

<!-- Correct -->
<p>This is a paragraph</p>

<!-- Wrong: Incorrect nesting -->
<strong><em>Text</strong></em>

<!-- Correct -->
<strong><em>Text</em></strong>

<!-- Wrong: No alt attribute -->
<img src="photo.jpg">

<!-- Correct -->
<img src="photo.jpg" alt="Beach sunset">

What to Learn Next

Now that you know HTML, here's your path forward:

CSS - Style your HTML and make it beautiful
JavaScript - Add interactivity to your pages
Responsive Design - Make sites work on all devices
Practice - Build real projects like portfolios, blogs, or landing pages

Helpful Resources

MDN Web Docs - Comprehensive HTML documentation
W3Schools - Interactive tutorials
freeCodeCamp - Free courses
CodePen - Practice and share your code

Final Thoughts

HTML is the building block of the web. You've just learned everything you need to create web pages. Remember:

Start simple - Build basic pages first
Practice daily - The more you code, the better you get
View source - Right-click on any website and select "View Page Source" to learn from others
Build projects - The best way to learn is by doing

You now have the foundation to build anything on the web. Start with a simple project, practice regularly, and before you know it, you'll be creating amazing websites.

Happy coding! 🚀

Quick Reference

<!-- Basic Structure -->
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>Content</body>
</html>

<!-- Text -->
<h1>Heading</h1>
<p>Paragraph</p>
<strong>Bold</strong>
<em>Italic</em>

<!-- Links & Images -->
<a href="url">Link</a>
<img src="image.jpg" alt="Description">

<!-- Lists -->
<ul><li>Item</li></ul>
<ol><li>Item</li></ol>

<!-- Forms -->
<form>
    <input type="text">
    <button>Submit</button>
</form>

<!-- Structure -->
<header></header>
<nav></nav>
<main></main>
<footer></footer>

That's HTML! You're now ready to build your first website. Start with something simple, experiment, and have fun creating for the web.