Media: audio, video, and the source tag

<audio> and <video> embed playable media straight into the page — no plug-in, no third-party player.

• controls draws the browser's native play/pause UI
• Nest several <source> elements (.mp4 + .webm); the browser plays the first it understands
• Browsers block autoplay with sound — use autoplay muted loop for silent looping clips
• On <video>, poster sets the still image shown before playback

iframes: a page inside a page

An <iframe> embeds an entire other document inside a rectangle on yours.

• src is the URL; width/height size the frame
• title is required for accessibility — it names the frame for screen readers
• loading="lazy" defers loading until the frame scrolls into view
• Only embed sources you trust — an iframe runs someone else's code

Forms: the browser's built-in data collection

A <form> gathers input and sends it somewhere, and the field's type is the most important choice.

• action is the URL that receives the data; method is GET (in the URL) or POST (in the body)
• type="email" validates and shows the @ keyboard; type="number" restricts to digits; type="date" gives a calendar
• Pair every input with a <label> linked by for/id
• <textarea> for multi-line text, <select> + <option> for a dropdown
• <fieldset> + <legend> group related fields; radios sharing a name become one exclusive group

Semantic HTML: tags that mean something

Semantic tags name their role, which search engines, screen readers, and other developers all read.

• The landmarks: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
• Only one <main> per page
• <article> for anything that still makes sense syndicated on its own
• <section> for a thematic group that has a heading
• <figure>/<figcaption> for captioned media; <details>/<summary> for a native collapsible panel