Forms, Tables and Media in HTML

A form collects related answers and sends them to a URL. The <form> element surrounds its controls and submit button. Keep separate forms separate: HTML does not allow a form inside another form.

Choose the destination and method

action names the receiving URL. Without it, the request goes to the current page. method chooses how the browser sends the data; the default is GET.

GET data can appear in history, bookmarks, and server logs. POST keeps it out of the query string, but does not encrypt it. Use HTTPS to protect data in transit. The server program receives and processes the request; the HTML form does not save or email answers itself.

Follow a search request

<form action="/search" method="get">
  <label for="query">Search</label>
  <input id="query" type="search" name="q">
  <label for="language">Language</label>
  <select id="language" name="lang">
    <option value="en">English</option>
  </select>
  <button type="submit">Search</button>
</form>

If the user enters "html tables", the browser requests /search?q=html+tables&lang=en. It takes the field name q and its current value, encodes the space as +, and joins the two pairs with &. The ? starts the query string.

A control needs a name to contribute data. Its id serves a different purpose: identifying the element on the page, including connecting a label. An input with id="query" but no name can look and work normally while contributing no answer to the request.

Know which controls contribute

An empty named text field contributes an empty value, such as comment=. A checked checkbox contributes its value; without a value it contributes on. An unchecked checkbox contributes nothing. A disabled control is unavailable and omitted. A supported readonly field cannot be edited but still contributes its value.

A hidden input, such as <input type="hidden" name="source" value="newsletter">, contributes a value without a visible control. It is not secret: visitors can inspect and change it in developer tools.

Make button behavior explicit

Inside a form, an ordinary <button> defaults to submitting. Write type="submit" for the send button and type="button" for a button that needs a script. type="reset" restores starting values and can erase a user's work. Pressing Enter in a single-line field also often submits the form. <input type="submit" value="Send"> is another submit control; a <button> can also contain inline content such as an icon.

Send a file's contents

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="attachment">Attachment</label>
  <input id="attachment" type="file" name="attachment">
  <button type="submit">Upload</button>
</form>

Both POST and enctype="multipart/form-data" are needed for an ordinary file upload. With the default form encoding, file names travel as text but the file contents do not.

An <input> is a void element, so it has neither content nor a closing tag. Its type selects the control and the browser help that comes with it. Missing or unrecognized types fall back to a text field.

Match text to its purpose

An email field checks syntax, not whether a mailbox exists. Even "ana@example" passes the basic syntax check. Add multiple to accept a comma-separated list of addresses. A URL field expects a scheme: "https://example.com" passes, while "example.com" does not. Phone formats vary, so tel imposes no format rule. Password masking stops nearby people reading the screen; HTTPS still supplies encryption during transmission.

Separate quantities from digit codes

Use number for a quantity, such as a count or a mass. It often has spin buttons for increasing or decreasing the value. Use range for an approximate setting such as volume; its default range is 0–100 and its default value is 50.

A membership code is not a quantity. Use <input type="text" inputmode="numeric"> for a digit code so that leading zeros remain text and spin buttons do not change it. inputmode only suggests an on-screen keyboard: it does not validate the entry. decimal, tel, email, and url are other useful keyboard hints.

Keep display and submitted formats separate

Date pickers follow the user's locale. March 15, 2026 may appear as "03/15/2026" or "15/03/2026", but its submitted date is 2026-03-15.

These controls do not store a time zone. A local appointment time therefore needs its location or zone explained separately when that matters.

Offer independent or single choices

Checkboxes are independent: several can be checked. Radio buttons form a single-choice group when their name values match. Give each radio button a distinct value and use checked for a default.

<label><input type="radio" name="size" value="S"> Small</label>
<label><input type="radio" name="size" value="M" checked> Medium</label>
<label><input type="radio" name="size" value="L"> Large</label>

The default selection sends size=M. Different names would create separate groups and allow multiple selections.

Choose colors and files

