HTML Basics and Building Webpages

Introduction to HTML

HTML (HyperText Markup Language) is the foundation of every web page. It defines what content appears and how it is structured. CSS controls visual styling and JavaScript adds interactivity, but HTML alone is sufficient to build a complete, functional website. Without HTML, the other two layers have nothing to work on.

What “HyperText Markup Language” really means

• HyperText – text that can link to other pages or resources. The first website ever (by Tim Berners‑Lee) consisted entirely of hyperlinked text; clicking a blue link navigates to another document.
• Markup – extra annotations that tell the browser how to display or organise the content. Analogy: In WhatsApp, wrapping text in asterisks (*text*) makes it bold. The asterisks are a simple markup language. HTML works the same way, but uses tags instead of symbols.

HTML tags: the building blocks of a webpage

An HTML tag is a markup instruction enclosed in angle brackets (< >). Tags tell the browser what role a piece of content plays (e.g., heading, paragraph, link). A typical tag comes in an opening and closing pair.

Once a browser parses an HTML file, it uses these tags to decide font size, alignment, and hierarchy — no CSS required for basic structure.

Worked example: heading vs. plain text

Here is a simple HTML file:

Some normal text here.
<h1>This is a Heading</h1>
Some more normal text.

When rendered in the browser:

• The first line appears as ordinary plain text.
• The <h1>-tagged text is larger, bolder, and visually distinct — it is treated as a top‑level heading.

This shows that markup directly changes how content is displayed without any extra styling files.

Key takeaways

• HTML = HyperText (links) + Markup (tags for structure).
• Tags are the core mechanism: they define the role and appearance of content.
• A complete website can be built with HTML alone; CSS and JavaScript are optional enhancements.
• The <h1> tag is used for the most important heading; browsers render it larger and bolder by default.
• Always pair opening and closing tags (e.g., <h1>…</h1>) — missing a closing tag can break the layout.

HTML Elements and Header Tags

HTML elements are the building blocks of web pages. An element consists of an opening tag, content, and a closing tag. For example, <p>Text</p> – the <p> is the opening tag, the content is "Text", and </p> is the closing tag. Some elements (e.g., <br>, <img>) have no closing tag and are called self-closing or void elements.

Heading Tags (<h1> to <h6>)

Heading tags define hierarchical headings, exactly like a book’s title, chapters, sections, and sub-sections. Intuitively, they tell both the browser and the reader: "This text is a heading, not just big bold text."

The browser renders each level with a distinct font size and weight, establishing a visual hierarchy.

Purpose: Semantic Structure & SEO

Headings do more than change font size. They:

• Show relationships between content (e.g., a <h2> module belongs under the <h1> course title).
• Help search engines (SEO) understand the page’s outline. Skipping levels (e.g., jumping from <h1> to <h3>) is considered poor practice.
• Improve accessibility for screen‑reader users navigating by headings.

Example: “Website Development” Course Outline

<h1>Website Development</h1>
  <h2>Module 1: Introduction</h2>
    <h3>Video 1: Welcome Notes</h3>
    <h3>Video 2: HTTP and Request Response</h3>
  <h2>Module 2: Product Principles</h2>
    <h3>Video 1: Product Principles</h3>
    <h3>Video 2: Design</h3>
  <h2>Module 3: HTML Basics</h2>
    <h3>Video 1: Intro</h3>
    <h3>Video 2: Heading Tags</h3>

This structure mirrors a table of contents. The <h1> is the course title; <h2>s are modules; <h3>s are videos within each module. Nesting is consistent: no skipped levels.

Exam tip: Never skip heading levels (e.g., <h1> → <h3>). This hurts both visual consistency and SEO. Always nest <h2> under <h1>, <h3> under <h2>, etc.

Key Takeaways

• An HTML element = opening tag + content + closing tag (unless void/self‑closing).
• Heading tags (<h1>...<h6>) define content hierarchy, not just size.
• Use one <h1> per page (the main title), then <h2> for major sections, <h3> for sub‑sections, etc.
• Proper heading structure improves readability, accessibility, and SEO.
• Do not skip levels – always descend sequentially.

HTML Structure

Every HTML file must follow a specific structure with mandatory elements to render correctly across all browsers. This foundation — called the HTML boilerplate — is a reusable template that ensures all essential parts are present before you add content.

Most code editors, such as VS Code, auto-generate this boilerplate: type ! and press Enter to produce the full structure.

The Document Type Declaration

The DOCTYPE declaration goes first:

<!DOCTYPE html>

This tells the browser you are using HTML5 (the modern version). Every HTML file must begin with this declaration.

The HTML Root Element

After DOCTYPE, the <html> tag wraps the entire document. This is the root element.

<html lang="en">

The lang attribute (e.g., lang="en" for English) is optional in basic usage but helps with accessibility and search engines.

The Head Element

The <head> section contains metadata — information for the browser, not visible on the page. Inside the head you typically find:

• <meta charset="UTF-8"> — sets the character encoding to support most languages and symbols.
• <meta name="viewport" content="width=device-width, initial-scale=1.0"> — ensures the page scales correctly on mobile devices (controls how content fits the screen width).
• <title> — defines the text that appears on the browser tab. For example:

  <title>Intro to Webpages</title>
  

The head elements are children of the head tag (nested inside it). The title text is the only part immediately visible to the user (in the tab).

The Body Element

The <body> section holds all content visible to users: headings, paragraphs, images, links, lists, tables, etc.

<body>
  <h1>This is a webpage</h1>
</body>

Everything added inside the body appears in the browser's main viewport.

Document Hierarchy (Visual)

Indentation

HTML files use indentation (spaces or tabs) to show nesting — which elements are children of which. Proper indentation makes the code readable; it is not required by the browser but is a best practice.

Exam tip: You do not need to memorise the entire boilerplate — know that ! + Enter in VS Code generates it. But you must recognise what each part does. The most commonly tested elements: DOCTYPE, html, head, title, and body.

Key takeaways

• DOCTYPE <!DOCTYPE html> declares HTML5 version to the browser.
• <html> is the root element; often includes a lang attribute.
• <head> holds metadata (charset, viewport, title) — not visible on the page.
• <title> text appears in the browser tab.
• <body> contains all visible content (headings, text, images, etc.).
• The boilerplate can be auto-generated in VS Code (! + Enter).

Indentation in HTML

Indentation is the practice of adding leading spaces (or tabs) at the start of a line to visually show the nesting structure of HTML elements. It does not affect how the page is rendered, but it profoundly improves code readability, organization, and debuggability.

