Chances are good that many viewers have experienced this situation: the controls load, but there is nothing (a blank space) displayed. Although the browser understands the video element, it may be unable to decode your media file. The URL used may be returning a login page instead of your video. Users need somewhere to turn to when their experience results in the above outcome.

What HTML unsupported media fallback covers

In total, there are three areas that you want to provide backup for. An additional file provides the browser with an alternative format to attempt to decode. Using text within the media element provides a means for browsers that do not yet support the media element to display something. Providing visible download and transcript links, along with a JavaScript error message, gives users somewhere to go when playback fails.

The WHATWG documentation on video, which describes the fallback content for the video element, states that the purpose of providing fallback content is to allow older browsers lacking support for the video element to display some form of content. A modern browser failing to successfully play your MP4 will not render the paragraph contained in the fallback content.

Provide your download link and transcript link directly under the video player. By doing this, users who are experiencing a slow internet connection will have the option to select viewing a transcript prior to having to wait through a possible failure.

HTML unsupported media fallback: a video example

Start with standard HTML. In this example, we’re listing WebM first and MP4 second. You will need to create two versions of your video. Simply changing the filename from “.webm” to “.mp4” does not convert your video.

<video id="lesson" controls playsinline preload="metadata"
       width="960" height="540"
       aria-describedby="media-status">
  <source src="/media/lesson.webm" type="video/webm">
  <source src="/media/lesson.mp4" type="video/mp4">
  <track kind="captions" src="/media/lesson-en.vtt"
         srclang="en" label="English" default>
  <p>This browser does not support HTML video.
     Use the links below instead.</p>
</video>
<p id="media-status" role="status"></p>
<p>
  <a href="/media/lesson.mp4" download>Download the video (MP4)</a>
  or <a href="/transcripts/lesson/">read the lesson transcript</a>.
</p>

Remove the example paths and insert your own file locations and document paths on your website. Be sure to create your transcript document. For an MP4 intended for a broad audience, H.264 video with AAC audio is a useful starting point. Test the final output on representative devices used by your audience.

A browser evaluates candidates based on the order listed. With accurate type hints, a browser can avoid trying formats that it does not support prior to attempting to download them. MP4 containers can hold different codecs. The extension on your file does not guarantee that playback will work.

Do not include src on the opening <video> tag if you are using child sources. Any URL located on the video element overrides any src values included in the source elements. Additionally, including ‘preload=”metadata”‘ is a suggestion: the browser determines how much data it wishes to retrieve.

HTML unsupported media fallback with JavaScript

Although HTML provides users with alternative choices to fall back on, JavaScript lets you add a notification when playback fails. While you may see an error icon in most browsers indicating a failure, it does little to explain what went wrong.

With multiple sources comes added complexity. Source failures do not bubble up as standard video errors. Therefore, listen for each source individually and the player itself. Failure of one candidate should not trigger a failure message while there are other candidates remaining.

const player = document.getElementById("lesson");
const status = document.getElementById("media-status");
const sources = [...player.querySelectorAll("source")];
const failed = new Set();

function showFailure() {
  status.textContent =
    "The video could not play. Try the download or transcript below.";
}

sources.forEach((source) => {
  source.addEventListener("error", () => {
    failed.add(source);
    if (failed.size === sources.length) showFailure();
  });
});

player.addEventListener("error", showFailure);
player.addEventListener("loadstart", () => {
  failed.clear();
  status.textContent = "";
});
player.addEventListener("loadedmetadata", () => {
  status.textContent = "";
});

// Run once during setup, after the HTML and listeners exist.
player.load();

Load this script after your sample markup, or use a deferred external script. Calling load() restarts source selection after the event listeners are attached, so they can catch early failures.

Call it once upon initialization. Subsequent calls can disrupt ongoing playback and potentially reload requests. Since this example includes only a static list of two sources, applications using custom players that dynamically change their source lists will need to reset their own state. The message remains separate from the controls and does not move keyboard focus.

Additionally, if your application makes a call to play(), handle the rejected promise separately. Even though autoplay restrictions can block the call to play() regardless of compatibility with the file being requested, give your users an opportunity to click “play” before identifying incompatible formats.

Find the cause of unsupported media

To open developer tools and look at Network activity, navigate to the Network tab and locate your media request. What did your server actually send back? Look at both the body as well as status. A login screen or HTML error page returned with status code 200 is still not a video.

When the media element indicates a failure, inspect player.error. MDN documentation on MediaError.code identifies four general classes. Use them to isolate potential problems rather than assuming that a specific value represents a particular codec or hosting issue.

Check for missing files, expired signed URLs and login redirections. An HTTP media address may be blocked on an HTTPS page as mixed content. Check cross-origin policy separately where your player or captions require it. Adding crossorigin without matching server headers can introduce a failure.

For missing files, refer to our HTML5 video not found troubleshooting guide. When your file arrives but is not decodable, our guide to HTML5 video encoding errors will assist in evaluating the exported file.

Audio, transcripts and accessibility

Follow the same pattern as video: use <audio controls>, provide proper source files, and place downloads and transcripts adjacent to it. Remove any video-specific attributes like playsinline, width, height from your audio implementation.

Transcripts aid in accessibility even when playback works properly. Include speech, significant sound effects and speaker identification wherever necessary. For videos, describe important visual information not conveyed by audio. See W3C WAI guidance on transcripts for details on basic and descriptive transcripts.

Keep synchronised captions available for people watching the video as well. A transcript does not automatically replace synchronised captions or audio description, nor is a poster image an acceptable substitute for content.

Use descriptive language for links. Do not remove native control functionality unless you develop a valid replacement and thoroughly test its accessibility.

The download attribute asks the browser to perform a download for eligible URLs; however browser behavior and server headers influence the outcome. Downloading the same unsupported file does not guarantee it will play in another application.

Test your HTML unsupported media fallback

Test broken scenarios deliberately. Playing on your personal computer alone will never simulate what occurs when a visitor experiences different results.

1. Break one of your URL source entries. Verify that your alternate entry will successfully play.
2. Break both URL source entries. Verify that the failure message appears and both alternative links work.
3. Create a bad copy of your media file intentionally. Verify that failure does not leave visitors without options.
4. Turn off JavaScript. Verify that download and transcript remain shown.
5. Try testing with a keyboard, a small width screen and at least one actual mobile device.
6. Test caption loading separately. If you fail to load your caption document it may not block successful playback of video.

Verify testing occurs on production servers. Files loaded locally cannot expose every redirect, access restriction and response-header issue on your live servers. If you have a restricted Content Security Policy in place, move your JavaScript into an externally linked permitted resource file.

Common questions

Why does my fallback text not appear?

Your browser likely has supported media elements. The fallback content is designed specifically for older browsers without media support. Place alternatives outside of the media elements and handle source loading failures separately.

Will a second source always rescue playback?

No. A secondary source can only assist during initial candidate evaluation, but you cannot count on automatic recovery from decoding failures after playback has begun. Provide download and transcript alternatives.

Can CSS fix unsupported media?

CSS can style messages and resize players to fit a page. It cannot install codecs, fix corrupted files or resolve failed requests.

What is the safest starting point?

When implementing HTML unsupported media fallback, start with compatible encodes and links outside the media player. Add an informative error message and subsequently test the failure cases. A viewer who cannot watch should still know what to do next.

The post HTML Unsupported Media Fallback: Working Video and Audio Examples appeared first on HTML5 Doctor.

Most people struggle with the file path. A stylesheet beside your HTML requires a different file path than a stylesheet inside a folder. Below is a step-by-step walkthrough of a functional example, explaining those file paths, and identifying common issues you might experience if your page continues to look plain.

How to link CSS to HTML in three steps

For many websites (especially small ones), an external style sheet is a good place to begin. An external style sheet allows you to keep your code/markup in one file (the html), and your design rules in another. Therefore, multiple pages can utilize the same style sheet.

