HTML Tags and Meta Elements

Now that you've done a little bit of coding in our first exercise 1a, you should have this finished file. If for some reason you don't have that file anymore and you want to jump into exercise 1b, we do have a little sidebar at the beginning of each exercise with a ready file. So for example here, there's this ready file, which basically has the same code that is though you had finished the previous exercise.

It's ready to go. But if you're just continuing with this series of exercises, you can keep working in your same file. You don't have to use that unless you're just kind of jumping around between these exercises.

Well, in the last demonstration we talked about some basic tags and we want to learn a couple more tags here. For example, while a heading 1 is bold by default, what if we want to bold or italicize some individual words? So for example, this Redmond, Washington here. If I want to bold that, there was a B for bold tag that we used to use a long time ago and if you still see it, we've kind of shied away from that.

We've done what we call deprecated that tag. When you see that code has been deprecated, it means that there's newer, more preferred code. Deprecation means we still have to keep it around for compatibility sake, but we're saying to please don't use that anymore.

They can't really remove support for things usually or else they would break old web pages, but they're saying, hey, we're deprecating this. We don't like to use it anymore. There's newer, better ways of doing it.

And the reason we moved away from the bold tag is that the bold is just purely visual. Whereas the newer strong tag, which we can wrap around some words. Notice again, we have an opening tag here and then this is the closing tag, which is the same as the opening tag, just with a slash there.

I'm going to drag this or I can cut and paste it over here. Marking these words up to say, hey, these are bold. These are strong.

Now visually, they're going to be bold if you can see, but let's say you can't see very well or maybe you're blind and you are browsing the web. Just because you can't see something be bold doesn't mean that the browser couldn't read it more strongly. When we think about accessibility, we think about everybody that's using the web, some of which have sight, some of which don't or varying different levels of it.

And so if someone doesn't have sight or doesn't have good enough sight and they prefer the webpage to be read to them, there are screen readers which can read web pages. And so screen readers could read something strongly and they could change their intonation so that you could hear it be read in a strong voice or visually it could be appearing strong. So strong is just a more accessible kind of bolding.

Visually, it will be bold, but also screen readers could change the way that they're reading something. We want to make sure that our web pages are accessible to all people, not just those that have sight. And so if I preview this in my browser, which I can do by either right clicking or on the Mac, if you don't have a right click, you could do a control click or two-finger click, let's say on your trackpad.

You can open in default browser there or you can also hit option B on the Mac or ALT B on Windows for browser that opens it up in your default browser and notice that now this text is bold. There we go. Now we could also make something italic as well if we want.

So let's say down here the onion, maybe I want those to be italic so I could wrap that in. Again, we're not going to do I for italic just like we don't do B for bold. Those are the older deprecated versions of things.

And I mentioned those just because you might see somebody doing that and we prefer not to use those anymore. So instead the newer more preferred way is M for emphasis. We can have things be read strongly for bold or visual emphasis would be italics.

Or again, a screen reader could put a different emphasis on the way that they read this. So EM for emphasis and we wrap that around this saying we want to put emphasis on these words. And viewing in the browser, if I hit reload, notice it is now italicized.

So emphasis and strong are two new tags. Moving on beyond tags. When we have these tags, we sometimes want to put other attributes onto things to say something more about something.

For example, this is an HTML page, but within the page there might be different languages. Maybe for various parts. What if one paragraph were Spanish and another part were French and another part was English? We would want to tell browsers that they are those different languages.

For things like if it was ever going to do hyphenation, it would need to know how to hyphenate the words. Also for screen readers to pronounce things properly, it would be good to know the language as well because you pronounce things differently. So there is a language attribute.

And so on any tag, a paragraph, a heading, or the entire page, depending on how many languages you're going to have, you can put an attribute. An attribute is put onto a tag. So there needs to be an existing tag and these tags are HTML, heading one, paragraph, and so on.

And so in the opening tag, not the closing tag, but the opening tag, we can put after the name of the tag, we can put a space and we can put an attribute. And we type in the name of the attribute, equals, and then in double quotes, whatever value we want to put in. So for English, we use en, which is short for English.