Why Indentation Matters

Indented vs. Unindented – A Side‑by‑Side Comparison

<!-- Indented (clear hierarchy) -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

<!-- Unindented (structure invisible) -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

In the unindented version, it is difficult to see where <head> ends or whether <meta> has a closing tag. Indentation eliminates that confusion.

How to Apply Indentation

• Manually: Press <kbd>Tab</kbd> or add spaces before each nested tag.
• Automatically (recommended): Install Prettier (or a similar code formatter). Right‑click → Format Document (or use the keyboard shortcut). Prettier will re‑indent everything consistently.

Customising Indentation Preferences

Nesting and the Parent‑Child Rule

Elements in HTML form a parent‑child (or ancestor‑descendant) relationship. Indentation mirrors this:

• Parent elements stay at the same horizontal level (e.g., <head> and <body> are both children of <html>, so they share the same indentation).
• Child elements are indented one level deeper than their parent.
• Closing tags should align vertically with their opening tag (e.g., </head> is at the same indentation level as <head>).

Exam tip: Even though indentation is not graded in a browser, an exam or interview question may present unindented code and ask you to spot a missing closing tag. Practise “reading” indentation to catch errors instantly.

Key takeaways

• Indentation is purely for humans – it has zero effect on rendering.
• It improves readability, organisation, debugging, and team collaboration.
• Parent elements sit at the same level; children are indented one level deeper.
• Use a formatter like Prettier to enforce consistent indentation automatically.
• Always align opening and closing tags at the same indentation level.
• Choose tabs or spaces and a tab width (commonly 2 or 4 spaces) and apply it uniformly.

Paragraph Tag

The paragraph element (<p>) is the fundamental HTML building block for grouping and formatting blocks of text on a webpage. It visually separates text into distinct chunks with spacing between them, making content readable and structured.

What the Paragraph Element Does

• Starts with an opening tag <p> and ends with a closing tag </p>.
• All text that belongs to the paragraph goes between these two tags.
• Without it, plain text in HTML collapses into one continuous line, ignoring line breaks in the source code.

Plain Text vs. Paragraph Tags

Why It Matters

• Readability: Separate paragraphs are easier for humans to scan and read.
• Accessibility: Screen readers use <p> tags to identify where a paragraph begins and ends. This helps visually impaired users navigate and understand content structure.

Practical Example — Placeholder Text

When building a website without final copy, placeholder (dummy) text gives a realistic preview of how the layout will look. Tools like lipsum.com generate text with varied line lengths and word sizes, providing a better sense of final spacing than repeated phrases.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ...</p>

Exam tip: The closing </p> tag is optional in some older HTML specifications, but always include it for proper structure and accessibility — many browsers will still render text without it, but screen readers and validators may break.

Key takeaways

• Use <p> to split text into visually separated blocks.
• Plain text in HTML runs together; <p> fixes that.
• Paragraph tags improve readability for sighted users and navigation for screen readers.
• Placeholder text (e.g., from lorem‑ipsum generators) helps preview layouts without real content.

Self-Closing Tags (Void Elements)

Self-closing tags (also called void elements) are HTML tags that require no closing tag and contain no content. Unlike regular tags (e.g., <p>...</p>) which wrap content between an opening and a closing tag, a self-closing tag is self-contained — it represents an element that doesn’t “wrap” anything.

The forward slash in a self-closing tag (e.g., <hr />) goes at the end, not the start as in a closing tag.

Exam tip: The slash is optional in modern HTML — browsers treat <br>, <br/>, and <br /> identically. However, using the trailing slash is recommended for consistency and readability.

---

Horizontal Rule <hr>

The <hr> (horizontal rule) element draws a thematic break — a horizontal line — across the page. It visually separates sections of content (e.g., between two paragraphs).

When to use: To divide content where a new section begins (not merely for decoration).

Example:

<p>First paragraph text.</p>
<hr />
<p>Second paragraph text.</p>

• The line extends from left to right edge.
• No content is placed inside <hr> – it is purely visual.

Caution: Do not overuse <hr>. Too many horizontal rules make the page look cluttered.

---

Break Element <br>

The <br> (line break) element inserts a new line within the same block of text — it does not start a new paragraph. It is used when you need a line break inside a single paragraph or other block-level element.

When to use:

• Poetry, addresses, song lyrics
• Any text where line breaks are part of the content’s meaning

Example (address of IIM Bangalore):

<p>
  IIM Bangalore<br>
  Bilekhahalli, Bannerghatta Road<br>
  Bangalore – 560076
</p>

The rendered output keeps all lines inside one <p> tag, but displays on separate lines.

Exam tip: Never use <br> to add vertical spacing between paragraphs – use CSS margin or a new <p> tag instead. <br> is for structural line breaks within a single phrase.

---

Key Takeaways

• Self-closing (void) tags have no content and no closing tag; examples: <hr>, <br>, <img>.
• <hr> creates a horizontal rule to separate sections – use sparingly.
• <br> adds a line break inside a paragraph – use for addresses, poetry, etc.
• The trailing slash is optional in modern HTML but recommended for code clarity.
• Browsers ignore text placed inside a self-closing tag (it is not meant to hold content).

Ordered and Unordered Lists and Nesting

Lists are a fundamental way to group related items on a webpage. The choice between ordered (<ol>) and unordered (<ul>) depends on whether the sequence of items carries meaning.

• Unordered list (<ul>) – when the order of items does not matter. Rendered with bullet points.
• Ordered list (<ol>) – when the sequence is important (e.g., step-by-step directions). Rendered with sequential numbers.

HTML structure

Each list type contains list items (<li>). The tags themselves (<ul>, <ol>) do not display content; only <li> elements produce visible list items.

<!-- Unordered list: order irrelevant -->
<ul>
  <li>Only one guest allowed</li>
  <li>No entry after 6:00 PM</li>
  <li>Wear fancy clothes for DJ night</li>
</ul>

<!-- Ordered list: order matters -->
<ol>
  <li>Arrive at Majestic Metro</li>
  <li>Take Metro to JP Nagar</li>
  <li>Rent a cab towards Vega City Mall</li>
  <li>Take right at Vega City → IIMB</li>
</ol>

Exam tip: The numbering in an ordered list is automatically generated based on the order of <li> elements in the code. Reordering <li> tags renumbers the output.

Nesting lists

Nesting means placing one HTML element inside another. A list can be nested inside a list item to create sub‑lists. This establishes a parent–child relationship in the document tree.

