HTML is the starting point of web development. It builds the structure of a page.
  
  ## What you will learn in this course
  - How to write a basic HTML page
  - How to add headings, text, links, images
  - How to make tables, lists, buttons
  - How to use class and id for styling and JavaScript
  
  ## How to practice (simple method)
  1) Make a folder on your PC
  2) Create `index.html`
  3) Open it in Chrome
  4) Edit and refresh
  
  ## First mini page
  ```html
  <!doctype html>
  <html>
    <head>
      <title>My First Page</title>
    </head>
    <body>
      <h1>Welcome</h1>
      <p>This is my first HTML page.</p>
    </body>
  </html>
  ```
  
  ## Preview (what it looks like)
  Welcome
  This is my first HTML page.
  
  ## Key point
  HTML is the skeleton of a website. CSS makes it pretty, JavaScript makes it interactive.

Start here. What HTML does, what you will build, and how to practice.

HTML Introduction

HTML means HyperText Markup Language.
  
  ## Why HTML exists
  Browsers need a standard way to understand:
  - headings
  - paragraphs
  - images
  - links
  - forms
  
  HTML tells the browser: “this is a heading”, “this is a link”, “this is an image”.
  
  ## HTML is not programming
  HTML does not do calculations or logic.
  It only describes structure.
  
  ## Simple example
  Try editing the HTML below:
  
  ```html
  <h1>Shop</h1>
  <p>Buy quality products.</p>
  ```
  
  ## Preview
  Shop
  Buy quality products.
  
  ## Remember
  If you want design, you use CSS.
  If you want action (click, fetch data), you use JavaScript.

What HTML is, why it exists, and what browser does with it.

You can write HTML in any text editor.
  
  ## Recommended for beginners
  - VS Code (best and common)
  - Notepad++ (simple)
  - even Notepad works, but not comfortable
  
  ## How to run HTML
  1) Create file: `index.html`
  2) Write HTML inside
  3) Save
  4) Double click the file OR right click → Open with Chrome
  
  ## Example file content
  ```html
  <h1>Hello</h1>
  <p>Testing HTML</p>
  ```
  
  ## Preview
  Hello
  Testing HTML
  
  ## Tip
  In VS Code, install “Live Server” extension to auto-refresh while you type.

Best simple editors for beginners and how to run HTML in browser.

HTML Editors

A correct HTML page has a basic structure.
  
  ## Basic template
  ```html
  <!doctype html>
  <html>
    <head>
      <title>Page Title</title>
    </head>
    <body>
      <h1>My Heading</h1>
      <p>My paragraph.</p>
    </body>
  </html>
  ```
  
  ## What each part does (simple)
  - doctype: tells browser it is HTML5
  - html: wraps everything
  - head: page info (title etc)
  - body: visible content
  
  ## Preview
  My Heading
  My paragraph.
  
  ## Practice
  Change the heading text and refresh the browser.

Your first complete HTML page with doctype, head, title, and body.

HTML Basic

An HTML element usually looks like:
  `<tag>content</tag>`
  
  ## Example
  ```html
  <p>This is a paragraph</p>
  ```
  
  ## Another example
  ```html
  <h1>Main Title</h1>
  ```
  
  ## Preview
  Main Title
  This is a paragraph
  
  ## Important rule
  Elements can be inside other elements:
  ```html
  <p>Hello <b>World</b></p>
  ```
  
  Preview:
  Hello World

Understand element structure: opening tag, content, closing tag.

HTML Elements

Attributes give extra details to an element.
  They are written inside the opening tag.
  
  ## Example: link
  ```html
  <a href="https://example.com">Go to Example</a>
  ```
  
  ## Example: image
  ```html
  <img src="photo.jpg" alt="My photo" />
  ```
  
  ## Preview
  Go to Example
  [Image will show here if file exists]
  
  ## Most used attributes
  - href (for links)
  - src (for images, scripts)
  - alt (image text)
  - class (group name for CSS)
  - id (unique name)
  
  ## Rule
  id should be unique on the page.

