Episode 1 — Fundamentals / 1.5 — Semantic HTML and Browser Rendering

1.5.i — Links, Navigation, and Forms

In one sentence: Links should behave like links, navigation should be discoverable and keyboard-friendly, and forms connect user intent to server-side truth — HTML5 validation is a convenience, not a security boundary.

Navigation: ← 1.5.h — Responsive images · ← 1.5 Overview

1. Links: internal vs external

Type	Example	Notes
Internal	`<a href="/pricing">`	Prefer root-relative paths on same site
External	`<a href="https://other.example">`	Absolute URL
Scheme links	`<a href="mailto:support@example.com">` · `<a href="tel:+15551234567">`	Opens mail / dialer where supported — still needs visible text, not icon-only

target="_blank": opens a new browsing context — add rel="noopener noreferrer" (modern browsers mitigate window.opener abuse for noopener; noreferrer also strips referrer — know org policy).

download on same-origin links suggests a download instead of navigation — useful for exported files; cross-origin behavior is restricted by browsers.

2. Important `rel` values

`rel`	Meaning (high level)
`nofollow`	Hint: do not pass ranking credit (search engines interpret as hint, not command)
`sponsored`	Paid/partner links
`ugc`	User-generated content links
`noopener`	New tab cannot access `window.opener`
`noreferrer`	No `Referer` header + implies noopener behavior in modern specs discussion — still pair explicitly when in doubt

Use sponsored / ugc honestly — it is trust and policy, not trivia.

3. Forms — structure matters

Healthy form anatomy:

<form action="/subscribe" method="post" novalidate>
  <fieldset>
    <legend>Newsletter</legend>
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="email" required />
  </fieldset>
  <button type="submit">Subscribe</button>
</form>

label + for/id — bigger click target; accessible name
fieldset/legend — groups related controls (especially radio groups)
name — what the server receives
button type="submit" — explicit default in many designs

method="get" vs method="post": GET appends fields to the URL (bookmarkable, cacheable) — fine for search boxes; POST sends body data — typical for credentials, writes, and large payloads. Sensitive actions still need CSRF tokens and server-side checks (framework-provided patterns).

autocomplete: helps password managers and reduces typos (email, current-password, cc-name, …). Pair with name values platforms recognize.

4. Common input types (HTML5)

`type`	Built-in behavior
`email`	Email-shaped validation hint
`url`	URL pattern hint
`number`	Steppers; beware — empty vs `0` semantics
`tel`	Hints mobile keyboards
`date` / `time`	Pickers where supported
`search`	Search field semantics
`checkbox` / `radio`	Selection; radios need shared `name`

Always pair with labels — placeholders are not substitutes.

5. HTML5 validation attributes (client side)

Attribute	Role
`required`	Must have a value
`minlength` / `maxlength`	String length bounds
`min` / `max` / `step`	Numeric/date constraints
`pattern`	Regex constraint

novalidate on <form>: disables browser constraint validation — useful when you fully control UX with JS, but server validation remains mandatory.

6. Client vs server validation

Layer	What it does	Trust?
HTML5 / JS (client)	Fast feedback, fewer round trips	Untrusted — users can bypass
Server	Authoritative rules, authz, DB invariants	Source of truth

Never rely on client validation for security (price tampering, role changes, SQL safety). Treat the browser as a friendly assistant, not a gatekeeper.

7. Key takeaways

Native <a> + <button> for navigation/actions (1.5.e).
rel communicates intent to platforms (sponsored, ugc) and security (noopener).
Labels + names + server validation are non-negotiable for forms.
HTML validation improves UX — server validates truth.

Explain-It Challenge

Explain without notes:

Why target="_blank" should pair with rel="noopener".
The difference between name on an input and id.
One sentence: why server-side validation is still required when HTML5 required exists.