Example – adding warnings under the first step of the directions:

<ol>
  <li>Arrive at Majestic Metro
    <ul>
      <li>Be careful of pickpockets</li>
      <li>Metro closes at 10:00 PM</li>
    </ul>
  </li>
  <li>Take Metro to JP Nagar</li>
  <li>Rent a cab towards Vega City Mall</li>
  <li>Take right at Vega City → IIMB</li>
</ol>

The inner <ul> becomes a child of the first <li>, and its <li> elements are children of that inner <ul>. Nesting can continue further (lists inside lists inside lists).

Relationship diagram

Worked example – IIMB fest webpage

Building a simple invitation page with two sections:

1. Points to remember (unordered list)
2. Directions (ordered list with nested warnings)

<h1>IIMB Fest – Welcome!</h1>

<h2>Points to remember</h2>
<ul>
  <li>Only one guest allowed</li>
  <li>No entry after 6:00 PM</li>
  <li>Wear fancy clothes for DJ night</li>
</ul>

<h2>Directions to IIMB</h2>
<ol>
  <li>Arrive at Majestic Metro
    <ul>
      <li>Watch out for pickpockets</li>
      <li>Last metro at 10:00 PM</li>
    </ul>
  </li>
  <li>Take Metro to JP Nagar</li>
  <li>Rent a cab towards Vega City Mall</li>
  <li>Take right at Vega City → IIMB</li>
</ol>

Rendered output: the directions appear numbered, with bullet‑point sub‑notes under the first step.

Comparison: <ul> vs <ol>

Exam tip: Nested lists must be placed inside an <li> element, never directly inside another <ul> or <ol>. Incorrect nesting breaks the document structure.

Key takeaways

• Use <ul> for bullet lists (order unimportant); use <ol> for numbered lists (order required).
• <li> tags are the only visible content containers inside lists.
• Nesting is done by placing a full <ul> or <ol> inside an <li>.
• Nesting creates parent‑child relationships analogous to an outline or tree structure.

Example Webpage: IIMB Fest 2024

A practical demonstration integrates previously learned HTML elements (headings, paragraphs, ordered lists, unordered lists) into a single functioning webpage.

Building the Boilerplate

Every HTML page begins with a boilerplate — the minimal structural template required for a browser to interpret the document correctly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IIMB Fest 2024</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

• <!DOCTYPE html> declares this is an HTML5 document.
• <html lang="en"> sets the language (English).
• <meta charset="UTF-8"> ensures text encoding supports all characters.
• <meta name="viewport"> scales the page to the device width (responsive).
• <title> defines the browser tab title — not rendered on the page itself.
• Everything inside <head> is metadata; the user does not see it.

Structuring Visible Content (the <body>)

Content inside <body> is rendered in the browser window. The page builds from top to bottom:

1. Main heading – <h1>IIMB Fest 2024</h1> – the most prominent text.
2. Introductory paragraph – <p>Welcome to the Best Fest in Bangalore.</p>
3. Sub-heading for instructions – <h2>Instructions</h2>
4. Unordered list (bullet points) – <ul> for items with no inherent order.
5. Sub-heading for directions – <h2>Directions to Reach</h2>
6. Ordered list (numbered) – <ol> for sequential steps.

Exam tip: Always match heading levels logically. An <h1> should be the page title; <h2> is a major sub-section. Skipping levels (e.g., <h1> then <h3>) breaks accessibility and semantics.

Adding Lists

HTML uses two list types:

The ordered list for directions demonstrates a step‑by‑step journey. The unordered list captures rules that have no specific order.

Viewing the Page

Use Live Server (a VS Code extension) to auto‑refresh the page on save. The rendered page shows:

• A bold heading "IIMB Fest 2024".
• A welcoming paragraph.
• A bullet‑point list of instructions.
• A numbered list of directions.

The result is functional but visually plain – styling is deferred to CSS later in the course.

Connection to what comes next

The current page will be extended with anchor elements (<a>) for links and images (<img>). CSS will eventually add layout and beautification.

Key takeaways

• Every HTML page starts with <!DOCTYPE html> and the <html>, <head>, <body> structure.
• Use <h1> for the primary page heading; <h2> for major sections.
• Unordered lists (<ul>) group items without ordering; ordered lists (<ol>) imply sequence.
• Metadata in <head> (charset, viewport, title) is not rendered but is essential.
• Tools like Prettier and Live Server improve developer workflow.

Anchor Element

The anchor element (<a>) creates hyperlinks — the foundation of web navigation. Without it, users couldn't jump between pages or resources. Intuitively, it turns a piece of text (or any inline content) into a clickable link.

Syntax & basic behaviour

<a>Visit IIMB</a>

This displays plain text, not a link. To make it functional, an attribute is needed.

The href attribute

href (hypertext reference) specifies the destination URL. It is tag-specific to the anchor element.

<a href="https://www.iimb.ac.in">Visit IIMB</a>

The text Visit IIMB becomes a blue, underlined link. Clicking it navigates to the given URL.

Exam tip: Without the href attribute, the anchor element is just inert text. The href attribute is what turns it into a hyperlink.

Nesting anchor tags inside other elements

An anchor can wrap any inline or block content (headings, list items, etc.).

Example:

<li><a href="...">Be careful of pickpockets</a></li>

Only the word "Be careful of pickpockets" is linked; the rest of the item is not.

Attributes: global vs. tag-specific

Attributes give HTML elements extra functionality.

• Global attributes — apply to nearly every HTML element (e.g., draggable, hidden, class, id).
• Tag-specific attributes — unique to certain elements (e.g., href for <a>, src for <img>).

Best practice: use official documentation (MDN) rather than memorising every attribute.

Examples of global attributes

• draggable="true" — allows the element to be dragged.

  <li draggable="true">Only one guest is allowed</li>
  

• hidden="until-found" — hides the element until the browser finds a text match (e.g., via Ctrl+F).

  <li hidden="until-found">Wear good clothes</li>
  

  Searching for "wear" reveals the item.

The two most important global attributes, class and id, will be covered later (critical for CSS/JavaScript).

---

Key takeaways

• The anchor element <a> creates hyperlinks only when its href attribute is present.
• href is a tag-specific attribute; global attributes like draggable and hidden work on most elements.
• An anchor can wrap entire elements (headings, list items) or just a part of them.
• Never memorise all attributes – use MDN documentation to look them up.
• class and id are essential global attributes that unlock styling and scripting.

Image Tag (<img>)

