HTML Basics for Beginners: Building Your First Page

By Admin_CodeByHer

HTML Basics for Beginners: Building Your First Page

Introduction
HTML, or HyperText Markup Language, is the backbone of the web. Every website you visit is built using HTML as its foundation. For beginners, learning HTML is the first step toward web development, allowing you to structure content like text, images, links, and forms on a webpage. This guide will teach you the basics and help you build your first HTML page.

1. What Is HTML?

HTML is a markup language used to create the structure of web pages. It defines elements like headings, paragraphs, links, images, lists, and more.

Key Features:

Not a programming language, but a markup language
Uses tags to define elements
Can be combined with CSS for styling and JavaScript for interactivity

2. Basic Structure of an HTML Document

Every HTML page has a standard structure:

<!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>Welcome to My First HTML Page</h1>
    <p>This is a paragraph of text to get started with HTML basics.</p>
</body>
</html>

Explanation:

<!DOCTYPE html>: Declares the document as HTML5
<html>: Root element of the page
<head>: Contains metadata like title, charset, and styles
<title>: Sets the page title visible on the browser tab
<body>: Contains all visible content

3. Common HTML Elements

Headings

Headings are defined with <h1> to <h6> tags. <h1> is the most important, and <h6> is the least.

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

Paragraphs

Paragraphs are defined using <p>:

<p>This is a sample paragraph for beginners.</p>

Links

Links are created using <a> tags with the href attribute:

<a href="https://www.codebyher.com" target="_blank">Visit CodebyHer</a>

Images

Images are added using the <img> tag with src and alt attributes:

<img src="logo.png" alt="CodebyHer Logo" width="200">

Lists

Unordered List:

<ul>
    <li>HTML Basics</li>
    <li>CSS Styling</li>
    <li>JavaScript Fundamentals</li>
</ul>

Ordered List:

<ol>
    <li>Learn HTML</li>
    <li>Learn CSS</li>
    <li>Build Your First Website</li>
</ol>

Forms

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter your name">
    <button type="submit">Submit</button>
</form>

Forms are essential for collecting user data, such as emails, names, and feedback.

4. Attributes in HTML

Attributes provide extra information about HTML elements. Common attributes include:

id – Unique identifier for an element
class – Groups elements for styling
src – Specifies the source of images
href – Specifies the link URL
alt – Provides alternative text for images

Example:

<img src="avatar.png" alt="User Avatar" class="profile-image">

5. Comments in HTML

Comments are used to leave notes for yourself or other developers:

<!-- This is a comment in HTML -->

Comments do not appear on the webpage.

6. Best Practices for Beginners

Always use semantic HTML (e.g., <header>, <footer>, <section>)
Keep your code clean and properly indented
Use descriptive alt text for images
Test your page in different browsers
Validate your HTML using W3C Validator

7. Building Your First HTML Page

Here’s a simple example combining headings, paragraphs, links, and images:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <a href="#">Home</a> |
            <a href="#">About</a> |
            <a href="#">Contact</a>
        </nav>
    </header>
    <main>
        <h2>About Me</h2>
        <p>Hello! I am learning HTML and building my first webpage.</p>
        <img src="profile.jpg" alt="Profile Image" width="150">
    </main>
    <footer>
        <p>© 2026 My First Website</p>
    </footer>
</body>
</html>

This simple page demonstrates the core structure of an HTML document and the basic elements you’ll use in almost every project.

Conclusion

HTML is the foundation of web development, and learning it is essential for building websites. By mastering headings, paragraphs, links, images, lists, forms, and attributes, beginners can create their first webpages and start exploring CSS and JavaScript to make their sites visually appealing and interactive.

No Comments
March 17, 2026