🎯 Live Visual Explanations

Forms · div vs section vs article · How CSS connects · span & inline — all with real examples you can see!

📋

HTML Forms — Full Explanation

Forms are how users send data to a website — like login, signup, contact forms.

🧠 Real Life Analogy A form in HTML is exactly like a paper form you fill out at a hospital or bank. It has blank spaces (inputs), checkboxes, dropdown menus — and a submit button to send it.

The <form> tag — The Outer Wrapper

Everything inside a form goes inside the <form> tag. It has two key attributes:

HTML — form tag
<form action="login.php"
      method="post">

  <!-- inputs go here -->

</form>
📖 What they mean
🎯

action = "login.php"

WHERE to send the data. Which page/server receives it.

📬

method = "get" or "post"

get → data shows in URL (for search)
post → data hidden (for passwords!)

All Form Input Types — With Live Demo!

The <input> tag uses type="" to change what kind of field it shows.

HTML — all input types
<!-- TEXT — single line -->
<input type="text"
       placeholder="Enter name">

<!-- PASSWORD — hides typing -->
<input type="password">

<!-- EMAIL — validates @ -->
<input type="email">

<!-- NUMBER — only numbers -->
<input type="number"
       min="1" max="100">

<!-- CHECKBOX — tick boxes -->
<input type="checkbox"> Cricket
<input type="checkbox"> Football

<!-- RADIO — pick only one -->
<input type="radio"
       name="gender"> Male
<input type="radio"
       name="gender"> Female

<!-- SUBMIT BUTTON -->
<input type="submit"
       value="Send">
👁 This is what it looks like

Dropdown, Textarea, and Label

HTML
<!-- LABEL — names the field -->
<label for="city">City:</label>

<!-- DROPDOWN -->
<select id="city">
  <option value="che">Chennai</option>
  <option value="mum">Mumbai</option>
  <option value="del">Delhi</option>
</select>

<!-- TEXTAREA — multiline -->
<textarea
  rows="4"
  cols="30"
  placeholder="Write here...">
</textarea>
👁 Live preview
🚨 KEY DIFFERENCE — checkbox vs radio Checkbox = you can select MANY options at once (like choosing hobbies)
Radio = you can only select ONE option (like choosing gender — Male OR Female, not both!)
For radio to work as a group, they MUST have the same name attribute!
⚠️ What does <label for="id"> do? The for attribute links the label to an input using its id. This means clicking the label text also clicks/focuses the input. It's great for usability!
📦

div vs section vs article vs span

These all group content — but they mean different things to the browser and search engines.

🧠 Think of a Newspaper The whole newspaper = <body>
A section like "Sports" or "Politics" = <section>
One individual article inside that section = <article>
A plain box with no meaning = <div>
Highlighting one word inside a sentence = <span>

Visual difference — See it live!

<body> — The whole page

<section> — "Sports Section"

<article> — "Cricket News"

India won the match. The team played <span>brilliantly</span> today.

<article> — "Football News"

Team scored 3 goals in the final match.

<section> — "Technology Section"

<div> — just a box for layout

New phone launched today. Price: ₹50,000

The Full Comparison Table

TagMeaningUse When...Type
<div> No meaning — just a generic container box You just need to group things for styling/layout. No special meaning needed. Block
<section> A themed section of the page You have a group of related content with a clear topic (like "About", "Services", "Contact") Block
<article> A standalone, self-contained piece The content could be taken out and still make sense on its own — like a blog post, news item, comment Block
<header> Top of the page or section Logo, navigation, site title goes here Block
<footer> Bottom of the page Copyright, links, contact info at the bottom Block
<nav> Navigation links Menu, links to other pages Block
<main> Main content of the page The primary content — only ONE per page Block
<aside> Side content Sidebars, ads, related articles (not the main point) Block
<span> No meaning — inline container You need to style/target a specific word or part of text inline Inline
💡 Simple Rule to Decide Which to Use Ask yourself: "Does this content have a clear meaning/purpose?"
Yes + it's a topic/theme → use <section>
Yes + it's a standalone piece (blog/article/comment) → use <article>
No / just for layout → use <div>
For inline text styling → use <span>

Code Example — Real webpage structure

HTML — Complete webpage structure
<body>

  <header>                    <!-- TOP of page -->
    <h1>My Blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>                      <!-- MAIN content -->

    <section>                  <!-- TECH section -->
      <h2>Tech News</h2>

      <article>               <!-- one standalone news item -->
        <h3>New iPhone Released</h3>
        <p>Apple launched a
          <span class="highlight">revolutionary</span>
          new phone today.
        </p>
      </article>

      <article>               <!-- another news item -->
        <h3>AI Update</h3>
        <p>New AI model released.</p>
      </article>

    </section>

    <div class="ad-box">       <!-- div for layout only -->
      Advertisement here
    </div>

  </main>

  <footer>                    <!-- BOTTOM of page -->
    <p>© 2025 My Blog</p>
  </footer>

</body>
🔗

How CSS Connects to HTML — 3 Methods

You write CSS separately — but you need to LINK it to HTML. Here's exactly how.

🧠 Analogy — The Mannequin and the Clothes HTML is the mannequin (structure). CSS is the clothes (style). You need to DRESS the mannequin by connecting them. There are 3 ways to do it — like stitching clothes directly on, carrying them in a bag, or hanging them in a wardrobe.
Method 1 — Inline
CSS written directly on the tag using style="". Highest priority but not reusable.
Method 2 — Internal
CSS inside a <style> tag in <head>. Only applies to that page.
Method 3 — External
Separate .css file linked with <link>. Best for real websites.

Method 1 — Inline CSS (directly on the tag)

HTML — inline style attribute
<p style="color: red;
       font-size: 24px;
       background: yellow;">
  Hello World
