HTML & CSS Detailed Notes

HTML Basic Structure

Every HTML file has a basic skeleton — doctype, html, head, body. This tells the browser how to render the page and where metadata and visible content go.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Page</title>
  </head>
  <body>
    <h1>I Mizz uh!</h1>
  </body>
</html>

Explanation

<!DOCTYPE html> — declares HTML5 document type (browser mode).
<html> — root element. Use lang for the language (important for accessibility & SEO).
<head> — metadata, title, links to CSS, scripts that run before page render.
<body> — visible content: headings, paragraphs, images, forms, etc.

Doctype, Root & Document Flow

Browsers use the doctype to select rendering mode (standards mode vs quirks mode). Modern pages use HTML5 doctype (<!DOCTYPE html>).

Head contents

Common head elements:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" href="style.css">

Block-level vs Inline Elements

Block-level elements create a block/box and usually start on a new line. They can contain other block and inline elements.

Inline elements do not start on new lines; they sit inside lines and only take the width needed.

Examples

<!-- Block examples -->
<div>Container (block)</div>
<p>Paragraph (block)</p>

<!-- Inline examples -->
<span>inline text</span>
<a href="#">link</a>

Semantic vs Non-Semantic Tags

Semantic tags describe their content. Search engines & assistive tech (screen readers) benefit from semantics.

Common semantic tags

<header> — page or section header
<nav> — navigation links
<main> — main document content (one per page)
<article> — a self-contained composition (blog post)
<section> — related content group
<aside> — tangential content (sidebar)
<footer> — page/section footer

Example structure

<body>
  <header><h1>Site Name</h1></header>
  <nav>...menu...</nav>
  <main>
    <article>...post...</article>
    <aside>...related links...</aside>
  </main>
  <footer>Copyright info</footer>
</body>

When to use non-semantic tags

Use <div> and <span> when no semantic tag fits; but prefer semantic tags where possible.

HTML Attributes

Attributes add extra info to elements. Syntax: <tag attribute="value">.

Important attributes

id — unique identifier for element (useful for JS/CSS anchor links)
class — reusable class names for CSS/JS
src — source for images/scripts
href — link URL
alt — alternative text for images (accessibility)
title — tooltip text
data-* — custom data attributes for JS

Example

<img src="photo.jpg" alt="Young tree in a field" id="hero" class="rounded">
<a href="https://example.com" target="_blank" title="Open example">Visit</a>

Best practices

Always include meaningful alt for images (unless decorative: use empty alt alt="").
Use semantic class names (BEM or readable names).

HTML Forms

Forms collect user input. Main attributes on <form>:

action — server URL to submit to
method — "GET" or "POST"
enctype — encode type for file uploads (e.g., multipart/form-data)

Common input types

<input type="text">
<input type="email">
<input type="password">
<input type="number" min="1" max="100">
<input type="date">
<input type="checkbox">
<input type="radio">
<textarea></textarea>
<select><option>...</option></select>
<input type="file">
<button type="submit">Submit</button>

Labels & accessibility

Always associate labels with inputs using for (id of input) or wrap input inside label.

<label for="email">Email</label>
<input id="email" type="email" name="email" required>

Required & basic validation (HTML)

Use required, pattern, min/max, and input types for built-in validation.

<input type="text" name="username" required pattern="[A-Za-z0-9]{3,15}" title="3-15 letters/numbers">

Complete sample form

<form action="/submit" method="post">
  <label for="name">Full name:</label>
  <input id="name" name="name" type="text" placeholder="Your name" required>

  <label for="email">Email:</label>
  <input id="email" name="email" type="email" placeholder="you@example.com" required>

  <label>Gender:</label>
  <label><input type="radio" name="gender" value="male"> Male</label>
  <label><input type="radio" name="gender" value="female"> Female</label>

  <label for="about">About you:</label>
  <textarea id="about" name="about" rows="4"></textarea>

  <label for="resume">Resume (PDF):</label>
  <input id="resume" name="resume" type="file" accept=".pdf">

  <button type="submit">Apply</button>
</form>

Notes on security & UX

Always do server-side validation too — client-side HTML validation can be bypassed.
For better UX, show clear error messages with JS and preserve user input on errors.
Use appropriate type for mobile keyboards (e.g., email, tel, number).

HTML Tables

Tables display tabular data. Use semantic tags: <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>.

Example

<table>
  <caption>Student Marks</caption>
  <thead>
    <tr><th>Reg No</th><th>Name</th><th>Marks</th></tr>
  </thead>
  <tbody>
    <tr><td>S001</td><td>Anu</td><td>85</td></tr>
    <tr><td>S002</td><td>Karthi</td><td>78</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2">Average</td><td>81.5</td></tr>
  </tfoot>
</table>

Accessibility tips

Use scope="col" or scope="row" on <th> for screen readers.
Add a <caption> describing the table.

Meta Tags & SEO Basics

Meta tags in the <head> provide page metadata for search engines and social previews.

Important meta tags

<meta name="description" content="Short page summary (150-160 chars)">
<meta name="keywords" content="HTML, CSS, tutorial">
<meta name="author" content="Your Name">
<meta name="viewport" content="width=device-width, initial-scale=1">

Open Graph for social sharing

<meta property="og:title" content="Page Title">
<meta property="og:description" content="A longer description for social cards">
<meta property="og:image" content="https://example.com/preview.jpg">
<meta property="og:url" content="https://example.com/page">

SEO best practices (quick)

Use meaningful & unique <title> and meta description per page.
Use semantic headings (h1 once, then h2, h3...) and structure content well.
Optimize images (use alt, compress images, use modern formats like WebP).
Make pages mobile-friendly (responsive).

CSS — Introduction & Connections

CSS styles HTML. Ways to include CSS:

External CSS — recommended: <link rel="stylesheet" href="style.css">
Internal CSS — inside <style> in head (page-specific)
Inline CSS — inside element <div style="color:red"> (avoid for maintainability)

Selector basics

 element selector  p { color: #333; }
 class selector  .card { padding: 10px; }
  id selector  #main-title { font-size: 2rem; }

Specificity (short)

Inline style > id > class > element. Use this to reason why some CSS rules override others.

Box Model (margin, border, padding, content)

Every HTML element is a box. The box model layers:

Content — width/height
Padding — space inside border
Border — visible border
Margin — space outside border

CSS example

.box {
  width: 200px;        /* content width */
  padding: 20px;       /* inside */
  border: 4px solid #333;
  margin: 10px;        /* outside */
}

box-sizing property

By default, width applies to content only. Use box-sizing: border-box; to include padding & border inside width (easier to layout).

*, *::before, *::after { box-sizing: border-box; }

Flexbox Basics

Flexbox is for 1-dimensional layouts (row or column). Use it to align and space items easily.

Important properties

display: flex; — enable flex on container
flex-direction — row | column
justify-content — main axis alignment (center, space-between, flex-start...)
align-items — cross-axis alignment (center, stretch, flex-start...)
gap — space between flex items
flex-wrap — wrap items to next line

Example: center items

.container {
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center;     /* center vertically */
  height: 200px;
}

Card layout example

.cards { display: flex; gap: 20px; flex-wrap: wrap; }
.card { flex: 1 1 220px; padding: 12px; border: 1px solid #ddd; }

Try changing flex-direction to column or setting flex: 0 0 300px for fixed width cards.