The HTML5 Specification as PHP Classes
Extended HTMLDocument is a PHP library that provides all HTML elements as PHP classes, thus an object-oriented approach that aligns with the HTML5 specifications. It's aimed at being more flexible, yet compatible with the underlying DOM\HTMLDocument
classes introduced in PHP 8.4.
Why I created this library
This library is inspired by PicoCSS, which is the only CSS Framework, at least that I know of, that does not require CSS classes for it to work. Instead, by relying on plain old HTML5 it accomplished a remarkable clutterless markup. Working with design systems such as Figma and Storybook, I saw the need to apply the same paradigm there, too. Standardize the markup, by generating it. Focus on design and user experience.
This library allows me to auto-generate all the files, I need for HTML5 atoms, molecules and organisms files needed for settting up Storybook for PicoCSS. At the same time standardizing markup. All that should change between projects are styles, molecules and organisms, the actual components.
High-Level Concept
No matter which frontend technologies you use in a project (Twig, Blade, Turbo, React, Vue, Svelte, Next, plain Javascript, etc) - what they all have in common is they all produce HTML. While HTML5 evolves, it's steady if you compare it to changing project requirements, tech stacks or frontend technologies in general.
Reasons to standardize your HTML from a web developers perspective:
- Less Code: You write less code, because you don't have to write the same HTML5 elements over and over again.
- Less Maintenance: If you wanted to add a new accessibility feature in all of your website projects, could you do it in a single place?
- Improved Consistency and Developer Experience: Standardized HTML5 markup across projects, makes it easier to comprehend the HTML.
- Accessibility: Ensuring that the HTML5 markup is accessible, or that it implements highest standards such as WCAG, ARIA by design.
- Flexibility: If you can use standardized HTML, you can also generate other file formats for it such as Twig templates or Storybook stories. If you can generate templates for any technology you want, switching or adding technologies to projects becomes less scary.
- SEO-friendly: If you establish certain standards for SEO (eg. Schema.org), you probably don't want do that over and over again in many websites, but do it once.
INFO
In short, I advocate for using standardized HTML5 markup, in order to having to write less of it and instead generate it. Descriptive, easy to read languages like YAML can help composing compositions of HTML5 elements, such as a search form.