If we're doing Spanish, it would be espanol, so es for Spanish. And there's a whole bunch of different abbreviations, which you could look up if you googled HTML language attributes, so you could see what all the different codes are for the different languages. But we're doing English here, so en.

But if you were doing different languages in the page, we could have different language attributes to say, well this paragraph, the language equals, and maybe this is Spanish, so espanol. So that we'd say this is English and this is Spanish, if we were putting multiple languages on the same page. Because you can put that attribute onto any existing tag, you're essentially saying everything in that tag is that particular language.

So often these are abbreviated, so lang is short for language, en is short for English, and so on. But the format is always the same, that there is a tag, there's a space, the name of the attribute, equals, and a value in quotes. Notice how that is contained within the less than, greater than signs, which is part of your opening tag.

That is always the format, and basically that's the format of all HTML. We have tags and attributes, and that's how all of them work. We are going to be learning other tags, we'll be learning other attributes, but in terms of the syntax of the way that we write HTML, that's the language.

Now, let's say I don't want to do this per paragraph, because this whole webpage is English, everything, it's the title, the headings. I don't want to have to go element by element here, which is another way you can refer to these tags as elements. Tags, elements, whatever you want to call them, all the same kind of thing.

Everything in the HTML page, everything, everything is English in this case. So I'm going to go up to the HTML tag and say the language for this entire HTML page is English. And that says everything in the head, everything in the body, everything up until the ending of this, and everything is HTML in this case.

That's wrapping around everything to say everything is English. If you just have one language, you can put that up here. You don't have to put it element by element.

Now, let's learn another tag here, and this is one that's kind of invisible. We're going to see it affect the page, but we're not going to see it directly per se. Like here, when we put a heading, we see it in the page.

When we add a title, we see it. It's a visible thing. We're not going to see this.

We're going to see it affect the page. And let me show you why we need to add this. If I preview this in my default browser, which for me is Chrome, there are some special characters here.

The apostrophe, for example, this is actually a proper apostrophe. It is not a normal apostrophe when you type it in. We are typographically correct here.

If I were just to type in Microsoft's Microsoft, and I do apostrophe s, notice how this one is, and I'm going to zoom in. If I want to make my text bigger or smaller, on the Mac, I can do command plus or minus. On Windows, that's CTRL PLUS (+) or minus.

So command plus or minus on the Mac, CTRL PLUS (+) and minus on Windows. I'm going to make this bigger so we can see it better. Notice how this is curly versus this is straight, and they're going to look different in the browser.

Let me save that. Go back to the browser and reload. And again, I'm going to make this bigger so you can see it better.

Notice how this one is curly and that one's straight. So technically this means foot, and that means a proper apostrophe. We are typographically correct, as we like to say.

Noble Desktop typography rules. We have a page here on our website about typography rules, in case you didn't know it. And if you're not into typography or a Graphic Designer, you wouldn't necessarily know these things.

But this technically, the one that's normally typed in, in coding applications, that's actually a foot mark. This is a proper apostrophe, a correct one. There are keyboard shortcuts that you can hit to enter these in.

They're different if you're on a Mac or a PC. If you're on the Mac, you just hit this keystroke, option shift square bracket, the left square bracket. On Windows, you'd have to hold ALT.

As you're holding ALT on the number pad, on the keypad on the right, you'd be typing in 0146, and when you release ALT, then it will type that in. The HTML code, I would not advise using these codes, because you'd be manually coding them one at a time. It is better to type in the actual character, and then I want to talk about encoding of characters in just a second.

There are other ones like double quotes, where you've got the left quote or the right quote, as opposed to inch marks. Other things like end dashes, em dashes, which are different lengths of dashes, but also anything like copyright symbols, trademark symbols. There's all sorts of things that are not on your keyboard that are special characters.

