Ashutosh Gupta
Start Learn with Mr. Ashutosh Gupta ji
Course 01

HTML Basics → Advanced

Structure, semantic tags, links, images, tables और forms — web page ka poora skeleton yahin se seekhein।

10 + Tag ReferenceLessons
1Project
Ashutosh SirMentor
← Home

Lesson plan

01
HTML Document Structure
Har HTML page ka basic skeleton — doctype, head, body.
<!DOCTYPE html> <html> <head><title>My Page</title></head> <body>Hello, world!</body> </html>
02
Semantic Tags
header, nav, main, section, article, footer — meaning-based structure.
<header>...</header> <main> <section>...</section> </main> <footer>...</footer>
03
Links aur Navigation
Anchor tags se ek page se dusre page tak connect karna.
<a href="about.html">About</a>
04
Images aur Media
Images embed karna, alt text ka importance, responsive sizing.
<img src="photo.jpg" alt="Description">
05
Tables
Tabular data ko rows aur columns me organize karna.
<table> <tr><td>Name</td><td>Score</td></tr> </table>
06
Forms aur Inputs
User se data lene ke liye forms, input types, aur labels.
<form> <input type="text" placeholder="Naam likhein"> <button>Submit</button> </form>
07
Lists — Ordered aur Unordered
ul, ol, li se steps, menu items, aur bullet content dikhana.
<ul> <li>HTML</li> <li>CSS</li> </ul>
08
Div, Span aur Block vs Inline
Generic containers ka use aur block-level vs inline elements ka fark samajhna.
<div>Block — apni line leta hai</div> <span>Inline — line ke andar rehta hai</span>
09
Forms Deep Dive — Validation
required, pattern, aur input types (email, number, date) se form ko robust banana.
<input type="email" required> <input type="number" min="1" max="10">
10
Accessibility Basics
alt text, label association, aur ARIA roles se page ko sabke liye usable banana.
<label for="name">Naam</label> <input id="name" type="text">

Complete Tag Reference

Web pages banate waqt kaam aane wale sabse zaroori tags — category ke hisaab se. Isko bookmark kar lein.

Document & Metadata

  • <html>Poore page ka root element
  • <head>Metadata — title, links, styles
  • <title>Browser tab ka naam
  • <meta>Charset, viewport, description
  • <link>CSS file ya favicon connect karna
  • <script>JavaScript file ya code

Text Content

  • <h1>–<h6>Headings, importance ke hisaab se
  • <p>Paragraph
  • <strong>Bold — important text
  • <em>Italic — emphasis
  • <br>Line break
  • <hr>Horizontal divider line
  • <small>Chhota text — disclaimers

Lists

  • <ul>Unordered (bullet) list
  • <ol>Ordered (numbered) list
  • <li>List item
  • <dl><dt><dd>Description list — term aur meaning

Tables

  • <table>Poori table ka container
  • <tr>Table row
  • <th>Header cell (bold, centered)
  • <td>Normal data cell
  • <thead><tbody>Header aur body sections

Forms

  • <form>Form ka container
  • <input>text, email, number, date, checkbox…
  • <textarea>Multi-line text input
  • <select><option>Dropdown list
  • <button>Clickable button
  • <label>Input ka naam, accessibility ke liye

Media

  • <img>Image dikhana
  • <video>Video player
  • <audio>Audio player
  • <iframe>Doosra page embed karna
  • <svg>Vector graphics

Semantic Layout

  • <header>Page ya section ka top part
  • <nav>Navigation links
  • <main>Page ka main content
  • <section>Content ka logical group
  • <article>Independent, standalone content
  • <aside>Sidebar / related content
  • <footer>Page ya section ka bottom part

Generic Containers

  • <div>Block-level generic container
  • <span>Inline generic container
  • <a>Link — kisi bhi element ko link bana sakta hai
Project 1

Profile Card Page banaiye

Is course ke saare tags — headings, image, list, aur link — ek real profile card me use karke dekhiye. Right side me live output dekhein.

index.html
<div class="card">
  <img src="mentor.jpg" alt="Ashutosh Sir">
  <h2>Ashutosh Sir</h2>
  <p>Web Development Mentor</p>
  <ul>
    <li>HTML & CSS</li>
    <li>JavaScript</li>
    <li>Teaching since 2020</li>
  </ul>
  <a href="#">Follow karein →</a>
</div>
Live output