color provides a picker and can send an RGB color such as #ff8800. file opens a file chooser; accept=".pdf,image/*" suggests PDFs and images, and multiple permits several files. The filter helps users choose; the server must still check the received file’s type and contents. For controls that use it, value sets the starting value, which remains the submitted value if the user makes no change.

A single-line input does not suit every answer. Longer text needs space, while a fixed set of choices needs controls that show what is allowed. Decide whether the user may enter something outside the choices before picking the element.

Give longer text a text area

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

rows gives the visible number of lines and cols the approximate width in characters. Neither limits how much text can be entered; use maxlength for a length limit. Initial text belongs between the tags, not in a value attribute. Spaces and line breaks there become part of the starting value, so adjacent opening and closing tags make a truly empty box.

Send a value from a drop-down list

<label for="delivery">Delivery</label>
<select id="delivery" name="delivery" required>
  <option value="">Choose delivery</option>
  <option value="standard">Standard (3–5 days)</option>
  <option value="express">Express (next day)</option>
</select>

Choosing "Express (next day)" sends delivery=express. The visible wording can explain a choice while its value stays short and stable. If an option has no value, its text is submitted. Add selected to preselect an option. Here, the first option has an empty value, so the required single-choice list cannot be submitted until the user picks a delivery method.

Group or allow several options

An <optgroup label="Hot drinks"> gives related options a heading. That heading is not itself a choice. A select with multiple permits several selected options, and size sets its visible rows. Each selected value becomes a separate pair with the same name: topics=html&topics=css.

Desktop multi-select often requires Ctrl-click or Cmd-click. For a short list of independent choices, checkboxes usually make the selection clearer. For a short single-choice list, radio buttons keep every option visible. A long fixed list is a useful place for a select.

Suggest without restricting

<label for="city">City</label>
<input id="city" name="city" list="cities">
<datalist id="cities">
  <option value="Nairobi">
  <option value="Osaka">
</datalist>

The input's list matches the datalist's id. Users see suggestions but may still type another city. A datalist is therefore useful for common answers to an open question. Replacing a select with a datalist changes the accepted choices; it does not merely change how the same fixed list looks.

Display progress or a measurement

<progress> and <meter> display values instead of collecting answers. A progress bar tracks completion, such as <progress value="70" max="100">70%</progress>. A meter shows a measurement in a known range: <meter value="0.6">60%</meter> can represent storage used. A meter defaults to a range of 0–1 unless min and max change it. Text inside these elements supplies fallback wording when the bar cannot be drawn. Keep an explanatory label beside either display so users know what its number measures.

A field needs a name that stays visible while the user fills it in. A connected <label> also gives the control an accessible name for screen readers and makes its text a larger clickable target. Instructions explain any rule the label alone cannot convey.

Connect the label to the control

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

The label's for matches the input's id, including case. The name controls submission and need not be the same. Every id must be unique on the page. If for="email" points to a name but no matching id, the label looks normal yet is not connected.

Another option is to wrap the input in the label:

<label>
  <input type="checkbox" name="news">
  Send me the monthly newsletter
</label>

This implicit connection is useful for a short checkbox label. An explicit for and id pair also works when the label and control are separated in the HTML.

Keep labels separate from examples

A placeholder such as "name@example.com" disappears when typing starts. It may also be hard to read and is not a dependable accessible name. Keep the visible label; use a placeholder only as a short example when it helps.

Mark required fields in words, such as "Name (required)", or explain an asterisk once above the form. Color alone cannot tell everyone what is required. Explain a format before users try to submit it.

<label for="pw">Password (required)</label>
<input id="pw" name="password" type="password"
       required minlength="8" aria-describedby="pw-hint">
<p id="pw-hint">Use at least 8 characters.</p>

aria-describedby points to the hint's id. It adds the instruction as a description after the field's name; it does not replace the label.

Name a group of controls

<fieldset>
  <legend>Delivery speed</legend>
  <label><input type="radio" name="speed" value="standard"> Standard</label>
  <label><input type="radio" name="speed" value="express"> Express</label>
  <label><input type="radio" name="speed" value="pickup"> Pickup</label>
