Skip to main content
HTML for Beginners
CHAPTER 00 Beginner

HTML Basics for Beginners

Updated: Jun 5, 2026
15 min read

Introduction

What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to create and design websites. Think of HTML as the skeleton of a webpage—it provides the basic structure and content, such as text, images, and links, upon which everything else is built.

Why HTML is Important

Without HTML, the web as we know it would not exist. Every single website on the internet, from Google to Facebook, uses HTML. It is the fundamental building block of web development and the absolute first skill any aspiring developer must learn.

History of HTML

Created by Tim Berners-Lee in 1991, HTML started as a simple text-formatting tool for scientists to share documents. Over the decades, it evolved through several versions. Today, the world uses HTML5, the latest, most powerful version that supports modern multimedia like video and audio natively.

How Browsers Read HTML

Web browsers (like Chrome, Safari, or Firefox) act as translators. They read your raw HTML code from top to bottom and render (display) it visually on the screen for users to interact with. Browsers do not display the HTML tags themselves; they use the tags to determine *how* to present the content.

Frontend vs Backend

  • Frontend: What the user sees and interacts with. HTML, along with CSS (styling) and JavaScript (interactivity), makes up the frontend.
  • Backend: The hidden server-side logic (databases, user authentication) powered by languages like PHP, Python, or Node.js.

HTML Document Structure

Every HTML file must follow a specific skeleton to be understood by browsers.
html
1234567891011 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Website</title>
</head>
<body>
    <h1>Welcome to Web Development!</h1>
    <p>This is my very first webpage.</p>
</body>
</html>

Explanation of the Structure:

  • <!DOCTYPE html>: Declares that this document is an HTML5 document.
  • <html>: The root element that wraps all content on the page.
  • <head>: The container for metadata. Nothing in the head is visible on the webpage.
  • <meta>: Defines character sets, viewport settings, and SEO descriptions.
  • <title>: Sets the title of the page.
  • <body>: The container for all the visible content.

HTML Elements & Tags

Opening and Closing Tags

HTML uses a tag-based syntax. Most elements have an opening tag and a closing tag. <h1>This is a heading</h1>

Self-Closing Tags

Some elements don't wrap content, so they don't need a closing tag. <img src="photo.jpg" alt="A photo"> or <br>

Nested Elements

Elements can be placed inside other elements.
html
123 
<div>
    <p>This paragraph is <strong>nested</strong> inside a div.</p>
</div>

Attributes

Attributes provide extra information about an element.
  • id="header": Unique identifier.
  • class="btn-primary": Class for CSS styling.
  • href="https://google.com": Destination URL for a link.
  • src="image.jpg": Source file for an image.
  • alt="Description": Alternative text for images.

Text Elements

  • Headings: <h1> to <h6>.
  • Paragraphs: <p>.
  • Bold / Strong: <b> makes text bold. <strong> indicates semantic importance.
  • Italic / Emphasis: <i> italicizes. <em> adds semantic emphasis.
  • Line Break: <br>.
  • Horizontal Rule: <hr>.

Links & Images

html
12 
<a href="https://wikipedia.org" target="_blank">Visit Wikipedia</a>
<img src="images/cat.png" alt="A cute orange cat resting">

Lists

html
12345678 
<ul>
    <li>Apples</li>
    <li>Bananas</li>
</ul>
<ol>
    <li>Wake up</li>
    <li>Brush teeth</li>
</ol>

Tables

html
1234567891011121314 
<table>
    <thead>
        <tr>
            <th>Student Name</th>
            <th>Math Score</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>95</td>
        </tr>
    </tbody>
</table>

Forms

html
123456789 
<form action="/submit-registration" method="POST">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    
    <label for="bio">Biography:</label>
    <textarea id="bio" name="bio"></textarea>
    
    <button type="submit">Register</button>
</form>

Semantic HTML

  • <header>: Introductory content.
  • <nav>: Primary navigation links.
  • <main>: Dominant content.
  • <section>: Standalone section.
  • <article>: Self-contained content.
  • <footer>: Bottom footer.

HTML5 Features

html
123 
<video controls width="500">
    <source src="movie.mp4" type="video/mp4">
</video>

Comments & Best Practices

<!-- This is a comment -->
  1. 1. Proper Indentation.
  1. 2. Lowercase Tags.
  1. 3. Always use alt tags.
  1. 4. Semantic Structure.

Common Beginner Mistakes

  1. 1. Forgetting to close tags.
  1. 2. Improper Nesting: <b><p>Wrong</b></p>.
  1. 3. Using <h1> for styling.
  1. 4. Missing <!DOCTYPE html>.
  1. 5. Inline CSS: <p style="color:red">.
  1. 6. Missing alt attributes on images.
  1. 7. Using <br> for spacing instead of CSS margin.
  1. 8. Typos in attributes: hfer="link".
  1. 9. Div soup.
  1. 10. Capitalizing tags.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Next Chapter HTML Text Formatting and Headings

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1