HTML in (Micro)Python

html.py

# Vibe Coded with ChatGPT lol

class Element:
    VOID_TAGS = {
        "area", "base", "br", "col", "embed", "hr", "img", "input",
        "link", "meta", "source", "track", "wbr"
    }

    def __init__(self, tag, attrs=None, child=None):
        """
        Represents an HTML-like element.

        Args:
            tag (str): The tag name (e.g., 'div', 'meta', '!DOCTYPE').
            attrs (dict, optional): HTML attributes. Booleans are handled.
            child (str | Element | list | None, optional): Nested content or elements.
        """
        self.tag = tag
        self.attrs = attrs or {}
        self.child = child

    def _render_attrs(self):
        """Render HTML attributes."""
        parts = []
        for key, val in self.attrs.items():
            if val is True:
                parts.append(key)
            elif val not in (False, None):
                parts.append(f'{key}="{val}"')
        return (" " + " ".join(parts)) if parts else ""

    def _render_children(self, indent, indent_char):
        """Render nested children with proper indentation."""
        if self.child is None:
            return ""
        elif isinstance(self.child, str):
            return self.child
        elif isinstance(self.child, list):
            rendered = [
                (c.render(indent + 1, indent_char) if isinstance(c, Element)
                 else (indent_char * (indent + 1)) + str(c))
                for c in self.child
            ]
            return "\n" + "\n".join(rendered) + "\n" + (indent_char * indent)
        else:
            return str(self.child)

    def render(self, indent=0, indent_char="  "):
        """Render the element to a string with formatting."""
        prefix = indent_char * indent

        if self.tag == "!DOCTYPE":
            doctype_type = next(iter(self.attrs), "html")
            return f"{prefix}<!DOCTYPE {doctype_type}>"

        if self.tag == "document":
            if isinstance(self.child, list):
                return "\n".join(
                    c.render(indent, indent_char) if isinstance(c, Element)
                    else prefix + str(c)
                    for c in self.child
                )
            return ""

        attr_str = self._render_attrs()

        if self.tag in self.VOID_TAGS and (self.child is None or self.child == ""):
            return f"{prefix}<{self.tag}{attr_str} />"

        inner = self._render_children(indent, indent_char)
        return f"{prefix}<{self.tag}{attr_str}>{inner}</{self.tag}>"

    def __str__(self):
        return self.render()

simple_example.py

from html import Element as h

doc = h("document", None, [
    h("!DOCTYPE", {"html": True}),
    h("html", {"lang": "en"}, [
        h("head", {}, [
            h("meta", {"charset": "UTF-8"}),
            h("meta", {"name": "viewport", "content": "width=device-width, initial-scale=1.0"}),
            h("meta", {"http-equiv": "X-UA-Compatible", "content": "ie=edge"}),
            h("title", None, "HTML 5 Boilerplate"),
            h("link", {"rel": "stylesheet", "href": "style.css"}),
        ]),
        h("body", None, [
            h("script", {"src": "index.js"}, "")
        ])
    ])
])

print(str(doc))

slightly_more_complex_example.py

from html import Element as h

blog_page = h("document", None, [
    h("!DOCTYPE", {"html": True}),
    h("html", {"lang": "en"}, [
        h("head", {}, [
            h("meta", {"charset": "UTF-8"}),
            h("meta", {"name": "viewport", "content": "width=device-width, initial-scale=1.0"}),
            h("title", None, "My Blog - Home"),
            h("link", {"rel": "stylesheet", "href": "styles.css"}),
            h("script", {"src": "scripts.js", "defer": True}, ""),
        ]),
        h("body", {"class": "blog home"}, [
            h("header", {"class": "site-header"}, [
                h("h1", None, "My Awesome Blog"),
                h("nav", {"aria-label": "Main navigation"}, [
                    h("ul", None, [
                        h("li", None, h("a", {"href": "/"}, "Home")),
                        h("li", None, h("a", {"href": "/about"}, "About")),
                        h("li", None, h("a", {"href": "/contact"}, "Contact")),
                    ])
                ]),
            ]),
            h("main", {"role": "main"}, [
                h("section", {"id": "featured-post", "class": "highlight"}, [
                    h("article", {"class": "post featured"}, [
                        h("h2", None, "Welcome to My Blog!"),
                        h("p", None, "This is the first post on my awesome blog. Stay tuned for more content!"),
                        h("img", {"src": "welcome.jpg", "alt": "Welcome Image", "width": "600", "height": "300"}),
                        h("a", {"href": "/posts/welcome", "class": "read-more"}, "Read More"),
                    ])
                ]),
                h("section", {"id": "recent-posts"}, [
                    h("h2", None, "Recent Posts"),
                    h("article", {"class": "post"}, [
                        h("h3", None, "Post 1: Exploring Python"),
                        h("p", None, "Python is a versatile language..."),
                        h("a", {"href": "/posts/python-exploration"}, "Read More"),
                    ]),
                    h("article", {"class": "post"}, [
                        h("h3", None, "Post 2: Web Development Tips"),
                        h("p", None, "In this post, we look at tips for building great websites..."),
                        h("a", {"href": "/posts/web-dev-tips"}, "Read More"),
                    ]),
                ]),
                h("aside", {"class": "sidebar"}, [
                    h("section", {"class": "newsletter-signup"}, [
                        h("h3", None, "Subscribe to our newsletter"),
                        h("form", {"action": "/subscribe", "method": "POST"}, [
                            h("label", {"for": "email"}, "Email:"),
                            h("input", {"type": "email", "id": "email", "name": "email", "required": True, "placeholder": "[email protected]"}),
                            h("button", {"type": "submit"}, "Subscribe")
                        ])
                    ]),
                    h("section", {"class": "about-me"}, [
                        h("h3", None, "About Me"),
                        h("p", None, "I'm a passionate blogger who loves coding and sharing knowledge."),
                        h("img", {"src": "author.jpg", "alt": "Author Picture", "width": "150", "height": "150", "class": "author-photo"}),
                    ]),
                ]),
            ]),
            h("footer", {"class": "site-footer"}, [
                h("p", None, "© 2025 My Awesome Blog. All rights reserved."),
                h("nav", {"aria-label": "Footer navigation"}, [
                    h("ul", None, [
                        h("li", None, h("a", {"href": "/privacy"}, "Privacy Policy")),
                        h("li", None, h("a", {"href": "/terms"}, "Terms of Service")),
                    ])
                ]),
            ]),
        ])
    ])
])

print(str(blog_page))