HTML Elements Q&A

[00:00:00]
>> How does one remember all of these elements?
>> Yeah, how does one remember all these elements? It's a great question. And of course, practice is the best way to use it. Just like when you learn a new vocabulary word in English, or your native language, then you have to start using it in a sentence and using it more and more in order to remember it.

[00:00:18]
So it's the ones that we tend to remember that are the ones that we use. So that is why I encourage you to do something like in your weekly staff meeting, or your weekly standup, rotate around the room. Have somebody different every time present a new element. And it can be literally a two-minute presentation, this is the element, this is what it does, here's how, some sample content where we might use this element.

[00:00:45]
And maybe periodically, maybe every month, you could start reviewing those particular types of elements. You could make a little code pen. You could write yourself references for quick lookup inside of your development team. So really, it's just a matter of making a little bit of effort. Once you get into the habit of thinking about what is the right element to markup this content, you'll find that it starts to come naturally, just like anything else that you do in programming.

[00:01:16]
Yeah, Mark?
>> Will you talk about the meta elements that we include in our webpage, specifically the use of the Open Graph, OG meta elements?
>> Yeah, I wasn't gonna talk about the meta elements today, mostly because I have an enormous amount to cover. But if you take a look at Facebook as a page for this, it's ogp.me, I believe.

[00:01:39]
It's opengraphprotocol.me is the website. And it has a reference for all of those meta elements, and how you would use the various kinds of Open Graph protocol markup with the meta elements for that kind of thing. So have a look there.
>> Why were semantic tags introduced, and how do browsers decipher the semantic meaning of any tag?

[00:02:03]
>> Okay, so if we go back to 1990, right, the whole purpose of the Internet at that point in time, we had the Iron Curtain up in Europe. We had a CERN, the Institute for Physics there in Switzerland, wanted to share their scientific papers with Soviet scientists and so forth.

[00:02:26]
This is a cause near and dear to my heart. I worked in a science lab in 1992, and I wound up pulling paper copies of research papers, putting them in envelopes and mailing them to researchers all over the world. That's how we did it before the Internet. And so one of the big problems that the web was designed to solve was to allow scientists to share their work online.

[00:02:51]
And as a result, they needed a way. Long before things like CSS were conceived of, we needed a way to make a scientific paper online. So what are the kinds of things that we would need to do that? We need some headings, make things big. This is the title, right?

[00:03:06]
We need some paragraphs. We need some tables to share data. We need a way to put in Images into the page to share our various graphs, and photos, and so forth from a scientific paper. And so that was the original source of those elements, when, basically, when HTML had the display associated with it in the bad old days in the 90s.

[00:03:26]
Later, we split off the whole look of it once the web started to get more commercialized, and people were concerned about how it looked, cuz it was really not pretty. And so then that's where we went down the road for the CSS. But semantic HTML continues to be important, because the browser, for example, the user agent, will have some styles associated with it by default.

[00:03:50]
They may help you in styling the page. And you may also, by building in those particular semantic elements, you will be able to do more with accessibility right out of the box. There's so much less you have to retro engineer. And of course, accessibility is becoming increasingly important.

[00:04:11]
>> How do you know which accessibility properties to use in your HTML?
>> How do you know which accessibility properties to use in your HTML? It depends on what you're trying to convey. It depends on what your screen readers are doing, and it depends what your accessibility professionals are going to tell you.

[00:04:29]
If you start with semantic markup, you're gonna get a lot of the way there. And then on top of that, you can add whatever additional roles, and ARIA elements, and anything else that's required for accessibility purposes. So Frontend Masters has a course on accessibility. I would encourage you to check it out.

[00:04:46]
Jon Kuperman's accessibility version two right here at Frontend Masters, it's part of your subscription. So take a look at that, and that will drill into that into much more detail. I am not an accessibility professional, and so I know broadly speaking what needs to be done on that.

[00:05:00]
But I'm not an expert in that area, I'm not an expert in how screen readers work.
>> Will learning how to use these HTML elements, and possibly making things more dynamic reduce my JavaScript?
>> Yeah.
>> Amount of JavaScript?
>> Yeah, how can this help reduce your amount of JavaScript?

[00:05:23]
Let's just leave that as it will, and that is what today is all about. So you're gonna see how we can really start to reduce amounts of code with good markup and with good CSS.