Exploring HTML Elements and Metadata: A Guide for Web Developers in the Making

The main change that I made to this page was updating the text in this link to Mozilla Developer Network HTML dot. This is to make it a bit clearer for people to actually find more resources.

Because the exercise that I’m doing for myself, it’s pretty much just going through HTML to make sure that I’ve looked at the main things that it has to offer. I’ve done this before over several years of development, but it is important to go through and see if I actually have a relationship to the things that I’m building.

Trying to remember off the top of my head which things I’ve written about. I remember that I wrote something about the HTML head element contains metadata about documents and also contains a document title. This is where the most important script or a style tag should be. Although there are performance implications for when you’re rendering a document. If you have too many styles or too many scripts in your head tag, then that can sometimes prevent the rest of the document from loading. And depending on what you’re trying to do with the document, that might not be what you’re looking to do.

Other thing that I wrote about was the title element, which lives in the head element and it defines the document title, the Mozilla Developer document, pardon? The Mozilla developer docs mention some SEO implications for the title, such as making them unique. Not really just SEO, just some general considerations partially for SEO, but what we’re going to find in this next chapter of technology is that we’re going to have these AI assistance on our desktops that interact with the web the ways that SEO used to, the ways that search engines used to. And with that, we do want to be communicative towards the right systems. So the head element might communicate pretty effectively towards machines and also contain information that humans can parse. And the title should provide useful handles for quickly identifying what a document represents with respect to other documents in a similar domain. I’ll probably, I will definitely be producing more content on those topics because that is pretty important. And the next thing was the body element represents the content of a document. The interesting thing here, I’ll need to format this list, are the attributes. For one, the global attributes, that’s pretty common on all of the elements to contain the global L attributes that can be on an HTML element.

And with the body elements specifically, there are a lot of events that kind of describe what a document can do when a user is interacting with an HTML page. These are the things that you should keep in mind when designing state for your website. When the hash changes, for example, when the topic of a page changes, you can have the on hash change, run something when the document fails to load. For example, if you have this installed as a progressive web application, then you can do something with that. You can consider the concept of transaction history for undoing and redoing. What else? This is going to be relevant for authors, the on before print and on after print. For if you’re printing something, if you’re producing print a bowl media, then those are interesting spaces to consider. That’s three out of 25, I believe, elements. And it went, it took me about four minutes to go into somewhat of detail about that. I’m making this video so people who are in getting into web development know the kinds of content that they should produce if they want to prove that they’ve explored a space. Because I have been showing off my websites, but you don’t actually see the code. And if I’m looking for employment as a web developer, this is the kind of relationship that we’re going to start wondering about. Can you talk about the structures that you’ve used, when you would use them, how they fit into the broader picture of what you’re building, so on and so forth.