Add extra information using attributes like href, src, alt, class, id.

HTML Attributes

Headings are used for titles.
  
  ## Example
  ```html
  <h1>Main Title</h1>
  <h2>Section Title</h2>
  <h3>Small Title</h3>
  ```
  
  ## Preview
  Main Title
  Section Title
  Small Title
  
  ## Best practice
  - Use only one h1 for the page main topic
  - Use h2 for sections
  - Use h3 for sub-sections

Use h1 to h6 for titles and sections, correctly for SEO and readability.

HTML Headings

Paragraphs are written using <p>.
  
  ## Example
  ```html
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
  ```
  
  ## Preview
  This is a paragraph.
  
  This is another paragraph.
  
  ## Important note
  HTML ignores extra spaces in normal text.
  For a new line inside paragraph, use <br /> (but do not overuse it).

Write normal text using p tag, and understand spacing behavior.

HTML Paragraphs

HTML can style using the style attribute.
  This is called inline style.
  
  ## Example
  ```html
  <h1 style="color: blue;">Welcome</h1>
  <p style="font-size: 18px;">This text is bigger.</p>
  ```
  
  ## Preview
  Welcome (blue)
  This text is bigger.
  
  ## When to use inline styles
  - small quick tests
  - not recommended for full websites
  
  ## Better way
  Use CSS file later (we will cover).

Learn inline styles using style attribute, and why CSS is better for large projects.

HTML Styles

Formatting tags change how text looks.
  
  ## Common tags
  ```html
  <p><b>Bold</b> text</p>
  <p><i>Italic</i> text</p>
  <p><u>Underline</u> text</p>
  <p><mark>Highlighted</mark> text</p>
  <p>Code: <code>npm run build</code></p>
  ```
  
  ## Preview
  Bold text
  Italic text
  Underline text
  Highlighted text
  Code: npm run build
  
  ## Best practice
  Use <strong> instead of <b> for important text.
  Use <em> instead of <i> for emphasis.

Make text bold, italic, underlined, highlighted, and code-style in a clean way.

HTML Formatting

Use quotation tags when you show quoted text.
  
  ## Short quote
  ```html
  <p>He said: <q>Work smart.</q></p>
  ```
  
  ## Preview
  He said: "Work smart."
  
  ## Long quote
  ```html
  <blockquote>
    Good support is not only fast, it is also clear and respectful.
  </blockquote>
  ```
  
  ## Preview
  Good support is not only fast, it is also clear and respectful.
  
  ## Tip
  Use blockquote for paragraphs, q for short quotes.

Show quotes correctly using blockquote and q, and add citation if needed.

HTML Quotations

Comments are not visible on the page, but developers can see them in page source.
  
  ## Example
  ```html
  
  <h1>Welcome</h1>
  ```
  
  ## Preview
  Welcome
  
  ## Use comments for
  - marking sections
  - reminders while building layout
  
  ## Do not put
  - passwords
  - secret keys

Write notes in HTML without showing them on the page.

HTML Comments

Colors are mostly used in CSS, but you can test them with inline style.
  
  ## Example (color + background)
  ```html
  <p style="color: white; background: black; padding: 10px;">
    White text on black background
  </p>
  ```
  
  ## Preview
  White text on black background (with a black box)
  
  ## Color formats
  - names: red, blue, green
  - hex: #ff0000
  - rgb: rgb(255, 0, 0)
  
  ## Tip
  Hex proves most common in real projects.

Use color names, hex, and RGB in a simple way with examples.

HTML Colors

CSS styles your HTML.
  HTML should focus on structure, CSS on design.
  
  ## Link CSS file
  Create `styles.css` and link it in head:
  
  ```html
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  ```
  
  ## Example CSS (styles.css)
  ```css
  h1 { color: darkblue; }
  p { font-size: 18px; }
  ```
  
  ## Preview
  Your heading becomes dark blue, paragraph becomes bigger.
  
  ## Why separate file is better
  - easy to manage
  - same CSS can style multiple pages