</fieldset>

The legend gives the shared question; each label names an answer. A fieldset can also group related address fields. Put the legend first. disabled on a fieldset disables its descendant controls, except controls inside its first legend. Keep ordinary form controls outside the legend so this exception does not cause surprises.

Help browsers fill known details

autocomplete describes the purpose of information about the user. Values include name, email, tel, street-address, postal-code, country-name, bday, new-password, current-password, and one-time-code. Accurate purposes support saved-data entry and WCAG 2.2 criterion 1.3.5, Identify Input Purpose (AA). autocomplete="off" is a request; browsers may still offer saved passwords.

For an optional phone field, use the label "Phone number (optional)" with type="tel", name="phone", and autocomplete="tel". Click its label to check focus, then move through the form using Tab. Test every label this way, including labels beside checkboxes and radio buttons.

Built-in validation checks a form's controls when the user submits. A failing control blocks submission; the browser focuses the first invalid field and supplies a message in its own language. The exact wording is chosen by the browser. Changing that wording takes JavaScript.

Require an answer

required means a control needs a value. For a text field, an empty string fails. On a checkbox, required means that particular box must be checked, as for accepting terms. For radio buttons with the same name, putting required on one member means that one button in the group must be selected. A required single-choice select with an empty first option needs a nonempty selection.

<label for="username">Username (required)</label>
<input id="username" name="username"
       required minlength="4" maxlength="12">

The browser combines these rules. The field must contain an answer, and user-entered text must fit the length limits. Leaving off type gives the normal text input.

Count the entered characters

minlength sets the smallest allowed length and maxlength the largest. Spaces and punctuation count. Length is measured in UTF-16 code units, so some emoji count as two; ordinary Latin letters each count as one.

In this example, "Li" is two characters and fails the minimum. "Lina" has four and passes. "mountainhiker" has 13 characters. During ordinary typing, the browser stops after the twelfth, leaving "mountainhike". The width of a text box does not set this limit.

Treat presence and length as different rules

An optional field with minlength="4" can be empty. The minimum length is checked once the user provides a value. Adding required makes an empty entry fail as well. This matters for an optional nickname: a user may omit it, but a supplied nickname still needs enough characters.

required is a boolean attribute. Its presence turns it on, including required="false". To make the field optional, remove the attribute. The same presence rule applies to many other HTML switches.

Know what these checks do not decide

A string of spaces is still content in a text field. required therefore accepts it, and the spaces also count toward the length. A rule needing a visible character requires a suitable pattern or a server check. Do not tell users that required alone guarantees a meaningful answer.

Length constraints also depend on how the value was entered. A starting value written in HTML, or one assigned by a script, is not flagged by minlength or maxlength merely for being too short or too long. A correct default value still matters even when ordinary typing is constrained.

To check this field, try an empty submission, then enter two letters, four letters, and more than 12 letters. Each trial isolates a different rule. When the browser stops typing at the limit, read the value actually left in the field instead of assuming the whole attempted entry was accepted.

A numeric or date value can have the right format and still be unsuitable. min and max set its boundaries; step sets which increments are allowed inside them. A number must pass both checks.

Set the range

<label for="weight">Parcel weight (kg)</label>
<input id="weight" name="weight" type="number"
       min="0.5" max="30" step="0.5">

The endpoints are included. Values from 0.5 to 30 kg are in range, but they must also land on half-kilogram steps. Starting at 0.5 gives 0.5, 1, 1.5, and so on through 30: 60 allowed values. An entry of 31 exceeds the maximum; 2.25 is in range but fails the step.

Find the starting point before counting

Steps count from min when present. Otherwise they count from a valid HTML value attribute, then from the type's default base. For number, that default base is 0. The default step is 1.

With min="1" step="2", accepted values are 1, 3, 5, 7, and so on. Four fails even though it is a multiple of two, because the sequence starts at one. With min="0.5" and no step attribute, the step is still one: 0.5, 1.5, and 2.5 pass, while 1 and 2 do not.

