Head, Layout, Semantics & Scripts

Everything in <head> is metadata — not shown on the page but used by browser, Google, and social apps.

The HTML Head

Everything in <head> is metadata — not shown on the page but used by browser, Google, and social apps.

Common tags: <title>, <meta charset>, <meta name="viewport">, <meta name="description">, <link rel="stylesheet">, <link rel="icon">.

Real-life example: head is like the back cover of a book with ISBN, author, and price — readers see the story (body), shops need the back cover info.

Full head example

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Learn HTML with Rishtaara — simple lessons." />
  <title>HTML Course</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="icon" href="favicon.ico" />
</head>

HTML Layout (classic structure)

A typical page has header (top), nav (menu), main (content), aside (sidebar), and footer (bottom). Old sites used tables for layout — do not do that now.

Use divs first, then upgrade to semantic tags below.

Real-life example: Layout is like a school building — gate (header), corridor signs (nav), classroom (main), notice board side (aside), office (footer).

Page regions

<header>Logo and title</header>
<nav><a href="/">Home</a></nav>
<main>
  <article>Lesson content here</article>
</main>
<aside>Related links</aside>
<footer>© 2026 Rishtaara</footer>

Responsive meta viewport

Without it, mobile users must pinch-zoom to read text.

Real-life example: Viewport meta is like telling a tailor to measure your actual phone screen, not assume a desktop TV size.

Viewport meta

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

HTML Semantics

Semantic tags describe meaning: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <figcaption>.

They help SEO, accessibility, and clean code. Screen readers jump by landmarks.

Real-life example: Semantic tags are like labeled shelves in a kitchen — "Spices", "Plates" — not just "Box 1", "Box 2".

Semantic article

<article>
  <header>
    <h1>HTML Semantics</h1>
    <p>Published July 2026</p>
  </header>
  <section>
    <h2>Why it matters</h2>
    <p>Clear structure helps everyone.</p>
  </section>
</article>

HTML Style Guide

Write lowercase tags. Quote attributes. Indent nested code. One <h1> per page. Meaningful alt text. Do not use tables for layout.

Keep line length readable. Use comments for big sections only.

Real-life example: A style guide is like classroom rules — uniform, neat notebooks, clear headings — so anyone can read your work.

Lowercase tags and attribute names
Double quotes for attribute values
Semantic HTML before extra divs
Validate with W3C validator when stuck

HTML JavaScript (script tag)

Add JavaScript with <script src="app.js"></script> or inline code inside <script>...</script>.

Put scripts at the end of <body> or use defer so HTML loads first.

Real-life example: script is like hiring a helper after the shop is built — structure (HTML) first, then the helper (JS) handles customers.

External and inline script

<button id="hi">Say Hi</button>
<script>
  document.getElementById("hi").addEventListener("click", function () {
    alert("Hello from Rishtaara!");
  });
</script>
<script src="app.js" defer></script>

HTML Computercode

Show code in pages with <code> for inline snippets and <pre> for multi-line blocks. <kbd> shows keyboard keys. <samp> shows program output.

Real-life example: code tag is like monospace font in your textbook when showing a formula — stands out from normal sentences.

Tip: Always include viewport meta and lang="en" on <html> for every new project.

Code display tags

<p>Use the <code>&lt;p&gt;</code> tag for paragraphs.</p>
<pre><code>&lt;h1&gt;Title&lt;/h1&gt;
&lt;p&gt;Text&lt;/p&gt;</code></pre>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>