Connect a CSS file to HTML and understand why CSS is separate from HTML.

HTML CSS

Links use the <a> tag.
  
  ## Simple link
  ```html
  <a href="about.html">About</a>
  ```
  
  ## Open in new tab (safe way)
  ```html
  <a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Visit Example
  </a>
  ```
  
  ## Link to section on same page
  ```html
  <a href="#pricing">Go to Pricing</a>
  <h2 id="pricing">Pricing</h2>
  ```
  
  ## Preview
  Click About → opens about page
  Click Go to Pricing → jumps down
  
  ## Tip
  Use meaningful link text, not “click here”.

Create links, open new tab safely, and link to sections in same page.

Add images, write correct alt text, and set basic size.

HTML Images

Favicon is the small icon in the browser tab.
  
  ## Add favicon
  ```html
  <link rel="icon" href="favicon.ico" />
  ```
  
  If using PNG:
  ```html
  <link rel="icon" type="image/png" href="favicon.png" />
  ```
  
  ## Preview
  Browser tab shows your icon.
  
  ## Tip
  Sometimes browser caches favicon. Hard refresh or clear cache if not updating.

HTML Favicon

The title is written in the head and shown in browser tab.
  
  ## Example
  ```html
  <head>
    <title>Help Desk Dashboard</title>
  </head>
  ```
  
  ## Preview
  Browser tab name becomes: Help Desk Dashboard
  
  ## Why title matters
  - search engines use it
  - bookmarks use it
  - users identify the tab quickly
  
  ## Tip
  Keep title short and meaningful.

Set the page title properly and understand why it matters for SEO and tabs.

HTML Page Title

Tables are used for data in rows and columns.
  
  ## Example
  ```html
  <table border="1">
    <tr>
      <th>Ticket</th>
      <th>Status</th>
    </tr>
    <tr>
      <td>#1021</td>
      <td>Open</td>
    </tr>
    <tr>
      <td>#1022</td>
      <td>Resolved</td>
    </tr>
  </table>
  ```
  
  ## Preview
  Ticket | Status
  #1021  | Open
  #1022  | Resolved
  
  ## Important rule
  Tables are for data, not for page layout.

Create a clean table using table, tr, th, td, and understand where tables should be used.

HTML Tables

Lists help you show multiple points clearly.
  
  ## Bullet list (ul)
  ```html
  <ul>
    <li>Open tickets</li>
    <li>Resolved tickets</li>
    <li>Pending tickets</li>
  </ul>
  ```
  
  ## Step list (ol)
  ```html
  <ol>
    <li>Login</li>
    <li>Open dashboard</li>
    <li>Check tickets</li>
  </ol>
  ```
  
  ## Preview
  • Open tickets
  • Resolved tickets
  • Pending tickets
  
  If ordered:
  1) Login
  2) Open dashboard
  3) Check tickets

Make bullet lists and step lists using ul, ol, and li.

HTML Lists

Some elements take full line (block). Some stay in same line (inline).
  
  ## Block examples
  - div, p, h1, section
  
  ## Inline examples
  - span, a, b, i
  
  ## Example
  ```html
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
  
  <span>First</span>
  <span>Second</span>
  ```
  
  ## Preview
  This is a paragraph.
  This is another paragraph.
  
  First Second
  
  ## Simple rule
  Block = new line
  Inline = same line

Understand why some elements start on new line and others stay in the same line.

HTML Block and Inline

div is a container (a box). It helps you group elements.
  
  ## Example
  ```html
  <div style="border: 1px solid #ccc; padding: 10px;">
    <h2>Card Title</h2>
    <p>This is inside a div box.</p>
  </div>
  ```
  
  ## Preview
  A box appears with title and paragraph inside.
  
  ## When you use div
  - grouping sections
  - making layout blocks
  - applying CSS to a group

Use div as a box/container to group content for layout and styling.

HTML Div

