Navigating Web Standards: Soft Navigations, Image Formats, and HTML Best Practices

"Soft navigations" represent a modern approach to web navigation, typical in Single Page Applications (SPAs). In this paradigm, content on a page changes and the URL updates, but the browser does not perform a traditional full page reload. This concept has been introduced to enable browsers to detect such navigations, primarily to facilitate the testing and monitoring of Core Web Vitals. While this seems like a relatively specific reason for a new API, it underscores the influence of Google's in-house initiatives on web standards.

This influence extends to the realm of image formats. Google's promotion of its proprietary WebP format often overshadows other advanced image technologies. For instance, despite the existence of formats like JPEG XL, which many consider superior to WebP in various quantifiable aspects and capable of making it obsolete, Google's support for non-Google-developed formats can be inconsistent. While AVIF, another image format, was adopted, it did not pose a direct threat to WebP's dominance. This behavior highlights Google's significant control over its Chrome browser, a fact recently reaffirmed, which consequently impacts the broader web ecosystem.

Shifting to HTML best practices, it's worth noting an important detail about the download attribute. When applied to an <a> tag, this attribute typically prompts the browser to download the linked resource rather than navigate to it. For example:

<a href="/files/thing.pdf" download>Download PDF</a>

However, a crucial caveat often overlooked is that the download attribute does not function as expected for cross-origin resources. If the href points to a different domain, such as:

<a href="https://api.site.com/files/thing.pdf" download>Download PDF</a>

The download will fail. To enable downloads for cross-origin files, the server hosting the file must send a Content-Disposition header with the response.

Another fundamental web development best practice emphasizes the importance of using unique IDs for HTML elements. While many developers are aware of this rule, the underlying reasons are sometimes less clear. Duplicating IDs can lead to several issues:

• JavaScript getElementById: This method will only return the first element it finds with a matching ID, which may not be the intended target for specific code logic.
• Hash Links: Internal page navigation via hash links (e.g., #my-id) will similarly only scroll to the first element possessing that ID, potentially leading to incorrect page positioning.
• Accessibility and Form Controls: HTML attributes like for (linking a label to an input) or aria-labelledby (providing an accessible name to an element) rely on unique IDs to establish correct associations. Duplicate IDs can disrupt these connections, impairing accessibility and form functionality.

While CSS selectors using #id might appear to function correctly with multiple elements, ignoring the unique ID best practice introduces potential problems across JavaScript, navigation, and accessibility. Adhering to unique IDs for HTML elements is a straightforward way to prevent a range of common web development issues without any downsides.