DISCLAIMER:
Thank you for your understanding.
Copyright © 2015-2025 Alex Stevovich. All Rights Reserved. No permission is granted to use, copy, modify, distribute, sublicense, or create derivative works of this software, in whole or in part, without explicit prior written permission from the copyright holder.
See LICENSE and TRADEMARK.md for more.
Structured, Meaningful HTML Composition
@lydio/semantics provides a structured approach to HTML generation, emphasizing semantic correctness and hierarchical meaning extraction. It extends Lydio’s core capabilities by introducing specialized semantic node classes that mirror real-world document structure.
Github: https://github.com/alexstevovich/lydio-semantics
Lydio (Core): https://github.com/alexstevovich/lydio
- Semantic Elements – Direct representations of
<article>,<section>,<nav>, and more. - Extract Meaning – Convert Lydio structures into meaningful JSON representations.
- Accessible Defaults – Encourages
aria-labelandaltattributes where relevant. - Audit - Automatically audits semantic components for correctness.
npm install lydio
npm install @lydio/semanticsNote lydio is required but not listed as a dependency to simplify installation on private package managers. Please ensure both are installed!
import semantics from '@lydio/semantics';
const mySite = new Site('example.com', 'Example Site');
const homepage = new Page('/', { lang: 'en-US', description: 'A demo page' });
homepage.html.head.append(new Nav());
homepage.html.body
.append(new Main())
.append(new Article())
.p('Welcome to our site!');
mySite.append(homepage);
mySite.audit();
console.log(mySite.toHtml());
console.log(mySite.toMeaning());Site(domain, name)→ Represents a website structure.Page(route, options)→ A structured page with metadata.Html(lang)→ The root<html>element with language attributes.Head()→ The<head>section.Body()→ The<body>section.
Main()→<main>wrapper.Article()→<article>content block.Section()→<section>element.Nav()→<nav>for navigation menus.Header()/Footer()→<header>and<footer>.
H1-H6→ Headings (<h1>to<h6>).P()→ Paragraph (<p>).UL()/OL()→ Unordered and ordered lists.A().href(value)→<a>link with an optionalaria-label.IMG().src(value).alt(value)→<img>with requiredalt.Button().ariaLabel(value)→<button>element witharia-label.
Lydio Semantics extends Lydio’s core auditing and meaning extraction capabilities, providing richer analysis and more structured insights into semantic correctness.
Every semantic node can be audited to provide feedback on best practices, accessibility compliance, and SEO optimizations.
Every semantic node can be converted into a structured JSON representation using toMeaning(). This ensures that content retains its logical intent when processed, analyzed, or repurposed.
const section = new Section();
section.append(new H1().text('Our Services'));
section.append(new P().text('We offer high-quality software solutions.'));
console.log(section.toMeaning());Output
{
"type": "section",
"content": [
{ "type": "h", "depth": 1, "content": "Our Services" },
{ "type": "p", "content": "We offer high-quality software solutions." }
]
}Unlike raw HTML, which can obscure important attributes or dynamically hidden text, structured meaning extraction allows you to see all relevant content at once. This includes:
- ARIA labels, alt text, and metadata that might not be visible in a normal rendered page.
- Nested content relationships, showing how different elements fit together.
- Full textual content, making proofreading and editing easier.
This is particularly useful for:
- SEO analysis
- Accessibility verification
- Large-scale content audits
- Machine-readable site overviews
By pairing layout and meaning as structured data, @lydio/semantics enables new possibilities for web rendering and accessibility:
- Adaptive Browsing – Users could define how they want content presented, separating structure from display.
- Intelligent Content Processing – Meaningful data extraction makes websites more interpretable by AI and assistive technologies.
- Editable JSON-Based Site Representation – Websites could be edited as structured meaning rather than raw HTML.
Copyright © 2015-2025 Alex Stevovich. All Rights Reserved. No permission is granted to use, copy, modify, distribute, sublicense, or create derivative works of this software, in whole or in part, without explicit prior written permission from the copyright holder.
This project is NOT open source. It is exposed to satisfy requirements related to my business. Thank you for your understanding.
See LICENSE and TRADEMARK.md for more.