1. Create a file named styles.css in your project.
2. Add the line below to the HTML document’s <head>, before </head>.
3. Save both files, open the HTML page, and refresh it.

<link rel="stylesheet" href="styles.css">

The rel="stylesheet" attribute defines the relationship between the HTML and CSS files — specifically that this file contains the design rules. The href attribute specifies the location where the browser should go looking for it. Use href for this address, rather than src.

WHATWG’s definition of the stylesheet link type describes the connection. A typical stylesheet link does not require JavaScript.

There is no need to include type="text/css" in your HTML either. Additionally, since <link> is a void element, there is no closing </link> tag. All of your CSS declarations should remain in your CSS file, outside of any <style> tags.

Try this complete HTML and CSS example

Begin by creating two files in the same directory: index.html and styles.css. Enter the first block of code into the HTML file and enter the second block of code into the style sheet. Be sure to retain the names of these files as they appear above.

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first styled page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main class="card">
    <h1>Hello, CSS!</h1>
    <p>This page loads its design from another file.</p>
  </main>
</body>
</html>

styles.css

body {
  margin: 0;
  padding: 2rem;
  font-family: system-ui, sans-serif;
  background: #eef4f8;
  color: #172b3a;
}

.card {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 2rem;
  background: #ffffff;
  border-radius: 1rem;
}

h1 {
  color: #0b6371;
}

When you run your code, you should see a white rectangle on a pale background, with a teal heading. After changing the colour of the heading, saving your CSS file, and reloading the page, you should see the new color. If you see the new color, that indicates that your HTML/CSS files are linked properly.

Note that while the paragraph remained unchanged, i.e., it was simply a standard paragraph (HTML), the CSS controlled its visual display — thus, it remained a paragraph describing content, whereas the HTML controlled its semantic meaning. For further assistance with determining between paragraphs and forced breaks, refer to our guide to adding an HTML new line.

How to link CSS to HTML in another folder

A browser will resolve a relative path for a style sheet based upon the base URL of the HTML document. Without a <base> element present in a basic page structure, the base URL will simply be that of the page itself. Before you determine how to construct your path, determine where your HTML file resides.

As indicated previously, ../ refers to moving back up one directory level. Anytime you use a leading slash (/), it denotes the beginning of the website root. There is a significant difference in terms of deployment to a subdirectory versus deploying directly under the website root. While /css/styles.css references the domain root, it would not necessarily reference your project directory.

Always use forward slashes (/) regardless of whether you are running on Windows or Mac. A local path to your computer (such as a drive letter path) will not be recognized by users who access your site via their browsers. Always double-check your capitalization as well; Styles.css and styles.css could represent two completely different files depending upon how they were named on your web server.

Paths for background images within CSS start from the stylesheet’s URL, rather than the HTML page’s URL. For example, url("../images/banner.webp") uses that starting point. Based on where your external style sheet resides, a browser will resolve paths to background images from the URL of that style sheet. As a result, moving your external style sheet around could potentially cause problems with accessing its associated background images regardless of how accurate your HTML link tag is constructed.

External, internal, or inline CSS?

An external file is not the only method for applying styles to elements. Once you’ve determined whether you’re going to reuse site-wide styles or perform some small experiment that relates to specific pages, you’ll want to consider how to link CSS to HTML.

Internal CSS example