And for all of those special characters, notice they highlight it in yellow. The reason they highlight that in yellow is because that is a special character, and it might not display properly in all browsers. In particular, Safari has historical ways of displaying special characters, and so they kind of didn't change with everybody else, and they kind of continue to display special characters the way they always have.

And they want us to put in the codes to make sure that it is encoded properly. If I preview this in Safari, I can show you how Safari actually shows an improper character here. Now, technically, historically, this is how all browsers used to work.

And Apple just decided to keep doing the same thing because they didn't want to kind of break the web and change the way the things work. Other browsers have decided to change things, so it's not necessarily that Apple's wrong in this case. They just chose a different path.

But the point is, different browsers might render special characters differently. Regular characters are fine, but special characters like trademark symbols, copyright symbols, proper apostrophes and quotes, they might not be displayed properly unless we put in the code to tell them all to use one encoding. One encoding, it's called Unicode.

Unicode is one encoding for all platforms. So Android, iOS, you know, Macs, PCs, all browsers would all display the same way. This is additional information for the webpage to tell the browser how it's to be rendered.

And so there is something called metadata. If you're a photographer or do anything with digital cameras, you might know that there's metadata saved into photos where it says, did the flash fire? What was the aperture? What was the shutter speed? You know, that sort of thing. And metadata is just extra information about a file.

And so metatags are additional information about a file. There are various different metatags that you can use, but they're all a metatag here and they have an attribute. Now the metatag does not actually have a closing tag.

We don't end the metatag. Notice how it doesn't want to end that tag. We don't end the metatag because there's nothing to mark up.

We're not saying this is meta, like what would you put inside of that? There's no metadata there. It just inserts something that doesn't previously exist. So this tag does not have an ending tag, just as the start and ending of the opening tag here.

But it does have an attribute. And the attribute we're using is charset, which is short for character set. UTF-8 is the code for Unicode.

I don't know who named that, but U as in Unicode. This says encode all of our special characters in the same way for all platforms. By adding this, it'll make sure that all of our browsers across all platforms display special characters properly.

That way we don't have to manually encode every single individual character. You just put this in and it takes care of all your special characters everywhere throughout the webpage. We put it very early in the head because it needs to make sure that before it gets those special characters that it knows how they were encoded.

We always want to make sure we put that before things like the title, which might contain special characters. And it needs to know how they were encoded before it actually gets to those. So always need to make sure that's right inside the head right after that before the title comes.

I'm going to save that and preview this back in Safari. Because you had seen that before that it was messed up and now, oh look at that, it displays properly. Now Safari is correct.

And also all the other browsers would also be correct. You wouldn't really actually see any difference in the other browsers. If I do preview this in Chrome, you're not going to see a difference because it already was correct.

But this just makes sure that all browsers on all platforms all display this correctly. I know that is something that definitely fixes Safari. It might also affect other browsers as well.

But it's the best practice that we always put that in in all of our web pages to ensure that they are encoding our special characters properly. Let me explain one more tag for this exercise. At the beginning of every document you want to add a doc type.

So doc type and saying this is HTML. It's a very simple tag, but it's very important and it does not have an ending tag. It's just as a start tag and it has to be the very first tag before the HTML.

Because before HTML happens we need to say that this is the latest greatest version of HTML. It's using what's called the living standard. Prior to this we had different document types with different version numbers.

Version 4, there was transitional, there was strict. And the idea was that any time a new version of HTML came out that we'd have to upgrade the document type to opt into the new way of HTML working. This became very tedious to go back and update every single webpage we had ever worked on.

And so we now have the forever doc type where we say this opts us into the latest greatest version of HTML. What they call the living standard and new features are coming automatically as browsers are updated. We don't have to do anything to the page.

And it's very important to have this to say that we want all those new features because the lack of a document type actually says I'm a very old webpage from before the days of web standards. And so render me like a very old webpage and don't take advantage of all the latest ways that things should work. So it's very important that we have this document type that it comes first because before any HTML code is entered it needs to know how to render and work with that.

So this is something that you always add to every webpage as your very first tag. Now it's time for you to do this hands-on. So do exercise 1b in the PDF workbook.