class is used to label multiple elements with the same group name.
  
  ## Example HTML
  ```html
  <h2 class="title">Tickets</h2>
  <p class="info">Open: 12</p>
  <p class="info">Resolved: 20</p>
  ```
  
  ## Example CSS
  ```css
  .title { color: darkblue; }
  .info { font-size: 18px; }
  ```
  
  ## Preview
  Tickets (dark blue)
  Open: 12 (bigger text)
  Resolved: 20 (bigger text)
  
  ## Important rule
  Many elements can share the same class.

Use class to style many elements the same way. One of the most important HTML skills.

HTML Classes

id is a unique name for one element.
  
  ## Example
  ```html
  <h2 id="mainTitle">Dashboard</h2>
  ```
  
  ## Use id for jumping links
  ```html
  <a href="#contact">Go to Contact</a>
  <h2 id="contact">Contact</h2>
  ```
  
  ## Preview
  Click link → jumps to Contact section.
  
  ## Important rule
  Do not repeat the same id on the same page.

Use id for unique elements. Useful for linking, CSS, and JavaScript selection.

HTML Id

Buttons are used for actions: submit, open modal, save, etc.
  
  ## Simple button
  ```html
  <button>Click Me</button>
  ```
  
  ## Button in a form (important)
  ```html
  <form>
    <input name="email" type="email" />
    <button type="submit">Submit</button>
    <button type="button">Cancel</button>
  </form>
  ```
  
  ## Preview
  A form shows email input with Submit and Cancel buttons.
  
  ## Key point
  Always set button type:
  - submit = sends form
  - button = normal click button

Create buttons, learn button types, and avoid the common form mistakes.

HTML Buttons

Forms allow users to send data to a website.
    
    ## Why forms are important
    Forms are used everywhere:
    - login pages
    - contact forms
    - signup pages
    - search boxes
    - feedback forms
    
    Without forms, websites cannot receive user input.
    
    ## Basic form structure
    ```html
    <form>
      <label>Name:</label>
      <input type="text" />
      <button type="submit">Send</button>
    </form>
    ```
    
    ## UI Preview
    A text box appears with a Send button.
    
    ## Important idea
    HTML form only **collects data**.
    Sending, saving, validating data is handled by backend (PHP, Node, etc).
    
    ## Remember
    Form = user input entry point

Understand what HTML forms are, why websites need them, and how data is collected from users.

HTML Forms

Form attributes control how and where data is sent.
    
    ## Important attributes
    - action → where data goes
    - method → how data is sent
    
    ## Example
    ```html
    <form action="/submit" method="post">
      <input type="text" name="username" />
      <button type="submit">Save</button>
    </form>
    ```
    
    ## What happens
    - User fills form
    - Clicks submit
    - Data is sent to server
    
    ## method types
    - GET → visible in URL (search)
    - POST → hidden (login, forms)
    
    ## Remember
    Always use POST for sensitive data

Learn action, method, and why forms need them.

Form Attributes

Form elements are fields inside a form.
    
    ## Common elements
    ```html
    <form>
      <input type="text" placeholder="Name" />
      <textarea placeholder="Message"></textarea>
      <select>
        <option>Support</option>
        <option>Sales</option>
      </select>
    </form>
    ```
    
    ## UI Preview
    - Text box
    - Message box
    - Dropdown menu
    
    ## Why these matter
    They collect structured data.
    
    ## Tip
    Do not overload forms. Keep them simple.

Learn the most used form elements in real websites.

Form Elements

Different input types guide the user.
    
    ## Common input types
    ```html
    <input type="text" placeholder="Name" />
    <input type="email" placeholder="Email" />
    <input type="password" placeholder="Password" />
    <input type="number" placeholder="Age" />
    <input type="date" />
    ```
    
    ## UI Preview
    Browser automatically shows:
    - email keyboard on mobile
    - date picker
    - number arrows
    
    ## Benefit
    Less errors, better user experience.

Use correct input types for better UX and validation.

HTML Input Types