<style>
  h1 { color: #0b6371; }
</style>

Place this style element inside <head>. You don’t need a separate stylesheet for this single rule. However, placing this rule into every page quickly becomes impractical.

Inline CSS example

<h1 style="color: #0b6371;">Hello, CSS!</h1>

The rule directly affects only the heading element. Although possible, maintaining separate class-based rules in an external file makes more sense for larger sites. If every matching heading needs the same new colour, you can modify that one shared rule.

Link multiple CSS files without confusion

You can load multiple style sheets into your HTML document. For example, you can load your generic rules first and then load a secondary style sheet containing page-specific rules.

<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/contact.css">

Only later-declared rules “win” when previous cascading criteria “tie”. Those criteria include importance, cascade layers, and selector specificity. The order of the link tags matters; however, download speed does not affect which rule prevails.

You can also limit an externally loaded style sheet to print:

<link rel="stylesheet" href="css/print.css" media="print">

What about @import?

External CSS documents can load additional CSS documents using @import. You can place this statement at the top of any external CSS document prior to other CSS styling statements:

@import url("layout.css");

body { margin: 0; }

The W3C provides the ordering requirements for imported style sheets, including exceptions for @charset and layer-order statements. Direct HTML links make the files easier to find in this beginner project. Imports discovered within another stylesheet can create extra request dependencies.

How to link CSS to HTML when styles will not load

Inspecting an unstyled page does not provide sufficient evidence to conclude why the page looks unstyled. First, verify that the browser successfully retrieved the style sheet referenced in your link element. Next, verify that you inspected the element(s) intended to be styled.

1. Open the browser’s developer tools and select the Network panel.
2. Reload the page with the panel open, then filter for CSS files.
3. Select your stylesheet and inspect its requested URL, status, and response.
4. Inspect the heading in the Elements panel and find your rule in Styles.

The Network Reference provided by Chrome DevTools provides guidance regarding how to record requests made during network activity as well as disable caching. To ensure that you receive an updated version of requests from your server while using this option, keep DevTools open.

Common CSS loading problems

Additionally, confirm that there isn’t something blocking application of the style sheet (i.e., disabled stylesheet), an unused media query condition or that there wasn’t some error related to Content Security Policy reported in the browser console. Simply receiving an HTTP status indicating success doesn’t mean that the browser actually applied the style sheet.

If you believe you are experiencing problems due to a stale cached version in Edge and wish to clear the Microsoft Edge cache, please visit our guide for steps. Before performing any tests, please save any outstanding work; otherwise, you risk losing modifications. Verify that your editor didn’t rename your file styles.css.txt.

Common questions about linking CSS

How do I link CSS to HTML in Visual Studio Code?

To practise how to link CSS to HTML in VS Code, put the same link element inside the HTML document’s head. VSCode does not require any special commands/linking syntax for establishing connections between CSS and HTML files. Once you’ve saved both files, reload your page within a browser. Utilizing a local development server will assist you with verifying proper website-style paths.

Can several HTML pages use one CSS file?

Yes. Add a link element referencing your CSS file into each HTML document. Modify relative paths for pages located in various directories; alternatively, specify an appropriate root-relative path if you intend to host the entire site from its root.

Can I link a stylesheet hosted on another website?

Yes. Your HTML link can use an absolute HTTPS URL for sourcing a stylesheet (as long as it is hosted on a trusted source). Ensure the source is available online; review any security policies you have implemented regarding data integrity or cross-origin restrictions you have added as well. Since hosting your own design file along with your project grants you complete control over future revisions, we highly recommend doing so.

Do I need JavaScript or a framework?

No. These examples operate strictly on plain HTML & CSS. Depending on how frameworks implement loading stylesheets via build tools may differ from what is demonstrated here.

What is the quickest check before I finish?

Once you learn how to link CSS to HTML, we encourage you to attempt modifying some aspect of the visual representation of one element on your page. Upon making any modification(s), verify that:

• The desired URL loads the proper CSS document.
• The selector(s) included in said CSS document accurately correspond to the elements intended to be modified.
• Said rule(s) prevail over others when viewed in DevTools.

These checks confirm the connection from your file to the rendered page.

The post How to Link CSS to HTML: Examples and Fixes appeared first on HTML5 Doctor.

An outdated cached file may show an old product picture, or a webpage loads perfectly on a smartphone but appears broken on a laptop. Deleting these files allows Edge to pull new ones.

Start with just the cache. There is generally no need to remove your saved passwords or history to troubleshoot a display issue.

Instructions checked against Microsoft documentation on 26 October 2026. Menu labels can vary between Edge versions and devices.

The quickest way to clear Edge cache

On desktop, type edge://settings/clearBrowserData into the address bar and press Enter. This takes you directly to the browsing-data controls.

1. Under Time range, select All time.
2. Select Cached images and files.
3. Uncheck the remaining categories you wish to retain, including cookies, history and passwords.
4. Click Clear now and let the process complete.
5. Return to the problematic website and refresh the page.

Stop at the check box. Previous cleans may have checked-off cookies/history/etc., and those checks matter much more than the time-range. In order to perform a cache-only clean, only “Cached images and files” should be checked.

Before you clear anything

Save unfinished work in your open tabs. Do you have work & personal browsing stored in separate Edge Profiles? Before you begin to clean-up, open the clean-up tools in the Profile where the issue exists. Cleaning your personal profile will not delete files stored in your Work Profile.

You will require Internet Access to receive website data after cleaning. Be cautious while working with Offline-Web Apps — Reconnect & allow any pending Sync work to complete before cleaning-site data for Offline Content/Unsynced Changes. A wide-scale clean-up can delete Offline-Content or un-synced changes.

What does clearing the cache actually do?

Consider the cache to be Edge’s library of reusable website files, a use of HTTP caching. Website pictures/scripts/stylesheets don’t always have to be downloaded from the server each time you access them. When Edge stores a local copy, that reduces load time. Trouble arises when the local copy is stale/outdated or contributing to a display glitch.

Removing these copies does NOT harm the actual website. On subsequent visits, the experience may take slightly longer since Edge needs to re-download the needed files.

In addition to caching, the clean-up window shows Cookies/passwords/data etc. These represent distinct data types with varying implications when deleted.

Our Web Storage explanation covers a separate storage mechanism. It is an archive article; read its old browser-support references as historical context.

How to clear cache on Microsoft Edge in Windows

For the menu route, open Settings and more > Settings > Privacy, search, and services > Clear browsing data. Choose what to clear, then follow the selections above. Ctrl + Shift + Delete also opens those options; the shortcut does not immediately delete anything.

Microsoft’s browsing-data deletion guide explains how synced categories, including history, can be removed across synced devices. Cached website files are stored locally.

How to clear cache on Microsoft Edge on a Mac

Open Edge on your Mac and go to Settings and more > Settings > Privacy, search, and services > Clear browsing data. Select what you would like to clear, select “All time” and uncheck everything except for “Cached images and files” before clicking on the “Clear now” button.

Alternatively, if your menu has changed you could type edge://settings/clearBrowserData into the address bar and follow through.

Now head back over to the webpage you were having trouble with and simply reload it. Close down Edge completely (save anything you had open) and restart it. Make sure you make these changes in Edge – clearing out Safari’s cache won’t touch Edge’s cache.

How to clear cache on Microsoft Edge on Android, iPhone and iPad

When on your phone or tablet open up the Edge application. The location of your menu options for Privacy Settings and clearing your browsing history may differ slightly from the desktop version of edge, but you are essentially going to find the options under the same headings.

Some releases label the privacy section Privacy, search, and services.

Uncheck any boxes for areas of the browser you wish to retain. Click “clear” or “Clear now”, depending on which button appears. Go back to the website.

Avoid confusing browser cache with Android app storage

There may be two options when using androids’ app management to clear either “cache” or “storage”. Clearing storage can reset app data and is generally a wider scope of actions than clearing the cache for files within Edge. Similarly, clearing Safari data on an iPhone will affect only Safari, not edge.

Can you clear the cache for just one website?

Before attempting to clear all of Edge’s cache for a single misbehaving page attempt a hard refresh by pressing Ctrl + Shift + R (Windows) or Command + Shift + R (Mac).

A hard refresh instructs the browser to load the page without utilizing any previously cached information. Although this technique is particularly effective against older images/stylesheets, it does not clear all of a website’s cache nor does it remove all forms of data associated with that website.

For recurring login loops or some form of stubborn preference, you might need to focus on removing that website’s Cookies. Look for Cookies in Edge’s preferences. Open see all Cookies and site data. Search for the site’s domain and delete its related entry. Before doing so save any unsaved forms and be prepared to log in again.

Edge developers have another more targeted method. In Edge DevTools, open Application > Storage, select Cache storage, then select Clear site data. Review all of your selections prior to using it. The Chrome DevTools Cache Storage guide shows the equivalent panel in Chrome. Cache Storage differs from the typical HTTP cache, so this is not a universal shortcut for clearing one website’s browser cache.

How to clear cache on Microsoft Edge automatically

To set up Automatic deletion upon closing on desktop: navigate to Settings > Privacy, search, and services > Clear browsing data and select “choose what to clear every time you close your browser”. Check only “Cached images and files”, leaving all other checkboxes blank unless you intend to erase that category along with the cache.

Additionally you can access this Settings page by entering edge://settings/clearBrowsingDataOnClose in your address bar.

You can leave this feature disabled for general browsing. Automatic deletion forces edge to download new resources after every session — this is not a general performance improvement. If you’re unable to alter the above option due to company/educational restrictions, your system administrator likely manages this option.

What if clearing the cache does not fix the problem?

Begin by checking the portion of the site that was malfunctioning. Did checkout fail? Return to the product page and complete checkout again. Simply being able to load a successful homepage doesn’t tell you anything about why that original issue occurred. Where possible, change one thing at a time and test again.

InPrivate changes more than cache, so that comparison alone cannot prove what caused a fault. If you check extensions, disable them temporarily and enable them one at a time, retrying the page after each change.

Media playback has other restrictions too. Our HTML5 audio autoplay and loop guide explains why a page can load but still need a click before sound starts.

Website owners should also check server or CDN caching. A browser cleanup cannot purge those separate caches or repair a missing website file.

Frequently asked questions

Will clearing Edge cache delete my passwords?

No. Select only Cached images and files and leave Passwords unchecked wherever it appears. Deleting cookies can end a session without removing your saved password, so a request to sign in again does not necessarily mean a password was erased.

Will clearing the cache log me out?

Usually no. However, since cookies store login information, checking off “Cookies and other site data” will likely terminate your session. Uncheck that category if you wish to keep your active sessions intact.

Should I select All time or Last hour?

Use All time when you want to include previously stored items from a longer period of time. Use Last hour to clean up a shorter period of time. Regardless of how long ago you cleaned up, you cannot override what categories were chosen — choosing All time with only cached files selected still leaves your passwords and cookies alone.

How often should I clear Edge cache?

There is no reason to remind yourself once a week to run a clean-up. Try running one when you encounter an old page or image that is either broken or stale. Then, too, it would be good to run one when you are trying to troubleshoot some sort of connectivity issue. Otherwise, allow edge to continue using the cached resources over and over rather than force it to redownload them each time.

Is clearing cache the same as clearing DNS?

No. Browser cache holds website resources such as pictures and scripts. DNS information helps find a domain’s network address. Removing Cached images and files does not reset DNS or solve every connection problem.

Why does the cache come back immediately?

Edge starts keeping eligible files again as you browse. That is expected. Check whether the original page now works, rather than expecting the cache size to remain at zero.

Do I need a browser-cleaning extension?

No extension is needed. The controls described here are built into Edge. Review the selected categories and confirm the cleanup, then return to the website you wanted to fix.

The post How to Clear Cache on Microsoft Edge: The Complete Guide appeared first on HTML5 Doctor.

To add an HTML new line, put the <br> tag wherever you want the next line to begin. Use a separate <p> element when you want a new paragraph.

If your text already contains newline characters, the CSS property white-space: pre-line can preserve them without a break tag after every line.

Here is a simple example:

<p>First line.<br>Second line.</p>

The browser displays “First line.” and “Second line.” as separate lines of text in the same paragraph.

Once you separate those tasks, deciding whether to use <br>, <p> or CSS becomes much clearer.

HTML new line: which method fits your content?

Start by making sure the markup describes your content correctly. Once you are happy with that, use CSS to style it.

Adding a line break using <br>

The <br> tag adds a line break at a specific location in text. It is most useful when the location of that break is important.

For example, someone reading a delivery address should be able to view each part on its own line:

<p>
  Example Studio<br>
  18 Orchard Lane<br>
  Dundee<br>
  DD1 1AA
</p>

These pieces of information belong to one group of content. There is no need to convert each line into a separate paragraph.

MDN’s documentation about line breaks explains that <br> is a void element. It does not contain text and must not have an end tag.

Write <br> rather than <br></br>. You will also see <br /> in HTML. Both spellings are accepted by browsers; the forward slash does not affect their behaviour in HTML.

A mailing address does not automatically need an <address> element. That element is for relevant contact information, rather than every address mentioned on a page. Our guide to the address element explains its purpose.

Does pressing Enter produce a visible new line in HTML?

Look at this source code:

<p>First line.
Second line.
Third line.</p>

Under normal whitespace processing, the browser displays one continuous paragraph: “First line. Second line. Third line.” The text can still wrap when it reaches the edge of its container.

Although the source has newlines, the displayed page does not have to show them. CSS usually collapses whitespace so developers can format and organise HTML without affecting how the page appears.

If the breaks belong in the content, include <br>. If you want to keep the existing newlines across a block of text, choose a suitable white-space value.

Separate paragraphs with <p>

A line break continues the same paragraph. A paragraph element defines another paragraph of content:

<p>Your account is ready.</p>
<p>You can now sign in and update your details.</p>

Browsers usually add some vertical distance between paragraphs. Your stylesheet can modify this.

Do not write an entire article inside one <p> and separate its paragraphs with <br><br>. The HTML Standard’s guidance for br reserves it for breaks that belong in the content, such as those within poems and addresses.

Proper paragraphs also give assistive technologies meaningful structure. A page that simply looks like it includes several paragraphs does not necessarily provide the same navigation experience.

See our HTML5 element index for a wider reference to these elements.

Manage paragraph spacing with CSS

If paragraphs appear too close together, adjust their margins:

.article-body p {
  margin: 0 0 1rem;
  line-height: 1.6;
}

Here, margin controls the space after each paragraph. The unitless line-height sets line box height to 1.6 times the font size.

These adjustments are independent of each other. Additional break tags make the spacing harder to manage when the font size or layout changes.

Keep existing newlines with CSS

Imagine you have received a message that already contains meaningful line breaks. You can retain those newlines in your HTML source:

<p class="message">Your order has shipped.
Delivery is expected tomorrow.
Please keep your tracking number.</p>

Now add this CSS to your stylesheet:

.message {
  white-space: pre-line;
}

The newlines are preserved, repeated spaces are collapsed, and long lines can continue to wrap.

Choose pre-wrap when repeated spaces and tabs should also be retained. The differences are documented in MDN’s white-space reference.

For messages or imported plain text, pre-line is generally a good starting point. When the spacing carries meaning, prefer pre-wrap.

Watch the leading spaces in your elements. Preserving whitespace also keeps spaces you entered purely to make the source easier to read.

When to use <pre>

The <pre> element represents preformatted text: content whose layout depends on its original spacing.

<pre>Build started
  Checking files
  Running tests
Build complete</pre>

Spaces and line breaks are preserved by default, and browsers typically display the text in a monospace font.

Long lines could overflow in a narrow window. Apply white-space: pre-wrap to that element if wrapping is acceptable. Alternatively, consider a scrollable container if the original line layout needs to stay intact.

HTML is still parsed inside <pre>. To display markup as text, escape characters such as < as <. The element does not switch HTML parsing off.

Will \n create a new line in HTML?

Entering the two characters \n directly into ordinary HTML does not create a line break:

<p>First line.\nSecond line.</p>

The browser displays the backslash and letter “n”.

JavaScript behaves differently. In a JavaScript string, \n represents a newline character. Whether that character appears as a visible break depends on how the page handles whitespace.

For example:

<p id="status" style="white-space: pre-line;"></p>

const status = document.getElementById("status");
status.textContent = "Upload complete.\nYour file is ready.";

Run this script after the paragraph exists. The string contains a real newline, and pre-line makes it visible.

Using textContent inserts plain text rather than interpreting it as HTML. This approach suits messages submitted by users or retrieved from an API: you do not need to convert their text into markup to preserve its lines.

How to add a new line in WordPress

In an ordinary WordPress Paragraph block:

• Press Enter to create a new paragraph block.
• Press Shift + Enter to insert a line break within the current paragraph.

Use a line break for an address or a short verse. For the next paragraph of an article, press Enter.

A Custom HTML block renders HTML. A Code block displays it as an example, so entering <br> into a Code block shows the tag itself.

Preview the page before adding extra breaks. Your theme may simply be applying a larger margin around each paragraph than you expected.

Why is my HTML new line not appearing?

Review the actual markup and the CSS styles applied to its container.

With <wbr>, text can remain on one line if sufficient width is available. That is what the element is designed to allow.

When investigating a layout problem, resize the browser too. A manual break chosen for a wide heading could leave an awkward short line on a phone. Allow natural wrapping unless there is a clear reason to force the break.

Frequently asked questions

Which HTML tag creates a new line?

The HTML line break tag is <br>. Place it wherever you need a new line within the same paragraph or another suitable text container.

Are <br> and <br /> equivalent?

In HTML, both create the same line break. A trailing slash does not turn <br> into a container, and neither spelling needs an end tag. XHTML follows XML syntax rules and uses <br />.

Can 
 create a new line?

The character reference 
 inserts a line feed character. Under normal whitespace processing, it does not force a visible break. Use <br> or preserve newlines through CSS.

How do I put a blank line between paragraphs?

Use separate <p> elements and configure their margins in CSS. Do not use empty paragraphs or repeat <br> tags simply to push content further down the page.

The post HTML New Line: How to Add Line Breaks Correctly appeared first on HTML5 Doctor.

This tutorial applies to standard video files embedded in sites. Protected content streams and HLS/DASH players have their own additional requirements.

Quick checks: what failed?

What does “HTML5 video not properly encoded” mean?

In most cases, this phrase is generated by the site’s player rather than being a standard HTML error message. While HTML provides the video element, the browser must be able to interpret the container and any media within.

An MP4 is a container. H.264 is a video codec. And AAC is an audio codec. There can be two MP4 files with the same extension, yet they can be incompatible with different browsers due to differing codecs. Simply renaming a MOV file to MP4 does not convert its internal media.

MDN’s guide to web video codecs indicates that MP4 with H.264 and AAC is a broadly supported combination. It represents a good place to begin; however, the target device must also be capable of supporting the file’s profile, level and dimensions.

If you are watching someone else’s video

Try reloading the page and using an up-to-date version of your browser. If possible, view other videos on the same site, then try viewing the clip on a different device. These steps help determine if the problem exists with one file or with your browser.

If private mode works, inspect extensions and site data. Private mode changes login access as well, so compare like-for-like results. If the same clip fails across devices, contact the site owner and send them its page URL. As a viewer, you can’t repair the website’s source file by modifying browser settings.

Do not install codec packs or browser plugins suggested via popups. Install updates normally through your browser’s update mechanism and use your device manufacturer’s supported media components.

1. Check the actual video request

Using your browser’s developer tools, select Network, reload the page and press Play. Examine the media request, not just the HTML page.

• Confirm that the request reaches the intended file without an unexpected redirect.
• Check the response body. A login screen or error document is not playable video, even when its URL ends in MP4.
• For MP4, check that the response has an appropriate Content-Type: video/mp4 header.
• Compare the downloaded file’s size with the original to spot an incomplete upload.

For common file delivery, expect a successful response, commonly 200, or 206 if the server honours byte-range requests. Range support helps seeking; however, a lack of 206 does not confirm encoding faults. Check for HTTPS issues, expired signed URLs and CDN access rules as well.

Do not automatically add CORS headers. Basic cross-origin video can play without a CORS-enabled request; however, requesting via JavaScript fetch, adding a crossorigin attribute, or reading frames through canvas will alter these requirements.

2. Read the browser’s media error

Run this in the developer console after playback fails:

const video = document.querySelector("video");
console.log({
  source: video?.currentSrc,
  code: video?.error?.code,
  message: video?.error?.message
});

If the video sits within an iframe, select the iframe’s console context. Custom streaming players may provide their own diagnostic logs.

The MediaError reference from MDN defines code 2 as a network failure, code 3 as a decoding failure, and code 4 as an unsuitable source. When code 3 is returned, it is worth examining the file further. Code 4 can indicate unsupported formats or an unusable source as well; neither replaces examining the initial request. The message may be empty.

3. Inspect the file before converting it

You can inspect the local media file using ffprobe, included with FFmpeg:

ffprobe -v error -show_entries stream=codec_type,codec_name,profile,pix_fmt,width,height -of json input.mp4

Look for the codec type for audio and video tracks, pixel format and dimensions. HEVC videos can work on some devices but fail on others. H.264 video with a 10-bit or 4:4:4 pixel format may have different support from a standard 8-bit 4:2:0 export.

FFmpeg can report decoding issues when you run:

ffmpeg -v error -i input.mp4 -f null -

This decodes without saving a converted copy. Decoding issues are evidence worth investigating. A clean result does not establish browser compatibility, since FFmpeg can decode files that a specific browser cannot.

4. Re-encode an SDR video for wider compatibility

Here is a practical starting point for ordinary SDR sources when your build includes the libx264 encoder:

ffmpeg -i input.mp4 -map 0:v:0 -map "0:a:0?" -c:v libx264 -crf 23 -preset medium -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" -c:a aac -b:a 128k -ac 2 -movflags +faststart output-web.mp4

It selects the first video track and an optional first audio track. It creates H.264 video using an 8-bit 4:2:0 pixel format, rounds dimensions down to even numbers, and converts existing audio to stereo AAC. It does not create audio when none exists in the source.

The quality setting CRF 23 is a starting point; you’ll need to review results visually and make adjustments based on your footage. Large dimensions and high frame rates can still exceed device capabilities. Reduce them when required to accommodate your audience’s hardware.

The official FFmpeg documentation for MP4 explains how +faststart moves the index to the beginning of a file, which can help playback begin sooner. It does not repair a damaged stream or make an unsupported codec usable.

Save the original file. HDR requires an appropriate workflow or deliberate tone mapping; changing only the pixel format can produce incorrect colours. In a graphical encoder, choose MP4, H.264, AAC and a web-optimised export, then verify the saved file instead of relying on its preset name.

5. Test a simple HTML video element

Temporarily remove the custom player from a test page and embed a minimal video element. Our introduction to the HTML video element covers the basic syntax. Its older browser notes reflect the article’s publication period.

<video controls playsinline preload="metadata" width="1280" height="720">
  <source src="/media/output-web.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

Substitute the example path with your real file URL and use the video’s actual dimensions. Apply responsive CSS like max-width: 100%; height: auto;. Use visible controls and click Play manually. This test explicitly leaves out autoplay.

Offer alternative encodings by providing separate source elements with accurate MIME types. Guessing a codecs parameter can cause the browser to skip a source. Fallback text inside the video element applies to browsers without video support; it is not a reliable error message for modern browsers unable to display a file.

6. Replace the WordPress file and check the delivered copy

Upload the converted video as a separate media item and select it within the WordPress Video block or player settings. Acceptance of an upload by WordPress does not mean that all browsers will play the video successfully.

Choose a new filename when practical. Clear relevant page and CDN caches, then confirm that the player requests the new URL through Network. Test playback, sound and seeking across your audience’s browsers and devices, including a phone.

If a simple embed works but the plugin player fails, inspect the player’s configuration, scripts and streaming requirements. If playback works but processing frames fails, refer to our video and canvas tutorial for background on that separate task. Cross-origin canvas access requires its own checks.

Watch: how video encoding works

Google for Developers’ “Demystifying encodes and decodes of WebM” provides background on WebM encoding for web distribution. This archived 2014 talk explains encoding concepts; however, its browser and performance comparisons should not be considered current compatibility advice.

Frequently asked questions

Can I fix HTML5 video not properly encoded without converting it?

Yes, if the cause is an incorrect URL, blocked request, wrong response header or stale cache. Check delivery first. Re-encoding is appropriate when the file is damaged or its tracks and encoding settings are unsuitable.

Why does the MP4 work in VLC but fail on my website?

VLC may support a codec or profile that the browser does not. Local playback also bypasses your website’s HTTP delivery. Inspect both the file and the browser’s Network response.

Does muted autoplay fix an encoding error?

No. Muting can help with autoplay restrictions, subject to browser policy. It cannot supply a missing decoder or repair a broken video stream. Test with visible controls and a manual click first.

The post HTML5 Video Not Properly Encoded: Causes and Fixes appeared first on HTML5 Doctor.

How to fix HTML5 video not found as a viewer

Are there only a few video clips that fail, or does every video on every web site fail?
one broken clip usually directs you toward the problem with that individual asset or its host. Multiple web-sites failing indicates you should take a closer look at your browser, device & internet connection. Neither of these patterns are definitive.

• reload & login as needed: go back to the original page (e.g. Course, subscription video) because old tabs or saved media links may contain expired tokens. Don’t forget to save unfinished form responses prior to reloading.

  
  

• open a new private window: a private window starts with separate session data and usually restricts extensions, although some extensions can be allowed. You can enter your login credentials in both windows if the video requires a login credential. A comparison of success between windows is indicative of a problem with your normal browser profile; but it does not identify an extension by itself.

  
  

• browser updates & cross-device testing: re-launch your browser after updating. Write down your version numbers for both your browsers & operating system so you can refer to them in your report. Saying ‘mobile is broken’ is less descriptive than saying ‘failed on my iPhone using Safari’.

  
  

• clearing site data: if comparisons suggest the issue lies within your browser-profile, clear any cached files or stored data for the problematic site. Note that clearing cookies will also remove you from logged in states. Read Google’s video troubleshooting for information related to extensions, updates, JavaScript & browser-data.

  
  

• comparing connections: test your video using mobile data instead of Wi-Fi. If you normally connect via VPN, test without connecting when feasible. Differences in video playback between connections may be due to filtering, routing issues or access restrictions etc.

  
  

When “HTML5 video not found” affects every device

Plain html video does not depend on JavaScript, but a custom player may. If you intentionally prevented scripts from running, examine your site-specific permissions. If the clip fails across all devices & connections, provide the url for the page that contains the video clip, the exact message and timestamp. Always exclude any personal media tokens from your public reporting.

Match the symptom to the next check

HTML5 video not found: inspect the media request

Identify the failed video request using the developer tools > Network tab. Load the page again and press Play. Look for the video request. Adaptive stream manifests and segments may appear under Fetch/XHR instead of media. Chrome has outlined this process in its Network panel guide.

Review everything about the request (status-code, redirect, header, response body & url). A 200 status-code with a login-page is not video. For a 404, compare the requested path with the stored file, including letter case. If you see a 401 or 403, review authentication, permissions and signed links. If you get a 500 series status code, Check the logs from the origin or CDN.

Relative paths require careful review since they can become outdated after they’ve been relocated. media/lesson.mp4 uses the current page’s base url whereas /media/lesson.mp4 begins from the top level of your domain. Review what url the browser actually requested versus what was intended.

Opening a media url directly helps to diagnose but changes the context of your request. Browser cookie rules, referrers rules or CORS requirements may determine why it plays fine in isolation but fails when embedded.

Check the container, codec and MIME type

The MP4 extension refers to a container type, not necessarily the codec(s) contained within it. Changing the filename doesn’t encode anything differently. See MDN’s container format guide for additional information on this.

H.264 encoded video and AAC encoded audio inside MP4 is currently considered a good compromise for browser compatibility although actual hardware and software support matters just as much as encoding quality. See FFmpeg’s ffprobe to discover the actual contents of your files:

ffprobe -v error -show_format -show_streams lesson.mp4

Check both the server side content-type — video/mp4 for MP4 and video/webm for webm — and that the source’s html type also describes the actual file type. Although you’re labeling things appropriately they’ll not resolve bad encodes or a partially transferred file.

Compare your failing file to a tiny, known-good MP4 on the same host & through the same markup.

Test a plain video element before the custom player

Test this on staging with your actual media paths. Encode and publish both formats independently.

<video controls playsinline preload="metadata">
  <source src="/media/lesson.mp4" type="video/mp4">
  <source src="/media/lesson.webm" type="video/webm">
  Your browser does not support HTML video.
</video>
<p><a href="/media/lesson.mp4">Open the video file</a></p>

Even though the direct link remains accessible outside of the element if embedded playback fails; nested fallback text is for browsers without support for the <video> element and not a reliable error message for playback failure. playsinline asks for inline playback; it will not repair a source. For additional information, please consult MDN’s video reference.

Use currentSrc, error, networkState and readyState. The media error codes differentiate between an aborted fetch (1), Network errors (2), decoding errors (3), and unsuitable source (4). An error code of 4 does not signify that a file has been deleted. Chrome’s Media panel displays events and messages from the player.

For additional history, read HTML5 Doctor’s original video article. Since this article is now archived; please consult current documentation for any compatibility-related decisions.

Check HTTPS, CORS and access rules

A page with HTTPS accessing an http resource represents mixed content. The browser will attempt to auto-upgrade the request to HTTPS or reject it according to circumstances relevant to your configuration. Correct your source url, certificates or hosting configuration if necessary. For additional information regarding behavior of mixed content please see MDN’s mixed content guide.

You don’t always need to automatically add CORS headers for a different host name than your current one when requesting only standard video playback functionality. However CORS needs to be implemented for various types of media playback: when an element uses crossorigin, when JavaScript is retrieving streaming data, or when you want to enable a canvas element to access video pixels. Ensure that you implement your media server or CDN according to your actual request methodology. If making credentialed requests, you must specify an explicit permitted origin in Access-Control-Allow-Origin and properly handle credentials — wildcard values do not substitute. Refer to CORS documentation by MDN as well as your console Policy error messages regarding “media-src” limiting media sources; “connect-src” governing connections made by streaming JavaScript. For private video, also check signed URLs, cookies and token lifetimes.

While repairing access routes ensure that you retain those restrictions in place.

Investigate seeking, slow starts and streaming failures

If full download works but seeking fails: attempt partial deliveries

This Unix-like shell command requests the first 1,024 bytes of a public test file:

curl -sS -D - -H 'Range: bytes=0-1023' -o /dev/null 'https://example.com/lesson.mp4'

A successful single range response normally returns 206 with matching Content-Range header value. A server may ignore ranges and return entire file with status code 200; alone that does not indicate broken playback. Determine status 416 against resource length. For additional information on range requests please consult MDN’s guide to range requests. In PowerShell use curl.exe and output target such as NUL.

Slow startup time can involve metadata at end of conventional non-fragmented MP4’s. If the streams are suitable, move the metadata to the beginning without re-encoding:

ffmpeg -i input.mp4 -c copy -movflags +faststart output.mp4

Test new file prior to updating original asset. For more details regarding faststart options and limitations please refer to FFmpeg’s documentation for muxer formats.

If working with hls/dash content continue recording the Network log after initial manifest loads. one of several subsequent playlist segments keys or DRM licenses could fail. Monitor “.m3u8,” “.mpd,” “.m4s,” “.ts” and other extensionless endpoint URLs throughout session and confirm continued resolution and access functionality throughout session properly. Select either native playback (if possible) or pick a JavaScript-based player designed specifically for actual browser support; further information on browser compatibility requirements are available via hls.js project.

Fix HTML5 video not found in WordPress

Locate saved block (embed shortcode): identify whether hosted within media library or external service (streaming): verify saved url of block still accurate post domain migration.

Once saved block identified Check any lazy loading optimizations (if applicable): optimization code can delay assignment of source; press Play to trigger intended request.

To troubleshoot on staging create two blocks — one standard video embed block and one custom player block: only update one setting per test run: purge cache (and possibly CDN) following each successful “fix”.

Providers’ watch-page URLs (YouTube/Vimeo) do not necessarily point to actual MP4 files: instead use official YouTube & Vimeo embeds instead of adding their “watch” page URLs as MP4 src references.

Finally, return to the device and account that failed. Play from the start, seek, and continue beyond the failure point. Compare desktop and mobile playback.
HTML5 Doctor has archived multimedia troubleshooting guide (multimedia troubleshooting guide): while this guide provides historical browser tables — those are not current support guides

Frequently asked questions

Does HTML5 video not found mean the file was deleted?

Sometimes. Denied access, unsupported encoding and streaming failures can produce similar messages. Check the actual media request to identify the cause.

Will clearing the cache fix it?

Sometimes, when stale data is involved. Clearing the cache cannot restore a deleted file or change its encoding.

Why does it work in one browser?

Check for differences in how the files were delivered, the supported codecs, installed extensions and session state before deciding the problem is with the browser.

Is autoplay blocking the same error?

No. A policy can restrict automatic playback while the file is available. Press Play and inspect the result. A rejected play() promise with NotAllowedError can indicate permission or autoplay restrictions.

Do I need an HTML5 plugin or Flash?

No separate HTML5 browser plugin is required. Flash is obsolete and will not fix HTML video.

What should I send to support?

Send the page URL, exact message, time, browser and device versions, and comparisons tried. Redact passwords, cookies and signed access tokens before sharing diagnostics.

The post HTML5 Video Not Found: Fixes for Viewers and Site Owners appeared first on HTML5 Doctor.

That gap trips people up. You can find old tutorials using HTML5 years before its supposed release, and those tutorials are not necessarily wrong. Browsers were adding features while the standard was still taking shape. The dates make sense once you stop treating HTML5 like a piece of software with a launch day.

When did HTML5 come out officially?

Use 28 October 2014 for the official W3C standard. You can check the date at the top of the HTML5 Recommendation. W3C also states that this is a stable document which developers can use as reference material.

Care is needed with the word “release”. Browsers are software; HTML is the markup language they interpret. Approving the specification did not send every browser an update that afternoon. Nor did it mean all browsers suddenly handled every feature in the same way.

For an assignment, a quiz or a project brief, this wording avoids the ambiguity: “HTML5 became a W3C Recommendation on 28 October 2014. Its first W3C public working draft appeared on 22 January 2008.” Include the milestone alongside the date, and the answer is much harder to misread.

When did HTML5 come out? The key dates

Start with the events in order. In particular, keep the beginning of the development work separate from publication of the draft.

Why is 2008 sometimes given as the release year?

Open the 22 January 2008 working draft and look at its status section. It identifies the document as the first public working draft. It also warns implementers that the specification is unstable. That warning is a useful clue about what kind of release this was.

So, 2008 is correct if the question means the first W3C public draft. However, it does not answer the same question as the 2014 Recommendation date. Drafts leave room for testing, bug reports and changes; a Recommendation records a later standards milestone.

For example, a timeline labelled only “HTML5 released: 2008” leaves readers guessing. Add “first W3C public working draft” and it becomes precise. The same rule applies to 2014: name the event rather than implying nobody could use HTML5 before then.

Who created the standard?

Browser makers and contributors to the web standards community developed HTML5. In 2004, Apple, Mozilla and Opera established WHATWG, short for the Web Hypertext Application Technology Working Group. Its work put existing web content and actual browser behaviour at the centre of HTML’s development.

Later, W3C formed an HTML working group in 2007 to work with WHATWG on the specification. The public draft followed in 2008. In other words, neither the draft date nor the Recommendation date marks the moment someone first started work.

The HTML Living Standard’s history section sets out those beginnings. It also explains the groups’ different approaches to maintaining HTML and their eventual agreement to work on a single specification.

What changed with HTML5?

For someone building a page, the useful changes were concrete. HTML5 added ways to describe content and handle media, as well as more detailed rules for browsers. These are some of the features developers associated with it:

• Video and audio: native video and audio elements made media possible without a separate browser plug-in.
• Page structure: elements such as article, section and nav describe the purpose of different parts of a page.
• Canvas: scripts can draw into a canvas element.
• Forms: new input types and attributes provide more controls and built-in validation options.
• Parsing: detailed rules tell browsers how to process markup, including markup with errors.

However, HTML5 also became a catch-all label for modern web technology. CSS and JavaScript remained separate, and many APIs had their own specifications. Therefore, an old demo calling something “HTML5” is not proof that every feature in it belongs to the 2014 document.

To see what meaningful markup looks like in practice, read HTML5 Doctor’s explanation of HTML semantics and element meaning. Choosing an element starts with what the content means.

When did HTML5 come out in browsers?

There was no single date. Each browser vendor implemented features on its own schedule. Some features arrived before 2014; support for others took longer. Even within one browser, support for one part of HTML5 said little about another.

That is why a broad claim such as “this browser supports HTML5” is not a very helpful compatibility check. Instead, identify the feature you need and check it against your users’ browser versions and devices. For media, also check file formats and codecs.

A video element offers a good example. The browser may recognise the element but still be unable to play a particular file. In that case, the problem is not a missing HTML5 download. You need to investigate the media format, delivery or playback support.

What followed the HTML5 release?

W3C published HTML 5.1 in 2016 and HTML 5.2 in 2017. Meanwhile, WHATWG kept updating HTML as a Living Standard. With that approach, changes can enter the specification without waiting for another major version number.

On 28 May 2019, W3C and WHATWG announced their agreement to collaborate on one version of HTML and DOM. WHATWG maintains the Living Standards, with W3C contributing through the agreed process.

For new work, use current HTML documentation and check the features you plan to use. The 2014 Recommendation is still valuable when researching history. However, relying on that document alone would miss the work done since then.

HTML5 release date FAQs

Was HTML5 released in 2008 or 2014?

Both dates are valid when you name the event. W3C published its first public working draft on 22 January 2008. HTML5 became a W3C Recommendation on 28 October 2014.

Was 2004 the launch year?

No. WHATWG formed in 2004, so that year belongs to HTML5’s development history. It is not the date of the first W3C public working draft or the Recommendation.

Do I need a separate download?

No separate HTML5 download is needed to read ordinary web pages or use native media elements. Browsers implement HTML features. If a site asks for an unfamiliar “HTML5 player”, check what it wants you to install.

Is the name still used today?

Yes, the name is still common. However, the current specification is the HTML Living Standard. For the question “when did HTML5 come out”, 28 October 2014 remains the W3C Recommendation date; it does not mark the end of HTML’s development.

The post When Did HTML5 Come Out? Release Date & Timeline appeared first on HTML5 Doctor.

Starting and repeating are separate jobs. HTML can repeat a track after it has started, but getting it to begin with sound for every visitor is less predictable. For many websites, a Play button followed by continuous looping is a good place to start.

HTML5 audio autoplay loop: a background music example

A minimal player looks like this:

<audio controls autoplay loop>
  <source src="/media/background-music.mp3" type="audio/mpeg">
  Your browser does not support HTML audio.
</audio>

Replace the example path with your own audio URL. Use an original recording or one you have permission to play, and keep the controls showing. A visitor whose browser blocks autoplay can click Play; anyone wanting silence can click Pause.

The markup is valid even if the player stays quiet. The browser has the final say on whether that automatic start is allowed.

What the audio attributes do

There is no background attribute for <audio>. The term describes how you use the recording. MDN’s audio element reference lists the supported attributes.

Why background audio autoplay is blocked

Autoplay restrictions are meant to block unwanted sound. Browser settings, previous interactions with your site and the way the player is embedded can affect what happens when somebody opens the page.

Chrome’s autoplay policy, for example, allows audible playback in certain circumstances after a user interacts with the domain. This explains why music may work on a development computer yet do nothing for a new visitor.

Try visiting with a fresh browser profile, then test on a real phone. Check site permissions as well. Your normal browsing environment may already have a history with the site that a new visitor does not share.

Calling play() at page load does not get around these restrictions. A retry timer will not grant permission either. MDN’s autoplay guide explains why starting playback from a script is still subject to browser policy.

Does muted autoplay solve it?

Muted media may be treated more leniently, but it supplies no background music while silent. Removing muted later will not reliably unlock sound. If the goal is for visitors to hear the recording, give them a clear way to start it.

The playsinline attribute belongs to video. Adding it to an audio player will not unlock audible playback on an iPhone.

HTML5 audio autoplay loop with play and pause controls

The recording in this example waits for a visitor to click Play before it starts looping. If JavaScript fails, the native audio controls remain available. The additional button stays hidden until the script has attached its event handlers.

Use the whole example together. Put the script below the HTML and replace /media/background-music.mp3 with the URL of your MP3.

<audio id="background-audio" controls loop preload="none"
       aria-label="Background music">
  <source src="/media/background-music.mp3" type="audio/mpeg">
  Your browser does not support HTML audio.
</audio>

<button id="music-toggle" type="button" hidden
        aria-controls="background-audio">
  Play background music
</button>
<p id="music-status" role="status"></p>

<script>
(() => {
  const audio = document.getElementById("background-audio");
  const button = document.getElementById("music-toggle");
  const status = document.getElementById("music-status");

  if (!audio || !button || !status) return;

  const syncButton = () => {
    button.textContent = audio.paused
      ? "Play background music"
      : "Pause background music";
  };

  button.addEventListener("click", async () => {
    if (!audio.paused) {
      audio.pause();
      return;
    }

    status.textContent = "";
    button.disabled = true;
    try {
      await audio.play();
    } catch (error) {
      status.textContent = error.name === "NotAllowedError"
        ? "Playback was blocked. Check your browser's site permissions."
        : "The audio could not start. Check the file URL and format.";
    } finally {
      button.disabled = false;
      syncButton();
    }
  });

  audio.addEventListener("play", syncButton);
  audio.addEventListener("pause", syncButton);
  audio.addEventListener("error", () => {
    status.textContent = "The audio could not load. Check the file URL and format.";
    syncButton();
  });

  syncButton();
  button.hidden = false;
})();
</script>

Look at where audio.play() runs: inside the click handler, before any unrelated network request or timer. The code handles a rejected playback promise and keeps the button label in step with the native controls.

MDN’s play() documentation distinguishes permission failures such as NotAllowedError from unsupported media errors. Neither error proves that a file is missing.

Use this example once per page. For multiple players, assign unique IDs and update the selectors for each instance.

HTML5 audio autoplay loop in WordPress

In WordPress, begin with the file rather than the script:

1. Upload your MP3 through Media → Add New and copy the file URL.
2. Add a Custom HTML block containing the example’s audio element, button and status paragraph.
3. Replace the sample source with the full HTTPS URL from the Media Library.
4. Load the JavaScript after the player markup, using your site’s approved script method or a child theme.
5. Save and preview the page. Test Play and Pause, then let the recording reach its end to check the repeat.

If the script disappears after saving, check account permissions. WordPress’s Custom HTML documentation explains how users without unfiltered_html have disallowed tags removed. Where your editor provides separate HTML and JavaScript panels, put the JavaScript in its own panel without the surrounding <script> tags, if your permissions allow it.

To publish this tutorial, put the examples in Code blocks so readers see them. To install the actual player, use the markup and script as described above.

Fix HTML5 audio autoplay loop problems

For MP3 audio, use type="audio/mpeg". The server needs to return the recording itself, rather than an HTML error or login page. Use HTTPS media URLs on an HTTPS page. You can offer other source formats, but changing a filename’s extension will not change its encoding. For more on declaring source formats, see our audio MIME-type explainer.

Do not add crossorigin as a fix for every playback problem. Ordinary cross-origin media playback often works without it. Web Audio processing or fetching a file programmatically can require appropriate CORS response headers.

Looping is not the same as a seamless loop

A track can repeat correctly and still make an awkward loop. Silence at the beginning or end, an abrupt edit or encoding padding can reveal the join.

Listen through the whole recording a few times. Remove unwanted silence and prepare an ending that meets the beginning naturally. Replacing loop with an ended event handler will not cure a gap in the recording or guarantee a seamless repeat.

For games or interactive soundscapes that need precise loop points, Web Audio offers another option. An AudioBufferSourceNode can define loop start and end points. You will also need to manage loading and the audio context, while respecting playback permissions.

Keep background music accessible and lightweight

Under WCAG 2.2 audio control, automatically playing audio that lasts more than three seconds needs a way to pause or stop it, or a volume control independent of the overall system volume.

Let visitors choose to start the music and make stopping it simple. Test with a keyboard: can you reach Pause, and can you see which control has focus? Background sound can compete with screen readers. Hiding the only available controls makes that harder to resolve.

Optional music rarely calls for an immediate download. preload="none" supplies that hint, but the browser decides how to use it. Adding autoplay will not prevent the download required for playback. Keep the recording small enough for its purpose and avoid a large player library for one ambient track.

Frequently asked questions

Can an HTML5 audio autoplay loop start with sound?

Sometimes, when browser policy and permissions allow it. No combination of HTML attributes ensures that every visitor will hear autoplayed sound. Give people a manual Play option.

How do I turn off autoplay or looping?

Delete the appropriate attribute. Setting autoplay="false" or loop="false" does not disable these Boolean attributes. In JavaScript, use audio.autoplay = false or audio.loop = false. Disabling autoplay will not stop audio already playing; use audio.pause() for that.

Will music continue when visitors open another page?

A normal full-page navigation replaces the document and its audio element. To keep music playing, a web application needs to preserve its player across route changes. Saving a preference alone will neither keep the music running nor guarantee playback permission on the next page.

Should I hide the audio controls for background music?

Hide native controls only if you supply accessible alternatives and handle loading or playback failures. For a smaller site, keeping the native controls is usually the easiest option.

The post HTML5 Audio Autoplay Loop: Background Music Guide appeared first on HTML5 Doctor.

For the longest time HTML5 specified, and advised developers, that it no longer mattered what the number (1 to 6) was in a heading element (when used in conjunction with sectioning elements). What mattered was the nesting level of the H1-h6 in sectioning elements, just like the X<H>TML promised land, but better as it recycled current heading elements. This concept was embraced by many a web standards afficianado and has been spread far and wide by web standards evangelists, in speeches, articles and books.

How the outline should work: using nested section and h1 elements

<body>
 <h1>top level heading (parent sectioning element is body)</h1>
 <section>
 <h1>2nd level heading (nested within one sectioning element)</h1> 
  <section>
  <h1>3rd level heading (nested within 2 sectioning elements)</h1> 
  </section> 
 </section>
</body>

document outline:

 → top level heading
 → → 2nd level heading
 → → → 3rd level heading

Trouble in outline nerdvana

Document outline semantics exposed by browsers and assistive technology:

→ top level heading
→ top level heading
→ top level heading

Brilliant as it is, this idea as specified has not been taken up by user agents. So after 7 years or more we have a concept without interoperable implementations (super sad face).

For the last few years, the HTML5 specification has included a warning about the lack of implementations and has suggested that the document outline algorithm not be relied upon to convey heading semantics to users. Recently this has been taken a step further. Now the HTML 5.1 specification  requires developers to use h1-h6 to convey document structure. The simple reason for this change is that the HTML5 document outline is not implemented and despite efforts to get it implemented, the general response from user agent developers has not been enthusiastic. You can read the updated advice and requirements in the HTML 5.1 specification

Comments or questions? Bring ’em on!

PS: If you find any bugs in the HTML 5.1 spec you can open an issue or send a  pull request.

Update 21/06/16 – Heading-level outline view

You can now check the heading-level outline of a page using the W3C HTML checker or the W3C markup validation service (same output different UI) with thanks to Mike[TM]Smith. It is provided alongside the structural outline, so you can compare semantic reality and theory.

Example of heading-level outline and structural outline displayed by the Nu HTML Checker

The post Computer says NO to HTML5 document outline appeared first on HTML5 Doctor.

<label for="when">Date:</label>
<input id="when" name="when" type="date">

<label for="when">Date:</label>
<input id="when" name="when" type="date" min="2016-01-01" max="2016-12-01">

Features

Rather than talk about browser support for the date input type, I will instead talk about the various features that are part of this input type:

• the input field
• the min and max attributes
• the step attribute
• the datepicker
• events

The input field

Neither Firefox nor Safari support this input type; it is treated as a simple text field with no formatting and no special interaction.

Microsoft Edge has no special interactions and in fact the input field appears to be read-only.

Chrome and Opera have the same implementations which display a date placeholder (or date value if the input’s value attribute has been set) using the user’s system settings’ date format. There are also some controls that allow the user to clear the input field, some arrows to cycle up and down between values, and an arrow that will open a datepicker (see Figure 1). There are some WebKit prefixed pseudo selectors available that allow you to change the appearance of the various bits within the input date field.

The min and max attributes

All of those browsers that support the date input type also support the min and max attributes.

Chrome and Opera both work fine if both the min and max attributes are set, but the UI is poor when only one of them is set. In these browsers, the date input displays up and down arrows for the user to change each value (day, month, and year). If a date input has a minimum value set at today’s date, then if the user highlights the year and then clicks the down arrow, the year will change to 275760 as the arrows cycle between the valid values and, since no maximum has been set, the default maximum is used (see Figure 2). This has been reported as a bug but has been marked as “won’t fix” as apparently it is the desired behaviour, I disagree.

Something similar happens when only a max value is set in that pressing the up arrow will cycle around to the year 0001, which is the default minimum. Again this leads to a very confusing UX for the user, so please use both min and max where possible.

With Android, the setting of these attributes can cause some weird quirks with the datepicker.

The step attribute

None of the browsers tested support the step attribute.

The datepicker

Firefox and Safari do not support the date input type and therefore do not open a datepicker on desktop. But they do open a device’s native datepicker on mobile devices when the date input field receives focus.

Microsoft Edge opens a datepicker, but its UI is very poor (see Figure 3).

Chrome and Opera open a fairly decent datepicker on desktop but you cannot style it at all. It looks how it looks (see Figure 4), and there’s nothing that you can do about it, no matter what your designer says. With these browsers you can disable the native datepicker if you want and implement your own, but this will not work with mobile devices. This gives you the best of both worlds: you can implement a nicer datepicker for desktop and let a device use its own native datepicker.

All the native datepickers that I tested on Android displayed some sort of confusing display quirks when valid min and max attribute are set. A user is correctly restricted from selecting a date outside of the specified range, but the visual datepickers often display “previous”, “current”, and “next” values for day, month, and year, and the values displayed for “previous” are either empty (in the case of the month) or set to 9999 (in the case of the year, see Figure 5).

The post The woes of date input appeared first on HTML5 Doctor.