If neither min nor a value attribute supplies a different base, a default number field accepts whole numbers. Use step="0.01" for increments of one hundredth or step="any" to remove the step check. any does not remove the minimum or maximum.

Use the right units for dates and times

A date input with min="2026-06-01" max="2026-08-31" accepts dates in that inclusive interval. Write the attributes in the submitted format, even if the picker displays another date order.

For appointments, type="time" min="09:00" max="17:00" step="900" uses 900 seconds, or 15 minutes, per step. The sequence begins at 09:00 and ends at 17:00. There are 32 intervals and 33 selectable times, including both endpoints.

Separate typing from the stored value

Some localized browsers allow the decimal entry "2,5" but submit 2.5. Text that is not a number is blocked or leaves the number value empty, depending on the browser. An optional empty input is still allowed unless required is present.

A range slider stays within its allowed range and snaps to steps, so users do not encounter the same range and step errors as with a typed number. Separately, nonempty email and url fields undergo type checks even without required: making an answer optional does not make a malformed supplied answer valid.

A pattern is useful when an organization defines an exact text format, such as a product code. The browser checks the whole nonempty value against the pattern. Explain the format beside the field so users can meet it before an error appears.

Build a small pattern

<label for="code">Product code (required)</label>
<input id="code" name="code" required
       pattern="[A-Z]{3}-[0-9]{4}" aria-describedby="code-hint">
<p id="code-hint">Use 3 capital letters, a hyphen, and 4 digits (ABC-1234).</p>

[A-Z] matches one capital Latin letter and {3} repeats it exactly three times. The hyphen outside the character groups is literal. [0-9]{4} requires four digits. "ABC-1234" passes. "abc-1234", "ABC1234", and "ABC-12345" each break a different part of the rule.

Patterns are whole-value matches, so extra text at either end fails. Do not add the surrounding slashes used in JavaScript regular expressions. pattern applies to text-like inputs such as text, search, tel, email, url, and password, not to a text area. Empty values skip the pattern check; required handles an empty answer.

Write literal punctuation carefully

Characters such as ., +, and ? have special meanings. Escape them when they must appear literally: \. matches a period. Inside a character group, modern HTML patterns also require escaping punctuation such as a literal hyphen: [a-z0-9\-]. This hyphen is different from the one defining the range a-z.

An invalid pattern is ignored. Other rules, including required and type checks, still run. Test a pattern with both passing and failing entries; a form that submits one expected value has not yet shown that the pattern rejects anything.

Explain the rule and the error

Keep visible hint text next to the control. A title may contribute to some browser messages; keep the format instruction visible beside the field. Avoid rigid patterns for names, phones, or postal codes unless the accepted format truly is fixed; valid international answers can differ greatly.

CSS offers :valid and :invalid for a field's current validation state. :user-invalid delays the invalid state until user interaction, avoiding an untouched form covered in error styling. Pair colors with words or an icon so the distinction remains visible without color perception.

Decide when checks run

novalidate on the form skips browser validation during submission. formnovalidate on one submit button skips it for that button, which can support "Save draft" beside a normal "Send" button. Browser checks can also be removed through developer tools or bypassed by a direct request. The server must check incoming data again before trusting it.

Use a table when a value depends on both its row and its column: a training log, a timetable, or a comparison of measurements. Use CSS for page layout. A layout made from table cells creates misleading row-and-column relationships for screen readers and adapts poorly to narrow screens.

Build the structure from the data

<table> holds the table, <tr> a row, <th> a header cell, and <td> a data cell. Cells are written left to right inside each row. A bold data cell is still a data cell; use <th> to express a heading.

<table>
  <caption>Running log, week 12</caption>
  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Distance (km)</th>
      <th scope="col">Time (min)</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Monday</th><td>5.0</td><td>28</td></tr>
    <tr><th scope="row">Wednesday</th><td>7.5</td><td>45</td></tr>
    <tr><th scope="row">Saturday</th><td>10.0</td><td>62</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>22.5</td><td>135</td></tr>
  </tfoot>
