1. HTML Basics

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure and content of a webpage using elements and tags.

What is HTML?

HTML uses a system of tags to mark up content. Tags are keywords surrounded by angle brackets that tell the browser how to display content.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

Output:

Hello, World!

This is my first HTML page.

2. Document Structure

Every HTML document has a basic structure that includes the DOCTYPE declaration, html element, head section, and body section.

                            Key Components:
                            <!DOCTYPE html> - Declares the document type
<html> - Root element of the page
<head> - Contains metadata
<body> - Contains visible content

                        

Head Section Elements

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <meta name="description" content="Page description">
    <link rel="stylesheet" href="styles.css">
</head>

3. Text Elements

HTML provides various elements for structuring and formatting text content.

Headings

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>
<h4>Subsection Heading</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>

Text Formatting

<p>This is a paragraph with <strong>bold text</strong> and <em>italic text</em>.</p>
<p>You can also use <b>bold</b> and <i>italic</i> tags.</p>
<p>For highlighting: <mark>highlighted text</mark></p>
<p>Subscript: H<sub>2</sub>O, Superscript: X<sup>2</sup></p>

4. Links & Navigation

Links are created using the anchor tag (<a>) and are essential for navigation between pages.

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

<!-- Internal link -->
<a href="about.html">About Us</a>

<!-- Link to section on same page -->
<a href="#section1">Go to Section 1</a>

<!-- Email link -->
<a href="mailto:someone@example.com">Send Email</a>

<!-- Open in new tab -->
<a href="https://www.example.com" target="_blank">Open in New Tab</a>

5. Images & Media

HTML supports various media elements including images, videos, and audio.

Images

<img src="image.jpg" alt="Description of image" width="300" height="200">

<!-- Responsive image -->
<img src="image.jpg" alt="Description" style="max-width: 100%; height: auto;">

<!-- Figure with caption -->
<figure>
    <img src="image.jpg" alt="Description">
    <figcaption>Image caption goes here</figcaption>
</figure>

6. Lists

HTML provides three types of lists: ordered lists, unordered lists, and definition lists.

<!-- Unordered List -->
<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

<!-- Ordered List -->
<ol>
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
</ol>

<!-- Definition List -->
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

7. Tables

Tables are used to display 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>Jane</td>
            <td>30</td>
            <td>London</td>
        </tr>
    </tbody>
</table>

8. Forms

Forms allow users to input data and interact with web pages.

<form action="/submit" method="post">
    <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>
    
    <label for="country">Country:</label>
    <select id="country" name="country">
        <option value="usa">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="canada">Canada</option>
    </select>
    
    <button type="submit">Submit</button>
</form>

9. Semantic HTML

Semantic HTML elements provide meaning to content, making it more accessible and SEO-friendly.

<header>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <header>
            <h1>Article Title</h1>
            <time datetime="2024-01-15">January 15, 2024</time>
        </header>
        <p>Article content goes here...</p>
    </article>
    
    <aside>
        <h3>Related Links</h3>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </aside>
</main>

<footer>
    <p>© 2024 My Website. All rights reserved.</p>
</footer>

10. Advanced Topics

Advanced HTML features for modern web development.

HTML5 Input Types

<input type="email" placeholder="Enter your email">
<input type="tel" placeholder="Phone number">
<input type="url" placeholder="Website URL">
<input type="number" min="1" max="100">
<input type="range" min="0" max="100" value="50">
<input type="date">
<input type="time">
<input type="color">

Data Attributes

<div data-user-id="123" data-role="admin">
    User information
</div>

<button data-action="delete" data-confirm="Are you sure?">
    Delete Item
</button>

Master HTML Programming