Custom HTML TagsIntroductionWhy this project?Project StructureProject StyleAccessibilityWhat isn't custom?Welcome to my little test project!Basically, this is a project showing how we might write more semantic HTML. Each tag on this page is a custom HTML tag -- those that aren't required to run it, at least. Styling is done with Tailwind CSS by creating custom components. This allows us to create a minimal HTML front-end, and contain all of the style in our CSS file -- all without using any class names.Why this project?In November of 2020, Jamon Holmgren posted this tweet. In it he poses a question: Why should we use div elemnts with class attributes for styling, when we could simply use custom HTML tags using those same class names?It got me thinking. Why not? We already use custom tags for things like Vue.js, React, and Angular. It stuck in my head, and I started thinking about ways that it could be used in a real world environment.Structure of this projectThe HTML of this project uses primarily custom HTML tags. For instance, the tag this paragraph is wrapped in is a <content-paragraph> tag. The tag for the header of this block is a <content-header> tag.Wherever possible, a custom tag was used. Even when traditional HTML tags may work better. Such as for an h2 in place of a content-header.How this project is styledStyling for this project comes from Tailwind CSS. Behind the scenes this is a Vue.js project, with all the Vue removed. All that's left are the build scripts. Styling is done at the tag level, and uses Tailwind's @apply directive to apply Tailwind styles to tags. This completely separates the styling from the structure, without the need for us to apply any extraneous classes to our HTML.A word about AccessibilityI have thought a lot about accessibility, as it relates to this project. Mainly because I am not an expert in accessibility, and I truly do not want to get it wrong. A lot has been said about custom HTML elements, and the accesibility failures that they pose. To that I say, absolutely. If you ignore accessibility, you will, by default, fail at it. But that does not necessarily have to be the case.The idea behind this project is to keep everything in it's own place. HTML for structure, CSS for style, but what about function? For that, we have JavaScript. Accessibility isn't just one thing, though, it needs to integrate in all areas of a project. Things need to be structured in ways that make sense, styled in ways that are accessible to everyone, and then there is functionality.Each custom HTML element on this page contains a corresponding HTMLElement class in the JavaScript. These classes are used to define their ARIA roles, and any other accessibility attributes that they require. In a larger project, more thought would be put into these, but the current structure works to prove the concept. It is entirely possible to create accessible custom HTML elements, as long as the work is put in.One place that we could start that work is by creating a framework of Accessible-By-Default HTML Elements that could be extended by any project that needs them, but that's a conversation for a different day.What tags aren't custom?For the purposes of this project, the html, head, and body tags are all used. Anything inside of the head area is allowable. Custom HTML tags create a div, which is referencable by that tag. So wherever a div with a class may have been used, a custom tag has been used.Other places traditional HTML tags have been used are all of the anchor tags, as those are required to make the menu function as it should.