</table>

The caption is the first element inside the table. It tells readers what the whole table describes before they encounter its values. A nearby heading may help visually, but the caption attaches the title to the table itself.

Connect each value to its headings

scope="col" says that a header applies down a column. scope="row" says that it applies across a row. The value 7.5 therefore belongs to the row "Wednesday" and the column "Distance (km)". A screen reader can announce that full meaning instead of an isolated number.

Put units in the column headings so they apply consistently. Every distance here is in kilometers; every time is in minutes. The total distance comes from 5.0, 7.5, and 10.0, giving 22.5 km. The times 28, 45, and 62 give 135 min.

Give each group a role

<thead> groups header rows, <tbody> the main data, and <tfoot> the summary after the body. These groups describe the structure and provide CSS hooks. Browsers insert a <tbody> around ordinary rows written directly inside a table, so the displayed structure can differ from the ungrouped source.

Check meaning as well as appearance

Each row here covers three columns. Leaving out a data cell does not tell the browser which internal value is missing: later cells can sit under the wrong heading. Write the cells in their correct positions and use "0" for a known zero or "n/a" when a value does not apply. An unexplained empty cell leaves readers guessing.

Tables have no default borders. For simple lines, apply border: 1px solid to the cells and border-collapse: collapse to the table. The old border attribute is obsolete. A border helps show the grid, but it cannot supply missing header relationships or correct a misplaced value.

Merged cells let one entry cover several positions in the grid. They change how many new cells a row needs, so plan the occupied positions before writing the tags.

Count a merged timetable

Consider three columns: "Time", "Monday", and "Tuesday". At 09:00, Monday has "Forms" and Tuesday has "Tables". At 10:00, Monday begins "Validation", which continues through the 11:00 row. Tuesday has "Media" at 10:00 and "Embeds" at 11:00. At 12:00, "Lunch break" covers both days.

<tr>
  <th scope="row">10:00</th>
  <td rowspan="2">Validation</td><td>Media</td>
</tr>
<tr>
  <th scope="row">11:00</th><td>Embeds</td>
</tr>
<tr>
  <th scope="row">12:00</th><td colspan="2">Lunch break</td>
</tr>

At 11:00, the Monday position is already occupied from above. The new cells are only the time header and Tuesday's entry. Adding another Monday cell would push the final value into a fourth column. At 12:00, the time header covers one column and the lunch cell covers two, for three in total.

colspan spans columns horizontally; rowspan spans rows vertically. Both default to one. When checking a row, count the positions filled by new cells and by spans from earlier rows.

Describe groups of columns

<colgroup> and <col> describe columns and appear after the caption but before the row groups. <col span="2"> represents two columns. Only a limited set of styles applies through these elements, including backgrounds, width, visibility, and borders under the relevant table border rules. They do not replace headers.

For "Distance (km)" above two columns named "Planned" and "Actual", define those two columns as a group. Give the upper heading colspan="2" scope="colgroup"; give the lower headings scope="col". The span controls width, while scope states the header relationship. A column-group scope needs a matching column group in the table structure.

Link headers explicitly when needed

For relationships that scope cannot express clearly, give headers unique IDs and list them in the data cell's headers attribute:

<table>
  <caption>Monday distance plan</caption>
  <colgroup></colgroup>
  <colgroup span="2"></colgroup>
  <thead>
    <tr>
      <th rowspan="2" scope="col">Day</th>
      <th id="distance" colspan="2" scope="colgroup">Distance (km)</th>
    </tr>
    <tr>
      <th id="planned" scope="col">Planned</th>
      <th id="actual" scope="col">Actual</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="mon" scope="row">Monday</th>
      <td headers="mon distance planned">8</td>
      <td headers="mon distance actual">7.5</td>
    </tr>
  </tbody>
</table>

The planned value of 8 points to Monday, Distance (km), and Planned. The actual value of 7.5 shares the row and group headers but points to Actual. The space-separated names must match the header IDs, not their visible wording.