</p>

<h1 style="color: blue;">
  Blue Heading
</h1>
👁 Result

Hello World

Blue Heading

⚠️ Problem: You have to repeat styles on EVERY element. Not reusable!

Method 2 — Internal CSS (in the <head>)

HTML — style tag in head
<head>
  <style>
    /* Write CSS rules here */

    p {
      color: red;
      font-size: 20px;
    }

    .blue-text {
      color: blue;
    }

    #title {
      background: yellow;
    }
  </style>
</head>
<body>
  <p>This is red</p>
  <p class="blue-text">Blue</p>
  <h1 id="title">Yellow bg</h1>
</body>
👁 Result

This is red

Blue

Yellow bg

✅ Better! One rule styles all matching elements. But only works for this ONE page.

Method 3 — External CSS (best practice! ⭐)

You create a separate file called style.css, and link it to your HTML. One CSS file can style hundreds of HTML pages!

HTML file — index.html
<head>
  <!-- This line CONNECTS the CSS file -->
  <link
    rel="stylesheet"
    href="style.css">
</head>
<body>
  <h1>Big Title</h1>
  <p class="intro">Hello!</p>
</body>
CSS file — style.css (separate file!)
/* This is style.css */

h1 {
  color: darkblue;
  font-size: 36px;
  text-align: center;
}

.intro {
  color: gray;
  font-size: 18px;
  margin: 20px;
}
💡 How the <link> tag works rel="stylesheet" — tells browser "this is a CSS file"
href="style.css" — the path to your CSS file. If it's in the same folder, just write the filename. If it's in a folder: href="css/style.css"

🎮 Interactive Demo — See CSS in action!

Click the buttons to change how the box looks:

👈 Click a button to see CSS change my style in real time! This is exactly what CSS does to HTML elements.

Summary — Priority Order

MethodPriorityReusable?Best for...
Inline style=""⭐⭐⭐ Highest❌ NoOne-off quick fixes
Internal <style>⭐⭐ MediumOnly this pageSmall single-page projects
External .css file⭐ Lowest✅ Many pagesReal websites (best practice)
✏️

span & Inline Elements — The Full Picture

The difference between block and inline is the most important layout concept in HTML.

🧠 The Best Analogy Ever Imagine writing on paper.
Block element = a full paragraph. It takes the whole line. The next thing starts on a NEW line below.
Inline element = a single word within the paragraph. It stays on the SAME line. It only takes as much space as the word itself.

Block vs Inline — Visual Proof

HTML — block vs inline
<!-- BLOCK — each starts new line -->
<div>I am a div</div>
<div>I am another div</div>
<div>I am a third div</div>

<!-- INLINE — all stay on same line -->
<span>I am a span</span>
<span>I am span 2</span>
<span>I am span 3</span>
👁 This is how they render

BLOCK — each on its own line:

<div> I am a div </div>
<div> I am another div </div>
<div> I am a third div </div>

INLINE — all on one line:

span 1 span 2 span 3

What is <span> used for?

<span> is an inline container with NO meaning. You use it to style or target a specific word or phrase inside text — without breaking the line!

HTML + CSS — span in real use
/* CSS */
.red   { color: red; font-weight: bold; }
.badge {
  background: gold;
  padding: 2px 8px;
  border-radius: 4px;
}
.big   { font-size: 24px; }

<!-- HTML -->
<p>
  The price is
  <span class="red">₹999</span>
  only!
</p>

<p>
  Status:
  <span class="badge">NEW</span>
</p>

<p>
  Score:
  <span class="big">95%</span>
  Great!
</p>
👁 Result — notice everything stays inline!

The price is ₹999 only!

Status: NEW

Score: 95% Great!

✅ The styled part stays IN the sentence — the line doesn't break!

Block vs Inline — Complete List

📦 BLOCK elements Start on a new line. Take full width.
Can have width/height set.
Can contain block and inline.

Tags: div, p, h1-h6, ul, ol, li, table, form, header, footer, section, article, nav, main, aside, blockquote, hr, br*
✏️ INLINE elements Stay on same line. Take only needed width.
Cannot set width/height (mostly).
Should only contain inline elements.

Tags: span, a, b, i, strong, em, u, small, mark, del, code, label, button, input, select, textarea, img

🎮 Interactive Demo — See the difference!

This text has styled span (inline) vs div (block) inside it:

The exam is tomorrow and I am studying HTML, CSS, and JavaScript. I will pass! 💪

⬆️ All 4 coloured words use <span> — they stay on the same line as the text!

Now using <div> for each word — see how each goes to new line:

tomorrow
HTML
JavaScript

⬆️ Each div forces a new line — you can't use this inside a sentence!

🚨 Key Rule — When to use span vs div Use <span> when you want to style something inside a line of text without breaking the flow.
Use <div> when you want to group a whole section or block of content.

Wrong ❌: <div>Hello <div>World</div> today</div> ← div breaks the line
Right ✅: <p>Hello <span>World</span> today</p> ← span keeps it inline
⚡

Quick Summary — Remember These!

📋 Forms • <form> wraps everything
• action = where data goes
• method = get (visible) or post (hidden)
• checkbox = pick MANY
• radio (same name) = pick ONE
• label for="id" links to input
📦 Containers • div = no meaning, just layout
• section = themed group of content
• article = standalone piece
• header/footer/nav = structural
• span = inline, no meaning
🔗 Connecting CSS • Inline: style="" on the tag
• Internal: <style> in <head>
• External: <link href="x.css"> ← BEST
• Priority: Inline > Internal > External
✏️ Block vs Inline • Block = new line, full width (div, p, h1)
• Inline = same line, own width (span, a, b)
• span = style inside text
• div = style a section/group
• Wrong: div inside a sentence ❌
• Right: span inside a sentence ✅