Η HTML είναι νεκρή – Ζήτω το JML

Συγγραφέας: Χρήστος Δρογκίδης Ημερομηνία: 02-12-2025

Εισαγωγή

Η HTML ήταν η γλώσσα που έχτισε το Διαδίκτυο. Σήμερα όμως έχει μετατραπεί σε βάρος: γεμάτη κληρονομιά δεκαετιών, ασάφειες, ασυνέπειες και τρύπες ασφαλείας. Κάθε browser έχει τη δική του μηχανή απόδοσης, κάθε framework προσπαθεί να μπαλώσει τα προβλήματα και οι προγραμματιστές σπαταλούν αμέτρητες ώρες διορθώνοντας ζητήματα που δεν θα έπρεπε να υπάρχουν.

Ώρα να το πούμε ξεκάθαρα: Η HTML είναι νεκρή.
Το μέλλον της σήμανσης ιστοσελίδων το λέμε JML (JSON Markup Language).

Γιατί η HTML δεν μπορεί να συνεχίσει

Κληρονομιά δεκαετιών: Υποχρεωτική συμβατότητα προς τα πίσω
Ασάφεια: Ετικέτες με ασαφούς ή εξαρτώμενης από τα συμφραζόμενα συμπεριφοράς
Ασφάλεια: Inline scripts, επιθέσεις injection, ιδιοτροπίες ανάλυσης
Ασυνέπεια: Διαφορετικά αποτελέσματα σε κάθε browser

Τι είναι το JML

Το JML είναι μια νέα γλώσσα σήμανσης που:

Χρησιμοποιεί σύνταξη τύπου JSON για απόλυτη σαφήνεια και προβλεψιμότητα
Μετατρέπεται σε DSL και AST για ασφαλή ανάλυση
Παράγει HTML μόνο όταν η δομή είναι 100% έγκυρη
Προειδοποιεί για δομικά προβλήματα
Υποστηρίζει HTML5, SVG, MathML, custom elements, ARIA κ.ά. — χωρίς hacks

Παράδειγμα JML

Παραδοσιακός κώδικας HTML

<!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

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

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'

Γιατί το JML είναι ασφαλές

Η κλάση TJMLValidator στο Ascoos OS διακόπτει τη μετατροπή σε οποιοδήποτε συντακτικό σφάλμα
Προβλέψιμη ανάλυση — καμία «undefined behavior»
Οπτικές προειδοποιήσεις για δομικά προβλήματα
Ανεξαρτησία από τις ιδιοτροπίες του DOM κάθε browser

JML Studio – Ο online επεξεργαστής JML

Το JML Studio είναι το online εργαλείο δημιουργίας εγγράφων JML — όπως ακριβώς το Microsoft Word είναι ο επεξεργαστής των .docx, έτσι και το JML Studio είναι ο επεξεργαστής των αρχείων .jml.

Προσφέρει:

Καρτέλες: Editor · HTML · DSL · AST · HTML to JML
Εξαγωγή σε .jml και .html
Ζωντανή προεπισκόπηση: JML to HTML σε πραγματικό χρόνο

Το όραμα

Το JML δεν είναι απλώς ακόμα μία γλώσσα.
Είναι το επόμενο πρότυπο σήμανσης:
Καθαρό. Ασφαλές. Επεκτάσιμο. Προβλέψιμο.

Με το JML, οι προγραμματιστές δεν θα χάνουν χρόνο κυνηγώντας quirks. Θα χτίζουν πάνω σε μια γλώσσα που δεν τους προδίδει.

Συμπέρασμα

Η HTML είναι νεκρή. Ζήτω το JML.

Με το JML Studio μπορείς από σήμερα να αρχίσεις να δημιουργείς και να δοκιμάζεις έγγραφα JML. Η πραγματική δύναμη όμως κρύβεται στην ίδια τη γλώσσα — τη νέα, ασφαλή σήμανση του Web.

Γράφτηκε από τον Χρήστο Δρογκίδη — δημιουργό του Ascoos OS και της γλώσσας JML.