A header's abbr can provide shorter repeated wording, such as <th abbr="Distance">Distance covered in kilometers</th>. Some screen readers use that shorter form. When many spans or three heading levels make a table hard to follow, split the data into simpler tables with individual captions. Avoid nesting a table inside another table's cell.

<video> and <audio> link media files to a page. The browser downloads those separate files; the video or sound is not stored inside the HTML. Adding controls exposes the browser's play, pause, timeline, and volume controls.

<video src="intro.mp4" controls width="640" height="360"
       poster="intro-poster.jpg" preload="metadata"></video>
<audio src="episode-12.mp3" controls></audio>

Without controls, an audio element has no visible player and a video has no visible play button. A page would need scripted controls to give users that access. For a basic page, keep the native controls.

Reserve the right shape

width and height take plain numbers in CSS pixels. They reserve space while a video loads, reducing page movement. A 1920 × 1080 video shown at a width of 640 has a matching height of 360: the width has been divided by three, so the height must also be divided by three. A differently shaped player box keeps the picture's proportions and adds empty bands.

poster supplies a still image before playback. Without one, the browser waits for media data before it can show the first frame. The poster is useful when little or no video is preloaded.

Decide how much to preload

These are hints: the browser may override them. Autoplay also takes priority over preload. none is useful for long media that many visitors will not watch; metadata helps show duration without intentionally fetching the full clip.

Understand playback switches

controls, autoplay, muted, loop, and playsinline are boolean attributes. Their presence enables them: muted="false" still starts muted. Remove the attribute to turn it off.

Autoplay with sound is commonly blocked until user interaction, subject to browser permissions and settings. Muted video is more often allowed; Safari on iPhone also needs playsinline for this use. A silent looping clip can use autoplay muted loop playsinline. loop restarts the clip after its end. Do not depend on autoplay to communicate essential information.

Automatic sound can compete with a screen reader, and movement can distract. WCAG 2.2 criterion 1.4.2 (A) requires a way to pause or stop automatic audio longer than three seconds, or control its volume independently. Criterion 2.2.2 (A) addresses automatically moving content that lasts over five seconds alongside other content, unless essential. Keep an available pause mechanism; native controls provide one for these media players.

Estimate the data cost

A two-minute clip at 5 megabits per second contains 600 megabits. Dividing by eight gives about 75 megabytes before extra overhead. Shorter clips and a suitable preload hint reduce unnecessary transfers. A hosted platform's iframe player can shift delivery away from your site's server, but visitors still download media when they watch it.

A media extension identifies its container, the file structure holding picture and sound. Codecs compress and decode the streams inside it. A browser must support both the container and its codecs; an .mp4 extension alone does not establish what is inside.

Choose suitable formats

MP4 with H.264 video and AAC audio is a broad-compatibility choice on common current systems. WebM with VP9 or AV1 video and Opus audio is also widely supported and can reduce size at a given quality. For audio, MP3 is a widely supported single choice. Support still depends on the actual codec and the user's system, so test the files themselves.

Offer sources in priority order

<video controls width="640" height="360" poster="tour.jpg">
  <source src="tour.webm" type="video/webm">
  <source src="tour.mp4" type="video/mp4">
  <p>Your browser cannot play this video.
    <a href="tour.mp4">Download the tour video (MP4)</a>.
  </p>
</video>
<p><a href="tour.mp4">Download the tour video (MP4)</a></p>

The browser tries child sources in order and uses the first playable one. WebM is preferred here; MP4 offers another path if WebM cannot be played. Leave src off the <video> itself when using child sources. A src on the media element takes precedence and the child source list is ignored.

The type is a MIME type describing the file. It lets the browser skip an unsupported format without first fetching media data. A wrong type can cause a playable file to be skipped, so the declaration must match the actual file. Listing the same incompatible encoding under a different name does not create a compatible alternative.

Put the backup where it remains available

