New lines are removed from WHATWG URLs

Today I learned something groundbreaking about URLs!

You know that when you're templating HTML and you're dealing with attribute values, it might make sense to break things into pieces. I like to have one attribute per line and sometimes even break the attribute values into multiple lines.

Long URLs are always tricky, because you can't break these apart...

<a class="something something_else 
          something_very_long something_even_longer"
   href="https://www.example-blog-about-everything-under-the-sun.com/2026/03/03/the-ultimate-comprehensive-and-absolutely-definitive-guide-to-understanding-why-your-css-layout-breaks-at-3am-when-you-least-expect-it-and-how-to-fix-it-once-and-for-all-without-losing-your-sanity-or-your-will-to-live-as-a-frontend-developer-in-the-modern-web-ecosystem-featuring-flexbox-grid-and-container-queries">
  Long link
</a>

Or can you?

Daniel shared that line breaks and tabs will actually be removed from URLs. Excuse me?!

Here's the URL parsing WHATWG spec:

2. If input contains any ASCII tab or newline, invalid-URL-unit validation error.
3. Remove all ASCII tab or newline from input.

So, browsers discover newlines or tabs in URLs, recognize them as "invalid-URL-unit" errors, and then remove the invalid characters to get the job done. Nice job, browsers — I love it!

Here's a rendred link including a URL with tabs and newlines for you to inspect.

<a href="https://↵
⇥web↵
⇥weekly↵
⇥.email">
  webweekly.email
</a>

Tabs and newslines are removed and things just work and because we're looking at the WHATWG spec in action here, the characters will be remove in JavaScript, too!

const urlWithTabsAndNewlines = `https://www.	
stefanjudis.
com`;

const normalizedUrl = new URL(urlWithTabsAndNewlines);
console.log(
  normalizedUrl.href === urlWithTabsAndNewlines
); // false

That's pretty wild, isn't it?

Check Daniel's post if you want to learn more!