🌐 Full HTML Crash Course Explained

🔰 1. Introduction to HTML

🧠 What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages. It describes structure and content—not design.

You use HTML to:

Add text, images, links
Create headings and paragraphs
Build forms and tables

HTML is the foundation of every website.

⚙️ How Browsers Work

Browsers (like Chrome or Firefox) read HTML files and render them into web pages.

HTML → Browser → Visual Page

✍️ Your First HTML Page:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>This is my first website.</p>
  </body>
</html>

✅ What it does:

<!DOCTYPE html> tells the browser to use HTML5
<html> is the root
<head> holds info about the page (not visible)
<body> shows the content on screen

🧱 2. HTML Document Structure

🎯 Goal: Understand the layout of an HTML page


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
  </head>
  <body>
    <h1>Hello!</h1>
  </body>
</html>

🔍 Key Tags:

<meta charset="UTF-8">: Supports all characters
<meta name="viewport">: Makes site responsive on mobile
<title>: Title in browser tab

✍️ 3. Text Elements in HTML

HTML gives us special tags to add and format text.

🏷️ Headings


<h1>Main Title</h1>
<h2>Subheading</h2>  <!-- h1 is biggest, h6 is smallest -->

🧾 Paragraphs


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

🔠 Formatting Text

<strong>Bold</strong>
<em>Italic</em>
<u>Underline</u>
<mark>Highlighted</mark>

🔁 Line Breaks & Horizontal Rules

Line one<br>Line two
<hr> <!-- Draws a horizontal line -->

🔗 4. Links, Images & Media

🔗 Links (`<a>`)


<a href="https://example.com" target="_blank">Visit Example</a>

href: Where the link goes
target="_blank": Opens in a new tab

🖼️ Images (`<img>`)


<img src="dog.jpg" alt="Cute dog" width="300">

src: Image file
alt: Describes image for accessibility

🎥 Video & Audio


<video src="video.mp4" controls></video>
<audio src="sound.mp3" controls></audio>

controls: Adds play/pause UI

📋 5. Lists & Tables

✅ Lists


<ul> <!-- Unordered list -->
  <li>Milk</li>
  <li>Eggs</li>
</ul>

<ol> <!-- Ordered list -->
  <li>Step 1</li>
  <li>Step 2</li>
</ol>

📊 Tables


<table border="1">
  <thead>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>25</td></tr>
    <tr><td>Bob</td><td>30</td></tr>
  </tbody>
</table>

<th>: Table Heading
<td>: Table Data
<tr>: Table Row

📝 6. Forms and User Input

📄 Basic Form

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <input type="submit" value="Send">
</form>

📌 Other Input Types:

type="password" → Hidden characters
type="checkbox" → Checkable option
type="radio" → Select one from many
type="file" → Upload file

🧩 7. Semantic HTML

🧠 What is Semantic HTML?

Semantic HTML uses meaningful tags that describe content clearly (instead of generic <div>s).

🏷️ Examples


<header>Top section</header>
<nav>Navigation links</nav>
<main>Main content</main>
<section>Topic section</section>
<article>Blog post</article>
<footer>Bottom info</footer>

✅ Benefits:

Better SEO
Improves accessibility
Makes code easier to read

⚙️ 8. HTML Attributes Deep Dive

🔧 Common Global Attributes:


<p id="intro" class="highlight" style="color:blue;" title="This is a tooltip">
  Hello world!
</p>

id: Unique identifier
class: For grouping elements
style: Inline CSS
title: Tooltip text

🧑‍🦯 Accessibility (ARIA)


<button aria-label="Close Menu">X</button>

Helps screen readers understand page structure

🌐 9. Embedding External Resources

🎨 Add CSS

<link rel="stylesheet" href="style.css">

🔡 Load Fonts

<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">

⚙️ Add JavaScript

<script src="app.js"></script>

📇 Favicon

<link rel="icon" type="image/png" href="favicon.png">

🏗️ 10. Project: Build a Personal Portfolio Website

Here’s how everything fits together:

<!DOCTYPE html>
<html>
<head>
  <title>My Portfolio</title>
</head>
<body>

  <header>
    <h1>Hi, I'm Alex!</h1>
    <nav>
      <a href="#about">About</a>
      <a href="#work">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>About Me</h2>
      <p>Web enthusiast learning HTML!</p>
    </section>

    <section id="work">
      <h2>My Projects</h2>
      <ul>
        <li>To-Do List App</li>
        <li>Weather App</li>
      </ul>
    </section>

    <section id="contact">
      <h2>Contact Me</h2>
      <form>
        <input type="text" placeholder="Name">
        <input type="email" placeholder="Email">
        <textarea placeholder="Your message"></textarea>
        <button type="submit">Send</button>
      </form>
    </section>
  </main>

  <footer>
    <p>© 2025 Alex's Portfolio</p>
  </footer>

</body>
</html>

🎓 Final Tips :--

✅ Practice by building:

A Resume Page
A Blog Layout
A Simple Contact Form

💡 Want to go further?

Learn CSS to make it look great
Learn JavaScript to make it interactive

Full HTML Crash Course for Beginners (2025) – Learn HTML Tags, Structure, Forms & More