Content inside <video> is fallback for a browser that does not recognize the video element. A modern browser that recognizes it but cannot play any source does not reveal that inner paragraph as a general error message. The separate download link outside the player stays available in that case. A backup link and alternative sources solve different failures.

Apply the same pattern to audio

<audio controls>
  <source src="episode-12.opus" type="audio/ogg; codecs=opus">
  <source src="episode-12.mp3" type="audio/mpeg">
  <p>Your browser cannot play this audio.</p>
</audio>
<p><a href="episode-12.mp3">Download episode 12 (MP3)</a></p>

This first file uses an Ogg container with Opus audio. The MP3 alternative uses audio/mpeg, the correct MIME type for MP3. The browser cannot infer from the fallback paragraph that it should switch files; source elements supply that choice. When checking the page, verify the paths, the actual file formats, and playback, then confirm the external download link works separately.

Media information needs another route when a person cannot hear or see it. Captions include speech, speakers, and meaningful sounds. Subtitles transcribe or translate dialogue for people who hear the audio but need help understanding it. A transcript gives speech and important sounds as text near the player or through a clearly named nearby link. Audio description narrates important visual information.

Attach a caption track

<video controls>
  <source src="intro.mp4" type="video/mp4">
  <track kind="captions" src="intro.en.vtt"
         srclang="en" label="English" default>
</video>
<p><a href="intro-transcript.html">Read the introduction transcript</a></p>

Place <track> after the sources. src points to a text-track file, kind identifies its purpose, srclang identifies the language, and label supplies the player's menu text. A subtitle track must have srclang; include it for captions too. Only one track should carry default. With no kind, the default is subtitles.

Write the caption file

WebVTT is UTF-8 text saved with a .vtt extension. The first line is WEBVTT, followed by a blank line. Each cue then has a timing line and its text, with a blank line before the next cue. An optional identifier can precede a cue's timing.

WEBVTT

00:00:01.000 --> 00:00:04.500
MAYA: Welcome to the workshop.

00:00:05.000 --> 00:00:07.250
[door closes]

00:00:07.500 --> 00:00:11.000
MAYA: Let's build our first form.

The first cue lasts 3.5 seconds, the second 2.25 seconds, and the third 3.5 seconds. The sound cue communicates something a listener hears even though nobody speaks.

Keep timing syntax exact

Minutes and seconds use two digits; milliseconds use three after a period. Hours may be omitted: 01:05.000 means one minute and five seconds. The end must be later than the start. A blank line ends a cue, so keep all its text together without a blank line in the middle.

SRT uses comma timestamps such as 00:00:01,000; a track needs WebVTT instead. Conversion requires the WebVTT header and period timestamps, with the rest of the cues checked for valid syntax. Renaming an .srt extension does not convert its contents.

Check delivery and accessibility

Keep the track on the same origin as the page: the same scheme, host, and port. A track from another origin needs a suitable crossorigin setting on the video and permission from that server. A correct file can otherwise fail to load.

WCAG 2.2 criterion 1.2.2 (A) requires captions for prerecorded video with audio, subject to its media-alternative exception. Criterion 1.2.1 (A) requires an alternative for prerecorded audio-only content, such as a transcript for a podcast. Check automatic captions for names, technical terms, speaker changes, and sounds before publishing.

Other track kinds include descriptions, chapters, and metadata. Browser players do not generally show these as ordinary captions. Do not put essential visible instructions in a metadata track and expect them to appear on screen.

An <iframe> is an inline frame: it displays a separate web page inside the current page. That document has its own HTML, CSS, and scripts. Your page's styles can size the frame but do not style the contents of another document inside it.

Start with a clear, sized frame

<iframe src="https://maps.example.com/venue"
        title="Map of the venue"
        width="600" height="400" loading="lazy"></iframe>
<p><a href="https://maps.example.com/venue">Open the venue map</a></p>

src names the page to load. The title tells a screen-reader user what is in the frame before entering it. "Map of the venue" describes its purpose; "iframe" or "content" does not. The direct link offers another route if the visitor's browser blocks the frame.