The image tag (<img>) embeds images — static photos, animated GIFs — into a webpage. It is a void element (no closing tag) because its content is the image itself, not text.

Attributes

Exam tip: alt text is required for accessibility and SEO. If the image is purely decorative, use alt="" (empty) — never omit the attribute.

Image sources

• Online (URL): Provide a direct link to the hosted image (e.g., from placeholder.co or picksome.photos). <img src="https://via.placeholder.com/150" alt="placeholder">

• Local (relative path): Use the ./ notation to specify the file relative to the HTML document. <img src="./images/dj.gif" alt="DJ night"> – assumes an images/ folder in the same directory.

File formats & WebP

• GIF – supports animation but larger file sizes.
• JPEG/PNG – static images, larger sizes.
• WebP – modern format by Google, produces smaller files while maintaining good quality, supports both static and animated images. Recommended for faster loading.

Practical example: Adding a logo and a GIF

<!-- Logo before heading -->
<img src="https://iimblogo.url/logo.png" alt="IIMB logo" height="40">

<!-- GIF inside a list item -->
<li>DJ Night
  <br>
  <img src="./images/dj.gif" alt="DJ night" height="100">
</li>

The height attribute prevents the logo from overwhelming the heading; the <br> places the GIF on a new line.

Key takeaways

• <img> is a void element: no closing tag.
• src specifies the image location (URL or local path).
• alt provides fallback text and improves accessibility/SEO.
• Use height and width to control image dimensions.
• Prefer WebP for smaller file sizes and faster loading.

HTML Comments

HTML comments are invisible notes embedded in the source code. They are never rendered in the browser — only developers see them (via “View Page Source” or an editor). Their job: to document, remind, or temporarily disable code without affecting the page.

Syntax

<!-- This is a comment. It will not appear in the browser. -->

• Start with <!--
• End with -->
• Everything between is ignored by the browser

Exam tip: Comments must be placed inside the HTML file. They do not hide CSS or JavaScript — they only hide the HTML markup they wrap.

Why use comments?

Worked example

Original code — a note that shows up in the browser (bad):

<p>For reference: If I add anchor around list item, the entire list item including the bullet point becomes a link</p>

Fix — wrap it in a comment:

<!-- For reference: If I add anchor around list item, the entire list item including the bullet point becomes a link -->

Now it disappears from the rendered page.

VS Code shortcut

• Windows/Linux: Ctrl + /
• Mac: Cmd + /

Select the line(s) you want to comment/uncomment and press the shortcut.

Key takeaways

• Comments use <!-- ... --> and are invisible in the browser.
• Use them for notes, reminders, debugging (temporarily disable code), and collaboration.
• They do not hide content from users who view the source.
• The editor shortcut (Ctrl+/ or Cmd+/) makes toggling comments fast.
• Comments keep code clean and help future you (or your team) understand intent.

Inline Comments

Inline elements share horizontal space with other elements, unlike block elements which occupy the full available width of their parent container. This distinction is fundamental to HTML layout and controls how content flows on the page.

Block vs Inline – The Core Difference

A block-level element always starts on a new line and takes up the entire horizontal space available, stretching from left to right. An inline element occupies only the space needed for its content, allowing subsequent elements to sit beside it on the same line.

Worked example (from demo): Placing two <h1> elements and an <h2> side by side in code causes each to appear on its own line in the browser because they are blocks. Below them, an <img> and an <a> tag placed consecutively appear on the same line because they are inline.

When inspected in Chrome DevTools, the hover highlight for block elements spans the entire browser width, while the highlight for inline elements only covers the element’s bounding box.

Generic Containers: <div> and <span>

These are neutral, semantically empty elements used purely for grouping and styling.

• <div> – A generic block container. Wrapping any content inside <div> forces that content onto a new line and causes the div to occupy full width.

• <span> – A generic inline container. It does not change layout; it allows targeting a specific portion of text or inline content without affecting flow.

Example – <div> effect: Wrapping an anchor tag <a href="...">IIMB link</a> with <div> pushes the link to the next line because the div is a block element.

Example – <span> effect: Inserting <span> around a word inside a paragraph <p> produces no visual change; the span simply marks that portion for later styling or scripting.

<!-- Block element wrapping inline content -->
<div>
  <a href="https://www.iimb.ac.in">IIMB link</a>
</div>

<!-- Span within a paragraph -->
<p>Some sample text. <span>This is the second line.</span></p>

Exam tip: Use <div> for structural sections (like headers, footers, columns) and <span> when you need to style a small piece of text within a sentence. Mixing them up can break your layout.

Key Takeaways

• Block elements (<h1>, <p>, <div>, <hr>) occupy the full width and stack vertically.
• Inline elements (<a>, <img>, <span>) sit side‑by‑side and only take the space they need.
• <div> is a generic block container; <span> is a generic inline container.
• Neither <div> nor <span> has default styling; they are purely structural.
• Use Chrome DevTools hover highlighting to quickly identify whether an element is block or inline.

Forms

Forms are HTML elements that collect user input and send it to a server for processing. Every login page, search bar, or checkout flow relies on a form. A form itself is an invisible container – it only renders content through the input elements and labels placed inside it.

The action attribute

The action attribute tells the browser which URL to send the collected data to. When a form is submitted (e.g., by pressing Enter in a search field), the browser builds a request URL by taking the action URL and appending a query string containing the form data.

• Example from Amazon: the search form has action="/s" and a text input named k. Submitting laptops takes the browser to /s?k=laptops.

Exam tip: The form’s action does not need to be a full URL – it can be a relative path. The data is encoded as key=value pairs in the query string (GET method unless specified otherwise).

Common input types

HTML provides many input types, each triggering a specific browser control (text box, color picker, numeric spinner, etc.). Not all types are supported in every browser, but modern browsers handle most consistently.

The name attribute is essential – it becomes the key in the query string sent to the server. Without a name, the input’s value is not transmitted.

Input attributes

Every input element can carry:

• type – specifies the kind of input control.
• name – the key used when submitting the data (e.g., username, email).
• id – a unique identifier for the element, used for linking labels and for CSS/JavaScript.

Labels

A label is a textual description associated with a specific input. Clicking the label automatically focuses or activates the linked input – improving accessibility and usability.

Two ways to associate a label with an input:

1. for attribute – set for to the id of the target input.

   <label for="username">Enter username</label>
   <input type="text" id="username" name="username">
   

2. Wrapping – place the input inside the label tag. No for needed.

   <label>Enter username
       <input type="text" name="username">
   </label>
   

