Chapter 2: HTML Basics

Basic Structure of an HTML Document

Every HTML document follows a basic structure that includes the <!DOCTYPE> declaration, <html> element, and essential tags for the head and body sections.

        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>My First Webpage</title>
            </head>
            <body>
                <h1>Welcome to My First Webpage</h1>
                <p>This is a paragraph of text on my webpage.</p>
            </body>
        </html>

Understanding HTML Tags

HTML tags are used to define elements on the webpage. Tags are typically enclosed in angle brackets (e.g., <tag>), with a start tag and an end tag. The content placed between these tags forms the element.

Common HTML Tags

Here are some common HTML tags that you’ll frequently use to build a webpage:

        <h1> - <h6>: Headings
        <p>: Paragraph
        <a href="https://example.com">: Hyperlink
        <img src="image.jpg" alt="description">: Image
        <ul> / <ol>: Unordered / Ordered List
        <li>: List Item
        <div>: Division (used for grouping elements)
        <span>: Inline grouping of elements

Example: Building a Simple Webpage

Let’s put together a simple webpage structure using these basic HTML tags.

        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>About Me</title>
            </head>
            <body>
                <header>
                    <h1>About Me</h1>
                </header>
                <section>
                    <h2>Personal Introduction</h2>
                    <p>Hello! I am an aspiring web developer learning HTML and CSS.</p>
                    <h2>My Hobbies</h2>
                    <ul>
                        <li>Coding</li>
                        <li>Reading</li>
                        <li>Gaming</li>
                    </ul>
                </section>
                <footer>
                    <p>Contact me at <a href="mailto:[email protected]">[email protected]</a></p>
                </footer>
            </body>
        </html>

Experimenting with Your Own HTML Page

Now that you understand the basics, try creating your own HTML page using these tags. Experiment by adding headings, paragraphs, images, and lists to customize the content. HTML is flexible and easy to modify, so don’t hesitate to add or change elements as you learn.