{
  "id": 6615274,
  "title": "My HTML Boilerplate",
  "url": "https://urgent.news/2026/09/10/my-html-boilerplate",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-10T16:13:28.000Z",
  "source": {
    "name": "Lobsters",
    "slug": "lobsters",
    "url": "https://vale.rocks/posts/html-boilerplate"
  },
  "original_language": "en",
  "account": "The origins of HTML were humble and straightforward. A basic valid document could appear as a simple structure. As HTML 2.0, the first standardized version, emerged in 1995, a more formalized document structure came to be expected. This included a DOCTYPE declaration, head and body sections, and other components. Over time, the web has vastly evolved while adhering to a principle: 'Don’t Break The Web.' This principle ensures that a website from HTML's inception should work seamlessly in modern browsers despite the passage of time. However, preserving this compatibility can limit the ability to introduce new functionality without risking existing sites. HTML documents often include certain elements that dictate functionality. If these elements are present, the new functionality is utilized; otherwise, the older functionality takes precedence. This practice results in a significant amount of 'boilerplate' code – repetitive code found across nearly every new or maintained site. A typical HTML boilerplate includes options for modern functionality and site-specific preferences. This boilerplate functions as a base structure and reference when creating HTML documents, similar to how I use a CSS reset for my styles. It is particularly opinionated, reflecting my preferences. The boilerplate begins with the document type declaration for the current HTML standard, introduced in HTML 5, to prevent the browser from entering quirks mode. The language attribute defines the document language, which is crucial for automatic translation, typography, and assistive technologies such as screen readers. The charset meta tag, set to UTF-8, is always the first in the head section as it must be within the first 1024 bytes of the document. The viewport meta tag is included to make the site responsive, but initial-scale=1 is not necessary. The page's text scales according to the user's system settings, enhancing accessibility. The page title, shown on various surfaces, is included in the title element. Styles can be imported here to avoid a waterfall effect where stylesheets must be fetched before additional stylesheets. Complex variable fonts are preloaded, served as WOFF2 format, to ensure optimal performance. The og:title and og:description metadata are used for social media embeds, with the og:description often being brief and intriguing to encourage engagement. A favicon, served as an SVG, is an essential branding element, particularly for distinguishing tabs in a browser with multiple open sites.",
  "summary": null,
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}