Both render identically. The for method is more explicit and works even when the label and input are not adjacent in the markup.

Important: The label must be placed near its input in the HTML – they do not magically rearrange. Use <br> or <p> to control vertical layout.

<form action="/submit-form-info">
    <label for="username">Enter username</label>
    <input type="text" id="username" name="username"><br><br>

    <label for="email">Enter your email</label>
    <input type="email" id="email" name="email"><br><br>

    <label for="age">Mention your age</label>
    <input type="number" id="age" name="age"><br><br>

    <label for="favcolor">Pick your favourite color</label>
    <input type="color" id="favcolor" name="color">
</form>

Form structure diagram

Key takeaways

• A form is a container; nothing is visible until you add inputs.
• The action attribute defines where the data is sent (URL or relative path).
• Every input should have a name – without it, the input’s value is not submitted.
• Common input types include text, email, number, color, password, and submit.
• Labels improve usability; associate them via for (matching input id) or by wrapping the input.
• Inputs without name are invisible to the server – a frequent beginner mistake.

Buttons in HTML Forms

A button is the primary way users interact with a form — submitting data, resetting fields, or triggering custom actions. Intuitively: every click needs a purpose; the type attribute tells the browser what that purpose is.

The button element

Syntax:

<button type="submit|button|reset">Visible Text</button>

The text between the opening and closing tags becomes the button's label. The type attribute controls its default behavior.

Button types and their behavior

Important: If type is not specified, the browser defaults to type="submit". This can cause unintended form submissions if a developer forgets to set the type.

Inside vs. outside a form

• Button inside a form – A submit button submits the form it belongs to. A button type button does nothing until JavaScript is attached.
• Button outside a form – Even with type="submit", a button that is not inside any <form> element has no default submit behavior. It exists solely for JavaScript-based actions.

Exam tip: The most common exam trap — a button with no type attribute defaults to submit, even if the developer intended it to be a plain button. Always explicitly set type="button" to prevent accidental form submission.

Key takeaways

• The <button> element always requires a closing tag; the text inside is the label.
• Default type is submit when inside a form.
• type="button" removes the default submit action — useful for custom JavaScript.
• Buttons outside a form never submit anything, regardless of type.
• Understanding button types is essential for controlling form behavior and enabling interactive web applications.

The name Attribute in HTML Forms

Every form input that sends data to a server needs a name attribute. Without it, the user’s input is invisible to the backend.

Intuition: a form is like a delivery slip. The name is the label on the blank (e.g., “email”), and the value is what the user writes in that blank. The server can only read data that has a label.

How form data is sent

When a form is submitted (GET method by default), the browser collects every <input> that has a name attribute and assembles key-value pairs:

<key> = <value>

These pairs are appended to the form’s action URL as a query string, starting with ?, each pair separated by &.

Structure:

action-url?name1=value1&name2=value2&...

Exam tip: The name attribute is what appears as the key in the query string. The id attribute is for CSS/JavaScript — it is not sent to the server.

Worked example

Given this form:

<form action="/submit-form-info">
  <input name="username" value="">
  <input name="email" value="">
  <input name="age" value="">
  <input name="color" type="color">
  <button type="submit">Submit</button>
</form>

User fills:

• username → govind
• email → govind.iimb.ac.in
• age → 99
• color → #aabbcc

On submit, browser navigates to:

/submit-form-info?username=govind&email=govind.iimb.ac.in&age=99&color=%23aabbcc

