HTML Summary

What is HTML?

HTML (HyperText Markup Language) is the standard language for creating webpages.
HTML structures content using elements (tags).
HTML5 is the latest version, supporting multimedia, forms, and semantic elements.

HTML Basic Structure

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>Welcome</h1>
    <p>This is a paragraph.</p>
</body>
</html>

<html> → Root element
<head> → Metadata, title, CSS, scripts
<body> → Content visible on the page

HTML Common Elements

1️⃣ Headings

<h1> to <h6> for hierarchical headings
Example:

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

2️⃣ Paragraphs & Text Formatting

<p> → Paragraphs
<b> / <strong> → Bold
<i> / <em> → Italic
<mark> → Highlight

3️⃣ Links

<a> tag creates hyperlinks
Example:

<a href="https://www.google.com" target="_blank">Go to Google</a>

4️⃣ Images

<img> embeds images
Attributes: src, alt, width, height

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

5️⃣ Lists

Ordered List <ol> → Numbered
Unordered List <ul> → Bullets
Description List <dl> → Terms & definitions

6️⃣ Tables

<table> for tabular data
<tr> → Row
<th> → Header cell
<td> → Data cell
Attributes: colspan, rowspan

<table border="1">
    <tr><th>Name</th><th>Age</th></tr>
    <tr><td>Alice</td><td>25</td></tr>
</table>

7️⃣ Forms

<form> collects user input
Common elements: <input>, <textarea>, <select>, <button>
Types: text, password, email, number, radio, checkbox, file
Validation attributes: required, pattern, min, max, minlength, maxlength

8️⃣ Multimedia

Audio: <audio> with controls, autoplay, loop
Video: <video> with controls, poster, width, height
Example:

<video width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

9️⃣ Navigation Bar

<nav> wraps links for site navigation
Typically uses <ul> and <li>
Example:

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
    </ul>
</nav>

🔹 HTML Attributes

Provide additional information to tags
Common attributes: id, class, src, alt, href, title, style, target

🔹 HTML Semantic Tags (HTML5)

<header> → Top section or page header
<footer> → Footer section
<section> → Thematic grouping
<article> → Independent content
<aside> → Sidebar or related content
<main> → Main content

10️⃣ HTML Iframes

<iframe> embeds another webpage inside a page

<iframe src="https://www.example.com" width="600" height="400"></iframe>

🔹 HTML Colors, Fonts & Styling

Inline styling: style="color:red; font-size:20px;"
Recommended: use CSS for consistency and control

✅ Key Takeaways

HTML structures content, CSS styles it, JavaScript adds interactivity
Always use semantic tags for SEO and accessibility
Forms should have validation to improve data quality
Multimedia is supported without plugins in HTML5
Proper headings, lists, tables, and links improve readability and UX

🏋️ Practice Example

A small webpage combining everything:

Example Code:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Summary Page</title>
</head>
<body>

    <header>
        <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </nav>
    </header>

    <section id="home">
        <h2>Welcome</h2>
        <p>This is an HTML summary page.</p>
    </section>

    <section id="about">
        <h2>About HTML</h2>
        <ul>
            <li>HyperText Markup Language</li>
            <li>Structuring content</li>
            <li>HTML5 features</li>
        </ul>
    </section>

    <footer>
        <p>&copy; 2026 My Website</p>
    </footer>

</body>
</html>

HTML