Christos Drogidis

Posted on Dec 2

HTML is Dead, Long Live JML

#webdev #html #jml #programming

Introduction

HTML was the language that built the Web. But today it has become a burden: full of legacy baggage, ambiguities, inconsistencies, and security gaps. Every browser has its own rendering engine, every framework tries to patch the problems, and developers spend countless hours debugging issues that should not exist.

It’s time to say it clearly: HTML is dead.

The future of Web markup is JML (JSON Markup Language).

Why HTML Can’t Continue

Legacy baggage: Decades of backward compatibility.
Ambiguity: Tags with unclear or context‑dependent behavior.
Security: Inline scripts, injection, parsing quirks.
Inconsistency: Different results across browsers.

What is JML

JML is a new markup language that:

Uses JSON‑like syntax for clarity and predictability.
Transforms into DSL and AST for safe parsing.
Produces HTML only when the structure is fully valid.
Provides warnings for structural issues.
Supports HTML5, SVG, MathML, custom elements, ARIA, and more without hacks.

JML Example

HTML Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Profile</title>
    <meta name="description" content="Basic profile page">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preload" as="style" href="./assets/css/style.css">
    <link rel="icon" type="image/x-icon" href="./favicon.ico">
    <link rel="canonical" href="./">
    <script type="text/javascript" src="./assets/js/app.js"></script>
    <style>
      .card { border: 1px solid #ccc; padding: 16px; border-radius: 8px; }
      .name { font-weight: 600; }
    </style>
  </head>
  <body>
    <header id="top" class="site-header">
      <h1>Welcome</h1>
    </header>
    <main>
      <section class="card">
        <h2 class="name">Jane Doe</h2>
        <p data-info="safe">Front-end developer</p>
        <a href="./contact.html" rel="noopener">Contact</a>
        <img src="./assets/img/avatar.png" alt="Profile photo" width="120" height="120">
      </section>
    </main>
  </body>
</html>

JML Code

html:lang('en') {
  head {
    meta:charset('utf-8')
    title {
      `Profile`
    }
    meta:name('description'),content('Basic profile page')
    meta:name('viewport'),content('width=device-width, initial-scale=1')
    link:rel('preload'),as('style'),href('./assets/css/style.css')
    link:rel('icon'),type('image/x-icon'),href('./favicon.ico')
    link:rel('canonical'),href('./')
    script:type('text/javascript'),src('./assets/js/app.js')
    style {
      `.card { border: 1px solid #ccc; padding: 16px; border-radius: 8px; }
      .name { font-weight: 600; }`
    }
  }
  body {
    header:id('top'),class('site-header') {
      h1 {
        `Welcome`
      }
    }
    main {
      section:class('card') {
        h2:class('name') {
          `Jane Doe`
        }
        p:data-info('safe') {
          `Front-end developer`
        }
        a:href('./contact.html'),rel('noopener') {
          `Contact`
        }
        img:src('./assets/img/avatar.png'),alt('Profile photo'),width('120'),height('120')
      }
    }
  }
}

DSL Code

TAG html LANG 'en'
  TAG head
    TAG meta CHARSET 'utf-8'
    TAG title
      TEXT 'Profile'
    TAG meta NAME 'description' CONTENT 'Basic profile page'
    TAG meta NAME 'viewport' CONTENT 'width=device-width, initial-scale=1'
    TAG link REL 'preload' AS 'style' HREF './assets/css/style.css'
    TAG link REL 'icon' TYPE 'image/x-icon' HREF './favicon.ico'
    TAG link REL 'canonical' HREF './'
    TAG script TYPE 'text/javascript' SRC './assets/js/app.js'
    TAG style
      TEXT '.card { border: 1px solid #ccc; padding: 16px; border-radius: 8px; }
      .name { font-weight: 600; }'
  TAG body
    TAG header ID 'top' CLASS 'site-header'
      TAG h1
        TEXT 'Welcome'
    TAG main
      TAG section CLASS 'card'
        TAG h2 CLASS 'name'
          TEXT 'Jane Doe'
        TAG p DATA-INFO 'safe'
          TEXT 'Front-end developer'
        TAG a HREF './contact.html' REL 'noopener'
          TEXT 'Contact'
        TAG img SRC './assets/img/avatar.png' ALT 'Profile photo' WIDTH '120' HEIGHT '120'

Why JML is Safe

Validator: The TJMLValidator class in Ascoos OS halts transformations on syntax errors.
Predictable parsing: No “undefined behavior.”
Visual debugging: Warnings for structural issues.
Independence: Not tied to browser DOM quirks.

JML Studio

JML Studio is the online tool for producing JML documents.

Just like Microsoft Word is the editor for .docx, JML Studio is the editor for .jml.

It offers:

Tabs: Editor, HTML, DSL, AST, HTML → JML.
Export to .jml and .html.
Online preview: JML → HTML conversion for instant verification.

The Vision

JML is not just another language. It is the next markup standard:

Clean.
Secure.
Extensible.
Predictable.

With JML, developers won’t waste time debugging quirks. They’ll build on a language that doesn’t betray them.

Conclusion

HTML is dead. JML is the future.

With JML Studio, you can start creating and testing JML documents today. But the essence lies in the JML language itself: the new secure markup for the Web.

Long live JML.

DEV Community