Notice special characters (like #) are URL-encoded (%23).

What happens when name is missing

If an input has no name attribute, its value is never sent in the request.

Example: Remove name="email" from the form above.

Submitted query string:

/submit-form-info?username=govind&age=99&color=%23aabbcc

The email field is completely absent — the server receives no data for that input.

Submission flow

Why backend developers care

Server-side code (PHP, Python, Node.js, etc.) references form data by the name value. If the name is missing or misspelled, the server cannot retrieve that piece of data.

Key takeaways

• The name attribute labels an input’s value as a key in the key‑value pair sent to the server.
• Form data is transmitted via the query string (in GET) as ?key1=value1&key2=value2.
• Inputs without a name attribute are omitted from the request.
• Every input that should be processed by the backend must have a unique, meaningful name.
• Special characters in values are URL‑encoded automatically.

Forms: Building a Registration Form

HTML forms allow users to input data and send it to a server. Intuitively, think of a form as a container that collects information (e.g., name, email) and packages it into key=value pairs appended to the URL (or sent via POST). Every input field needs a name (the key) and a value (the user’s entry or a fixed option) to be transmitted.

Form Structure

The <form> element defines the container. Two key attributes:

• action – the URL where data is sent (here "/register" placeholder).
• method – GET (default, seen in URL) or POST (not shown, but implied).

Inside the form, each input is paired with a <label> for accessibility. The label’s for attribute matches the input’s id.

<form action="/register">
  <!-- inputs and button go here -->
  <button type="submit">Register</button>
</form>

Exam tip: A form with only a submit button and no inputs does nothing – data must come from named input elements.

---

Text Input & Validation: type="text", required, minlength, maxlength

Collect a participant’s name using a text input. Use required (Boolean attribute) to prevent submission when empty. Enforce length with minlength and maxlength.

<label for="name">Enter your name</label>
<input type="text" id="name" name="name" required minlength="2" maxlength="12">

• required – browser shows a popup: “Please fill out this field”.
• minlength="2" – “Please lengthen this text to 2 characters or more”.
• maxlength="12" – prevents typing beyond 12 characters.
• Validation is client-side (browser built-in); appearance varies by browser.

---

Email Input: type="email"

For capturing participant email addresses that must contain an @ symbol. The type="email" attribute invokes built-in email validation.

<label for="email">Enter your email</label>
<input type="email" id="email" name="email">

• Submitting govi (no @) → “Please include an '@' in the email address.”
• On valid submission, the @ is URL-encoded as %40.

---

Dropdown (Select) Menu: <select> + <option>

Use a dropdown to limit T‑shirt size choices. The <select> element’s name attribute becomes the key; each <option> has a value sent as the value.

<label for="tshirt-size">Select t-shirt size</label>
<select id="tshirt-size" name="tshirt-size">
  <option value="">Please select an option</option>
  <option value="38">38</option>
  <option value="40">40</option>
  <option value="42">42</option>
  <option value="44">44</option>
</select>

• Options render in the order written in the HTML.
• If <option> lacks a value attribute, nothing is submitted for that choice.
• The name of the <select> is the key; the value of the chosen <option> is the value.

---

Checkbox: type="checkbox"

Use a checkbox to obtain agreement (e.g., to fest rules). To make it mandatory, add required.

<label for="terms">Do you agree to all conditions?</label>
<input type="checkbox" id="terms" name="terms" value="agreed" required>

• Unchecked: the name key is omitted entirely from the submission.
• Checked: sends terms=agreed (if value is set) or terms=on (default).
• With required, browser prevents submission until the box is ticked.

---

Radio Buttons: type="radio"

Allow mutually exclusive selection, e.g., “Student” vs. “Alumni”. All radio buttons in the same group must share the same name attribute. Provide explicit value attributes to send meaningful data.

<label for="alumni">Alumni</label>
<input type="radio" id="alumni" name="attendee-type" value="alumni">
<label for="student">Student</label>
<input type="radio" id="student" name="attendee-type" value="student">

• Same name ensures only one radio can be selected at a time.
• If value is missing, the sent value is on (unhelpful).
• The for label linkage allows clicking the label to select the radio.

---

How the Submission URL Works (GET method)

When the form is submitted via GET, all key=value pairs are appended to the action URL:

/register?name=Govind&email=govind%40gmail.com&tshirt-size=42&terms=agreed&attendee-type=alumni

• Keys come from the name attribute of each input/select.
• Values come from the value attribute (or user typed text for text/email).
• @ is encoded as %40.
• Unchecked checkboxes and unselected radio buttons do not appear.

Exam tip: The name attribute is essential – without it, the input’s data is never sent. For checkboxes and radios, always provide a meaningful value attribute.

---

Worked Example: Complete Registration Form

<form action="/register">
  <!-- Name -->
  <label for="name">Enter your name</label>
  <input type="text" id="name" name="name" required minlength="2" maxlength="12">
  <br><br>

  <!-- Email -->
  <label for="email">Enter your email</label>
  <input type="email" id="email" name="email">
  <br><br>

  <!-- T-shirt size dropdown -->
  <label for="tshirt-size">Select t-shirt size</label>
  <select id="tshirt-size" name="tshirt-size">
    <option value="">Please select</option>
    <option value="38">38</option>
    <option value="40">40</option>
    <option value="42">42</option>
    <option value="44">44</option>
  </select>
  <br><br>

  <!-- Checkbox -->
  <input type="checkbox" id="terms" name="terms" value="agreed" required>
  <label for="terms">Do you agree to all conditions?</label>
  <br><br>

  <!-- Radio buttons -->
  <input type="radio" id="alumni" name="attendee-type" value="alumni">
  <label for="alumni">Alumni</label>
  <input type="radio" id="student" name="attendee-type" value="student">
  <label for="student">Student</label>
  <br><br>

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

Submission sample (if alumni selected):

/register?name=Govind&email=govind%40iimb.ac.in&tshirt-size=42&terms=agreed&attendee-type=alumni

---

Key takeaways

• A form sends data as key=value pairs; keys come from name attributes, values from user input or value attributes.
• required, minlength, maxlength, and type‑specific validation (email, number) provide client‑side checks.
• Use <select> with <option> for dropdowns; the value attribute determines what is sent.
• Checkboxes send nothing when unchecked; use required to force agreement.
• Radio buttons with the same name enforce single selection; always set a value for each.
• Labels linked by for (matching id) improve usability and accessibility.

HTML Tables

HTML tables organise data into rows and columns — like a spreadsheet in the browser. Use them whenever you need to display tabular data: product comparisons, statistics, schedules. Crucial rule: tables are for data, not for page layout (use CSS for layout).

---

Table Structure

Every table is built from three core elements nested in a strict hierarchy:

• <table> — the container.
• <tr> — a table row. Rows are stacked vertically.
• <td> — a data cell.
• <th> — a header cell (automatically bold and centred; semantically marks a row/column heading).

Browsers often auto-insert <tbody> around data rows, but you do not need to write it explicitly.

Exam tip: Always use <th> for headers — this is both semantic and helps accessibility. Never style a <td> to look like a header.

---

Basic Table (no spanning)

<table>
  <tr>
    <th>Name</th>
    <th>Height (cm)</th>
    <th>Height (in)</th>
  </tr>
  <tr>
    <td>Raja</td>
    <td>180</td>
    <td>73.5</td>
  </tr>
  <tr>
    <td>Ram</td>
    <td>165</td>
    <td>67.5</td>
  </tr>
  <tr>
    <td>Mohan</td>
    <td>172</td>
    <td>70.0</td>
  </tr>
</table>

Each <tr> contains the same number of cells. Header row uses <th>, data rows use <td>.

---

Spanning Cells: rowspan and colspan

Sometimes a cell needs to stretch across multiple rows or columns — exactly like merging cells in Excel.

• colspan="n" — cell spans n columns horizontally.
• rowspan="n" — cell spans n rows vertically.

Code for the table above:

<table>
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Height</th>
  </tr>
  <tr>
    <th>in cm</th>
    <th>in inches</th>
  </tr>
  <tr>
    <td>Raja</td>
    <td>180</td>
    <td>73.5</td>
  </tr>
  <tr>
    <td>Ram</td>
    <td>165</td>
    <td>67.5</td>
  </tr>
  <tr>
    <td>Mohan</td>
    <td>172</td>
    <td>70.0</td>
  </tr>
</table>

When you use rowspan or colspan, omit the cells that would have been in the merged area. The total number of logical columns per row must stay consistent.

Exam tip: Count columns carefully. In the example above, the first row has 2 cells (rowspan + colspan), the second row has 2 cells (both <th>), and each data row has 3 <td> — but because the first cell of each data row is already occupied by the rowspan from row 1, you only write <td> twice per data row. Mistaking the count is a common error.

---

Real‑World Example: IIMB Fest Event Schedule

Add a schedule table to the IIMB Fest website (below the forms, separated by <hr>):

<h2>Event Schedule</h2>
<table>
  <tr>
    <th>Timings</th>
    <th>Event</th>
    <th>Venue</th>
  </tr>
  <tr>
    <td>9:00 AM</td>
    <td>Opening Ceremony</td>
    <td>Main Auditorium</td>
  </tr>
  <tr>
    <td>10:00 AM</td>
    <td>Panel Discussion</td>
    <td>Seminar Hall</td>
  </tr>
  <tr>
    <td>12:00 PM</td>
    <td>Lunch</td>
    <td>Cafeteria</td>
  </tr>
  <tr>
    <td>2:00 PM</td>
    <td>Cultural Activities</td>
    <td>Amphi Theater</td>
  </tr>
</table>

---

Key Takeaways

• Tables are built from <table>, <tr>, <td> (data), and <th> (headers).
• Rows are defined with <tr>; cells go inside rows.
• Use rowspan to merge cells vertically and colspan to merge horizontally.
• Tables are for tabular data only — never use them for page layout.
• Always include proper header cells (<th>) for accessibility and clarity.
• Styling (borders, colours, spacing) is done with CSS, not HTML.

Semantic HTML

Semantic HTML uses meaningful tags that describe the purpose of content, not just its appearance. Instead of generic containers like <div> or <span>, you use tags such as <header>, <footer>, <main>, <section>, <nav>, <article>, and <form>. These make the structure of a webpage clear to browsers, developers, search engines, and assistive technologies.

Why semantic HTML matters

Semantic vs. non-semantic HTML

Definition – semantic in programming: the meaning of a piece of code. In HTML, an <h1> element is semantic because it tells the browser (and screen reader) that the wrapped text is the top-level heading.

Key semantic elements

Transforming the IIMB Fest page

Walkthrough of adding semantic tags to the example webpage (IIMB Fest). The result has no visual change — all improvements are in the underlying code structure.

Step 1: Wrap top content in <header>

<header>
  <img src="..." alt="IIMB Logo">
  <h1>IIMB Fest</h1>
  <p>Welcome to the annual fest...</p>
</header>

• The three top elements (image, main heading, introductory paragraph) become one logical unit.

Step 2: Wrap primary content in <main>

<main>
  <!-- all sections from first <h2> to table end -->
</main>

• <main> explicitly marks the central content of the page; only one <main> per page.

Step 3: Split main content into <section>s

Logical grouping:

<main>
  <section>
    <h2>Instructions</h2>
    <ol>...</ol>
  </section>
  <hr>
  <section>
    <h2>Directions</h2>
    <ul>...</ul>
  </section>
  <section>
    <h2>Registration</h2>
    <form>...</form>
  </section>
  <section>
    <h2>Event Schedule</h2>
    <table>...</table>
  </section>
</main>

• Sections make code easier to read and reuse; each has a distinct heading.

Step 4: Add semantic table elements

Replace the plain <table> with structure:

<table>
  <thead>   <!-- group header row -->
    <tr>
      <th>Event</th>
      <th>Date</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody>   <!-- group main data rows -->
    <tr><td>Inauguration</td><td>Oct 10</td><td>10:00</td></tr>
    <tr><td>Workshop</td><td>Oct 11</td><td>09:00</td></tr>
    <tr><td>Concert</td><td>Oct 12</td><td>19:00</td></tr>
    <tr><td>Closing</td><td>Oct 13</td><td>17:00</td></tr>
  </tbody>
  <!-- <tfoot> can be added for summary rows -->
</table>

• <thead> – row(s) that act as column headers.
• <tbody> – the main data.
• <tfoot> – optional footer (e.g., totals, notes).

Exam tip: Semantic table elements (<thead>, <tbody>, <tfoot>) improve accessibility and are frequently tested. The browser still renders the same visual table, but screen readers can announce header cells properly.

Final structure diagram

• No visual change – only code structure improvements.

Key takeaways

• Semantic HTML uses meaningful tags (<header>, <main>, <section>, etc.) instead of generic <div>.
• Benefits: accessibility (screen readers), SEO (better indexing), and code maintainability.
• Common semantic elements: <header>, <nav>, <main>, <section>, <article>, <footer>, <form>, <time>.
• Tables have semantic children: <thead> (header row), <tbody> (data rows), <tfoot> (footer row).
• Adding semantics improves the meaning of the page without changing its appearance.

File Paths

File paths are the addresses that tell a web browser or program where a file (image, CSS, HTML, etc.) lives inside a project. There are two styles: absolute paths (full route from the root) and relative paths (route from the current working file).

Intuition: Directions to a location

• Absolute path – start from the root (e.g., “India” → Karnataka → Bangalore → Bannerghatta Road → IIM Bangalore). Unchanging, works from anywhere.
• Relative path – start from your current location. If you are already in Bangalore: “Bannerghatta Road → IIM Bangalore”. If in Chennai: “Go from Chennai to Bangalore → Bannerghatta Road → IIM Bangalore”. Shorter, flexible.

Absolute vs. Relative Paths

Syntax of Relative Paths

Worked Example: Referencing images in a project

Given the folder structure:

Desktop/
├── folder-in-parent/
│   └── image-one.jpg
└── website-development/   ← (project folder)
    ├── 3.17-file-paths.html   ← (current file)
    ├── same-folder-image.jpg
    └── images/
        └── sub-folder-image.webp

Exam tip: In HTML, <img src="..."> with a relative path is recommended over absolute because it keeps the project portable. Live servers often block access to files outside the project root; absolute paths may fail.

Why the parent-folder image didn’t render in VS Code’s live server?

Live servers (e.g., VS Code’s) restrict access to files outside the project directory for security. The relative path ../ breaks because the server’s root is the project folder, not the desktop. Opening the HTML file directly from the file system (double-click) bypasses this restriction.

Why relative paths are recommended

• Portability – Share the project folder; everyone can use the same paths regardless of their machine’s root structure.
• Flexibility – If the whole project is moved from Desktop/ to Documents/, relative paths still work (absolute paths would break).
• Simplicity – Short, no need to type the full C:\... for every file.
• Web hosting – Relative paths adapt to the server’s root; absolute paths tied to a local drive will not.

Exam tip: The only time you may need an absolute path is when linking external resources from a different domain (URLs like https://example.com/image.jpg). For local project files, always use relative paths.

Key takeaways

• Absolute path – starts from filesystem root, universal but brittle.
• Relative path – starts from current file, uses . for current directory and .. for parent.
• Relative paths are portable, flexible, and server-friendly.
• In live server environments, .. may not be allowed to go above the project root.
• Stick to relative paths for all local file references in your HTML.

Multi-Page Websites & Navigation

A multi-page website consists of several HTML files, each serving a distinct purpose (e.g., homepage, events, registration). This replaces the single-page approach used in small projects. Real-world sites like Amazon or Wikipedia use multiple pages to organize content effectively.

Why multi-page?

• Improves content organization (each page has a clear role).
• Enhances user experience (users navigate to relevant pages).
• Essential for professional, scalable websites.

Folder Structure & Relative Paths

All pages are stored in a single folder (or nested sub-folders). Resources (images, videos) are placed in sub-folders (e.g., images/). Relative file paths link pages and resources.

Exam tip: Relative paths keep links functional even when the site is hosted elsewhere. Avoid absolute paths like C:\... for deployment.

Creating Pages (Home, Events, Register)

1. Create a project folder (e.g., final-website-multipage/).
2. Create three HTML files: home.html, events.html, register.html.
3. Use the same base HTML (from previous lectures on semantics) for all pages, then remove sections not needed for that page.

Worked example:

• Start with the semantic HTML template from the previous video (header, main with sections, footer).
• For home.html: keep header, directions/introduction; remove event schedule and registration form.
• For events.html: keep header and event schedule section; remove directions and registration.
• For register.html: keep header and registration form; remove everything else.
• Rename <title> per page: “IIMB Fest – Home”, “IIMB Event Details”, “IIMB – Register”.

Result: three clean, focused web pages that share a consistent header design.

Linking Pages with Anchor Tags

The <a> element (anchor tag) creates clickable links. The href attribute specifies the target page using a relative path.

<a href="./events.html">Click here to see events</a>
<a href="./register.html">Click here to register</a>

• The dot-slash ./ explicitly states “same folder as the current page”.

Place these links inside a <nav> element (semantic tag for navigation blocks) within the <header> for consistency.

Navigation flow (conceptual):

Each page should include a “back to homepage” link so users can return easily.

Navigation Consistency

• Reuse the same header (and footer) across all pages to maintain visual cohesion.
• Place navigation in the same location (inside <header>) on every page.
• Use <nav> for semantic clarity – it has no visual effect but improves accessibility and code structure.

Exam tip: Navigation must be present on every page, and links should always be functional (check relative paths). A common exam question: “Why did the image not load on the homepage?” → Answer: the relative path to the image folder was wrong (e.g., missing images/ sub-folder).

Key Takeaways

• Multi-page websites group content into separate HTML files for better organization.
• Relative paths (./filename.html) link pages; resources like images need correct sub-folder references.
• Anchor tags <a href="..."> enable navigation; wrap them in <nav> for semantics.
• Remove irrelevant sections from each page to avoid duplication while keeping headers/footers the same.
• Always provide a “back to homepage” link on every sub-page.

Hosting Website

Web hosting is the process of making a website accessible to anyone anywhere on the internet. Until hosted, the site exists only on the local computer. Hosting uploads the site's files to a web server – a special computer connected to the internet 24/7. Once hosted, anyone in the world can view it.

Why host?

• Public availability – share with friends, family, or potential employers.
• Accessibility – site is live and can be viewed anytime.
• Impressive – showcases your skills by having a live project.

---

Pre‑hosting Checklist

Exam tip: Forgetting to rename home.html to index.html is the most common reason GitHub Pages fails to show a site. Always do this before uploading.

After renaming, update any internal links that pointed to the old filename. In the example:

• home.html becomes index.html → update links in events.html and register.html to redirect back to index.html.

---

Hosting with GitHub Pages (step‑by‑step)

GitHub Pages is a free hosting service. The process is:

Detailed steps:

1. Log in to GitHub (or create an account).
2. Create a new repository – give it a name (e.g., IIMB-Fest-website-demo).
   • Add an optional description.
   • Choose Public – free hosting requires public repositories.
   • Optionally add a README file (not required).
3. Upload files:
   • Click Add file → Upload files.
   • Important: Do not upload the parent folder. Navigate inside your project folder and upload only the individual files (including index.html and the images subfolder).
   • This ensures index.html is at the root of the repository.
4. Commit changes – enter a message (e.g., “upload first time”) and commit directly to the main branch.
5. Enable GitHub Pages:
   • Go to Settings → Pages.
   • Under Branch, select main and leave the folder as / (root).
   • Click Save.
6. Wait 2–3 minutes – GitHub deploys the site. A green banner will appear with the live URL: https://<username>.github.io/<repository-name>/.

Exam tip: The URL pattern is always username.github.io/repo-name. If you see a 404, double‑check that index.html exists at the root of the repository and that the repository is set to Public.

The final live site will function exactly as it did locally: all internal links and images work because the file structure was preserved.

---

Key takeaways

• Web hosting makes a site publicly accessible via a web server.
• Rename the main page to index.html and update all cross‑references.
• Use GitHub Pages for free hosting – repository must be Public.
• Upload the files themselves (not the enclosing folder) so index.html sits at the repo root.
• After setting main branch in Settings → Pages, wait ~2–3 minutes for deployment.
• The live URL follows the pattern username.github.io/repo-name.

Resume Website Project

This assignment is your first real-world HTML build: a personal resume website. Its purpose is to apply everything you’ve learned about HTML to create a live, shareable page that tells your professional story. The focus is on planning, meaningful structure, and deployment.

Plan Before You Code

A good website starts with a clear objective. Ask yourself:

• What story do you want to tell? (skills, career goals, personality)
• What sections matter most? (experience, projects, hobbies)
• How will you make it visually appealing and impactful? (layout, content)

Sketch a design plan: decide the layout, section ordering, and content preparation. Good planning is the foundation.

Required Sections – Minimum Content

Your resume website must include:

Use Semantic HTML

Make your code meaningful. Use the following tags to structure your page:

• <header> – for the page header (name + tagline)
• <section> – to organize each major part (experience, education, etc.)
• <footer> – for closing notes
• <article> – for individual job entries or projects (self-contained content)

Exam tip: Semantic tags improve accessibility, SEO, and maintainability. They are a high-yield concept in any HTML assessment.

Go Beyond – Experiment and Extend

• Explore the MDN Web Docs for new tags you haven’t seen in class. (e.g., <figure>, <time>, <address>)
• Multi-page website: Create a separate page for projects or contact details. Use a <nav> bar to link pages.
• Tables for structured data: e.g., a skills table or a certifications table. Tables add clarity to tabular information (languages, tools, certificates).

Deploy on GitHub Pages

Your resume must be live on the web.

1. Host the site using GitHub Pages (as demonstrated in earlier videos).
2. Once live, share the link with your instructor/class.

There is no single right way to do this – your website should reflect you: your interests, achievements, and story.

---

Key takeaways

• Plan your story, layout, and content before coding.
• Required sections: header + tagline, photo, summary/objective, work experience, education, projects, (optional) hobbies.
• Use semantic elements (<header>, <section>, <article>, <footer>).
• Enhance with multi-page, tables, and new tags from MDN.
• Deploy via GitHub Pages and share the link.