HTML Elements Vocabulary

[00:00:00]
>> This is where we usually start on day one, minute number one of a standard Boot Camp type of course. HTML, what does it stand for? And you say the hypertext markup language. And we go great, here's div, here's span and we move on, but this is what I want you to be sure that you know.

[00:00:17]
It's identifying the elements of the webpage. It is not responsible for the display of the webpage and a lot of people do this. In fact just last week, I was watching a video from a front end Boot Camp full stack Boot Camp, where somebody was talking about HTML and changing the HTML.

[00:00:36]
And then saying look, see how it impacts the look of the page. Nothing could be more incorrect. You don't think of HTML as a way to style the page. We can override anything in CSS. And again, that's the whole focus of what we're gonna talk about today. HTML comes with all kinds of hidden treasures for accessibility, search engine optimization, artificial intelligence I think is something we ought to start thinking about.

[00:01:03]
As you mark up a page semantically, artificial intelligence will be better able to digest it. And this is the moment that we pivot from content to code. There's an annual report that comes out. This is the HTTP Archive 2021 State of the Web. And they tell us that there are 112 HTML elements.

[00:01:23]
But 50% of web pages are using 31 or fewer. Protip, five of those are just in the header of the document when you start a new VS code. HTML document is gonna be HTML body, head, meta and title, those five elements are already there on the page for you of those 31.

[00:01:43]
So we're using 28% of our vocabulary. It's like we're toddlers, little toddlers running around. We don't know the entire English language. So we can do better than this, how? If we take a look at how these elements have changed over time, they really haven't. Especially in the last three years, the top elements we like to use are div, span a, li, image, script, paragraph.

[00:02:09]
And then down towards the bottom, you start to see a little bit of a trend. Notice that the i element has fallen off a little bit. I which does not mean icon but Font Awesome would like you to believe that that is true. And so Font Awesome is dropping off probably in favor of SVG.

[00:02:26]
So from the font that is normally there. And option is dropping off the list probably because it's hard to style. Meta is a little bit on the rise probably because of social media images. So we have a vocabulary crisis in HTML. This has always been my assumption that people don't use these HTML elements because they don't know that they exist.

[00:02:49]
If you knew that they existed, maybe you would be more inclined to use them rather than writing all of the workarounds that we do with divs and spans. So that is part of the focus for today. Because people don't know HTML, you wind up seeing like this. This is from HTMHell, great website.

[00:03:07]
Shows you how here's somebody who is retroengineered a list with paragraphs and line breaks as opposed to the unordered list which comes for free in HTML. Here's another guy, Mark Steadman put out this post last week or a week or two ago. And on the right hand side here we have an unordered list with HTML.

[00:03:31]
And on the left hand side, here is how you would have to code that using just divs and spans with all of the various Aria and roles and so forth in order to make it accessible. And this has always bothered me. Why would you go and recode what HTML gives you for free?

[00:03:49]
You wouldn't do that in JavaScript. You wouldn't go and recode one of the functions that come natively with JavaScript. You would just use it because it's there and it works. So why do we feel any do this with HTML? It's all there for you for free. So when you use semantic HTML, you're gonna be able to access interesting CSS selectors.

[00:04:11]
You don't have to apply 25 different classes to a given HTML element to get what you want. Remember that this is all about styling on patterns and not on exceptions. So if we had to think about HTML as a model, it would probably be close to something like a regular expression.

[00:04:29]
We're looking for a pattern somewhere inside of our HTML. When that pattern is found, we apply a certain kind of styling. In the background on top of that, we have a whole series of if statements that are talking about what is going to take priority over what along the way.

[00:04:45]
And those are not necessarily written down in a way that's easy to understand, which is what leads to a lot of confusion along the way. So the HTML references here, this is a great webpage to take a look at. We take a look at the HTML page reference.

[00:05:00]
Let me just run through this really, really fast and show you what's on this page. It's gonna show you that our root is called HTML. It's gonna show us elements that appear in the head of the document which are document metadata. There's probably a few in here you haven't heard of before like base which can identify the base URL to use for the all the relative URLs in the site.

[00:05:23]
Then we have our body element. Then we have all these elements that are here for content sectioning. We're gonna talk about these later on today including articles and aside and nav and section and all the rest of that. The content ones for text are really interesting and a lot of fun.

[00:05:40]
You'll find all kinds of interesting things in here. We're gonna talk about several of these today, not quite all of them. There's also inline elements that are useful for identifying parts of code, including things like cite, code, definition, keyboard, mark, various stamp or s for strikethrough. So you can read through all of those.

[00:06:03]
And then we have images and multimedia. Down here, these are ones that will help you display audio and video on a webpage. Some of these are a little bit older like area and map which have to do with clickable images. Back in the old days when we used to do a lot of layouts, we had a great big huge image.

[00:06:18]
It had clickable areas. And we programed that in Dreamweaver. Unfortunately, that technology is not responsive. You'd have to pair it with JavaScript in order to make the clickable area respond with screen size. Back in the old days we didn't have to worry about that. So that's what those are for.

[00:06:37]
We also have a few that are here for embedded content including things like iframes and objects and so forth. There's a few for SVG and MathML. So SVG, you're probably familiar with. Scalable vector graphics, we're gonna do a little bit with those later on today. MathML is the math markup language.

[00:06:58]
It's a whole separate language. If you wanna put math online and mark it up, that's a whole separate thing to take a look at. We have a few for scripting that are here. We have a few for editing. We have all our tables. We have all our forms.

[00:07:12]
We have interactive elements like details, everybody's excited about details in summary. And dialogue, notice it's a very small part of the HTML. And a few that are here for web components like slot and template. Then there's a few that are deprecated. So I just wanted to point this out to you that look, there's a huge page here that just puts it all in summary.

[00:07:33]
You can just scroll through this thing. It's very straightforward to take a quick peek at what is available in terms of HTML elements. Maybe you can learn one every day or every week if that's too much.