Input attributes improve form behavior.
    
    ## Example
    ```html
    <input
      type="email"
      placeholder="Email"
      required
    />
    ```
    
    ## Useful attributes
    - required → must fill
    - placeholder → hint text
    - disabled → blocked
    - readonly → visible but not editable
    
    ## Remember
    Attributes guide users without JavaScript.

Control input behavior using required, placeholder, disabled, readonly.

Input Attributes

Canvas is used to draw shapes and animations.
    
    ## Why canvas exists
    - charts
    - games
    - drawings
    
    ## Example
    ```html
    <canvas id="box" width="200" height="100"></canvas>
    
    <script>
      const c = document.getElementById("box");
      const ctx = c.getContext("2d");
      ctx.fillStyle = "blue";
      ctx.fillRect(10,10,150,50);
    </script>
    ```
    
    ## UI Preview
    A blue rectangle appears.
    
    ## Note
    Canvas needs JavaScript to work.

Draw graphics using canvas with JavaScript.

HTML Canvas

SVG is used for icons and scalable drawings.
    
    ## Example
    ```html
    <svg width="120" height="100">
      <circle cx="50" cy="50" r="40" fill="red" />
    </svg>
    ```
    
    ## UI Preview
    A red circle appears.
    
    ## SVG vs Canvas
    - SVG = icons, logos
    - Canvas = animations, games

Create scalable vector graphics using SVG.

HTML SVG

HTML allows media without plugins.
    
    ## Supported media
    - video
    - audio
    
    ## Why important
    Modern websites rely heavily on media.

Understand how websites play audio and video.

HTML Media

Video tag plays video files.
    
    ## Example
    ```html
    <video controls width="300">
      <source src="movie.mp4" type="video/mp4" />
    </video>
    ```
    
    ## UI Preview
    Video player with play button.
    
    ## Tip
    Always include controls for user.

HTML Video

Audio tag plays sound files.
    
    ## Example
    ```html
    <audio controls>
      <source src="sound.mp3" type="audio/mpeg" />
    </audio>
    ```
    
    ## UI Preview
    Audio player with play button.
    
    ## Used for
    - podcasts
    - alerts
    - background sounds

HTML Audio

YouTube videos are embedded using iframe.
    
    ## Example
    ```html
    <iframe
      width="300"
      height="200"
      src="https://www.youtube.com/embed/VIDEO_ID"
    ></iframe>
    ```
    
    ## UI Preview
    YouTube video player appears.
    
    ## Tip
    Use embed URL, not normal video URL.

Embed YouTube videos safely using iframe.

HTML YouTube

Web APIs allow browser features to be used.
    
    ## Examples
    - location
    - storage
    - drag and drop
    
    ## Important note
    APIs work with JavaScript.

Understand what Web APIs are and why browsers provide them.

HTML Web APIs

Geolocation API finds user location.
    
    ## Example
    ```html
    <script>
    navigator.geolocation.getCurrentPosition(
      pos => alert(pos.coords.latitude),
      err => alert("Permission denied")
    );
    </script>
    ```
    
    ## Important
    Browser always asks permission.

HTML Geolocation

Drag and Drop lets users move elements.
    
    ## Simple example
    ```html
    <div draggable="true">Drag me</div>
    ```
    
    ## Used for
    - dashboards
    - file uploads
    - UI builders

HTML Drag and Drop

Web Storage saves data in browser.
    
    ## Example
    ```html
    <script>
    localStorage.setItem("theme", "dark");
    alert(localStorage.getItem("theme"));
    </script>
    ```
    
    ## Use cases
    - remember theme
    - save cart items
    - keep login state
    
    ## Difference
    - localStorage → permanent
    - sessionStorage → tab only

Store data in browser using localStorage and sessionStorage.

HTML Web Storage

HTML layout defines how a webpage is arranged on screen.
      
      ## Real world example
      Every website has:
      - top header (logo, menu)
      - middle content
      - bottom footer (copyright, links)
      
      ## Basic layout structure
      ```html
      <header>Header</header>
      <nav>Menu</nav>
      <main>
        <section>Main content</section>
      </main>
      <footer>Footer</footer>
      ```
      
      ## UI Preview
      - Header at top
      - Menu below header
      - Content in center
      - Footer at bottom
      
      ## Why layout matters
      Good layout makes website readable and professional.

