Introduction to HTML

What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It describes the structure and content of a website.

HyperText: Text that links to other text
Markup: Tags that define elements
Language: A system of communication

Real-Life Example: HTML is like the skeleton of a house — it provides the structure, while CSS adds style and JavaScript adds functionality.

How HTML Works

You write HTML code in a text editor
Save the file with a .html extension
Open it in a web browser
The browser reads and displays the content

Fun Fact: HTML was invented by Tim Berners-Lee in 1991.

Basic HTML Structure

Example: Basic HTML Document


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

<!DOCTYPE html> – Declares HTML5 document
<html> – Root element
<head> – Contains metadata
<body> – Contains visible content

HTML Tags and Elements

An HTML element consists of an opening tag, content, and a closing tag.

Example: HTML Element Structure


<p>This is a paragraph.</p>

<h1>This is a heading.</h1>

<a href="https://crackease.com">Click here</a>

Note: Some tags are self-closing, like <img>, <br>, and <hr>.

Common HTML Tags

Example: Common HTML Elements


<!-- Headings -->
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>

<!-- Paragraph -->
<p>This is a paragraph of text.</p>

<!-- Link -->
<a href="https://example.com">Visit Example</a>

<!-- Image -->
<img src="image.jpg" alt="Description of image">

<!-- List -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

HTML Attributes

Attributes provide additional information about HTML elements.

Example: HTML Attributes


<a href="https://crackease.com" target="_blank">Open in new tab</a>

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

<p class="intro" id="first-paragraph">Text with class and ID</p>

href – Specifies URL for links
src – Specifies source for images
alt – Alternative text for images
class – Defines CSS class
id – Unique identifier

Creating Your First HTML Page

Example: Complete Webpage


<!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>Welcome to My Portfolio</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 amazing websites.</p>
        </section>

        <section id="projects">
            <h2>My Projects</h2>
            <ul>
                <li>Project 1</li>
                <li>Project 2</li>
                <li>Project 3</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>© 2026 My Portfolio. All rights reserved.</p>
    </footer>
</body>
</html>

Best Practices

Always include the <!DOCTYPE html> declaration
Use semantic HTML tags
Keep your code organized and indented
Add comments to explain your code
Use lowercase for tags and attributes
Always close your tags

Pro Tip: Practice regularly and build small projects to master HTML fundamentals.