width and height take plain numbers in CSS pixels. Without them, the default frame is 300 × 150 CSS pixels. Browsers also draw a default border. Style that with CSS instead of the obsolete frameborder attribute.

Adapt supplied embed code

Map and video services usually offer an embed snippet under their share controls. After pasting it, inspect the URL, improve the title, check the dimensions, and remove obsolete presentation attributes. An iframe URL is a page or service player address, not necessarily a direct media file.

Use HTTPS for the embedded address. An HTTP frame inside an HTTPS page is active mixed content and is blocked. Merely writing a title or changing the frame's size cannot make an insecure URL load.

Load at a useful time

loading="lazy" delays a frame until it is near the viewport, saving initial work for a map far down the page. The default eager starts loading immediately. Use eager loading for a prominent embed at the top so visitors do not wait for its main content. Lazy loading changes timing; it does not remove the network contact when the frame eventually loads.

To fit a player to its container, CSS can set its width to 100% and preserve its shape:

iframe.video-player {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

Apply class="video-player" to the relevant iframe. The HTML dimensions still provide starting information, while CSS controls the displayed size.

Recognize a provider's refusal

A site can prohibit framing through the HTTP response header X-Frame-Options or a Content Security Policy frame-ancestors rule. The browser may show a blank frame or error. These restrictions help prevent clickjacking, where a deceptive framed page captures clicks intended for something else.

Your page's HTML cannot override the other site's refusal. Use the provider's permitted embed address if it offers one; otherwise supply an ordinary link. Also keep that link for future failures: if a provider removes or moves its content, an unchanged iframe on your page can stop working.

A third-party embed contacts its provider when the embedded content loads, even before a visitor presses play. That request reveals information such as an IP address and may involve cookies. Decide whether the page needs that contact immediately and what access the embedded document needs.

Delay contact when appropriate

Lazy loading delays an offscreen frame until it is near the screen. A preview that loads an embed only after a click gives visitors a more direct choice. Some services also offer privacy-enhanced modes. A same-site frame does not inherently contact a different provider; inline srcdoc avoids fetching a separate page, though resources referenced by that HTML can still make network requests.

Restrict document behavior with sandbox

<iframe src="https://quiz.example.com/start"
        title="Practice quiz"
        sandbox="allow-scripts allow-forms"></iframe>

An empty sandbox applies its full restrictions, including blocking scripts, form submission, and pop-ups, and assigning an opaque origin. Tokens lift selected restrictions. Here the quiz may run scripts and submit forms, but allow-popups was not granted. Add only tokens the content needs; otherwise a copied permission list can undo useful limits.

allow-same-origin lets the document keep its normal origin. Do not combine it with allow-scripts for embedded content from your own origin: that combination can let the document remove its sandbox. A sandbox also does not mean a frame makes no network requests.

Grant browser features separately

allow is a permissions policy for features such as fullscreen, picture-in-picture, camera, and microphone. A video player can request allow="fullscreen; picture-in-picture". It does not need camera access merely because it contains video. The older allowfullscreen grants fullscreen access too.

Sandbox tokens govern document behavior; feature permissions answer a different question. Granting fullscreen does not by itself let a sandboxed page submit a form or run a script.

Control the referrer and inline content

referrerpolicy="no-referrer" omits the referring page address from the request. With the usual default policy, a cross-origin HTTPS request sends the origin rather than the full path; downgrade requests send no referrer. This controls one header, not all information a provider receives.

srcdoc supplies the frame's HTML directly and takes precedence over src:

<iframe title="Message preview" sandbox
        srcdoc="<p>Preview of your message</p>"></iframe>

The sandbox keeps this small preview restricted. More general HTML previews need care about the resources and markup they allow.

Select the element for the resource

<object> can contain fallback content, such as a download link, if the resource cannot be displayed. Old plug-in content such as Flash no longer works in ordinary current browsers; Adobe ended Flash Player support at the end of 2020. Keep direct links beside important embeds and check periodically that the provider still serves them.