Understand how a webpage is structured using header, nav, main, section, and footer.

HTML Layout

Semantic HTML uses meaningful tags.
      
      ## Non-semantic (bad)
      ```html
      <div>Header</div>
      <div>Footer</div>
      ```
      
      ## Semantic (good)
      ```html
      <header>Header</header>
      <footer>Footer</footer>
      ```
      
      ## Real world benefit
      - Google understands page better
      - Screen readers help blind users
      - Better SEO ranking
      
      ## Common semantic tags
      header, nav, main, section, article, footer

Learn semantic tags and why search engines and screen readers prefer them.

Semantic HTML

Responsive design means website adjusts to screen size.
      
      ## Real world example
      Same website:
      - looks good on phone
      - works on laptop
      - readable on tablet
      
      ## Viewport meta tag
      ```html
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      ```
      
      ## Without viewport
      Mobile shows zoomed-out website.
      
      ## With viewport
      Website fits mobile screen correctly.

Make websites work on mobile, tablet, and desktop.

HTML Responsive

The head section contains page information, not visible content.
      
      ## Example
      ```html
      <head>
        <title>My Website</title>
        <meta charset="UTF-8">
      </head>
      ```
      
      ## Real world usage
      - page title in browser tab
      - SEO meta data
      - charset for languages
      
      ## Important
      Content inside head is not shown on page.

Understand what goes inside the head tag and why it matters.

HTML Head

Page title appears on browser tab.
      
      ## Example
      ```html
      <title>Login Page</title>
      ```
      
      ## Real world benefit
      - User knows page purpose
      - Google shows this in search result
      - Helps bookmarking
      
      ## Tip
      Every page should have unique title.

Set page title for browser and Google search.

Favicon is small icon shown in browser tab.
      
      ## Example
      ```html
      <link rel="icon" href="favicon.ico">
      ```
      
      ## Real world usage
      - brand identity
      - easy tab recognition
      - professional look

File paths tell browser where files are.
      
      ## Relative path
      ```html
      <img src="images/logo.png">
      ```
      
      ## Absolute path
      ```html
      <img src="https://example.com/logo.png">
      ```
      
      ## Real world tip
      Use relative paths inside projects to avoid broken links.

HTML File Paths

JavaScript makes HTML interactive.
      
      ## Example
      ```html
      <button onclick="alert('Hello')">Click</button>
      ```
      
      ## UI Preview
      Button shows popup message when clicked.
      
      ## Real world use
      - form validation
      - buttons
      - dynamic content

Add interactivity using JavaScript inside HTML.

HTML JavaScript

Good HTML is easy to read and maintain.
      
      ## Best practices
      - use semantic tags
      - indent properly
      - lowercase tags
      - close all tags
      - meaningful titles
      
      ## Bad example
      ```html
      <DIV><P>Hello</P></DIV>
      ```
      
      ## Good example
      ```html
      <div>
        <p>Hello</p>
      </div>
      ```
      
      ## Why it matters
      Clean code saves time and avoids bugs.

Write clean, readable, and maintainable HTML.

HTML Best Practices

Congratulations, you completed HTML.
      
      ## You learned
      - page structure
      - text, links, images
      - forms and inputs
      - media and graphics
      - layout and responsiveness
      - best practices
      
      ## Real world readiness
      You can now:
      - build static websites
      - design landing pages
      - understand frontend basics
      - move to CSS and JavaScript
      
      ## What next
      Learn:
      - CSS for design
      - JavaScript for logic
      - frameworks later
      
      HTML is the foundation of the web.

Summary of everything you learned and what to do next.

HTML Course Complete

Learn HTML fundamentals for building web pages: semantic structure, forms, accessibility, and best practices.

HTML Resources

Browse HTML Content

Tutorials

Interview Questions

Practice Problems

Articles & Blog