HTML Text-Level Semantics

Welcome back to Educator.com.0000

We are going to look, in this lesson, at the text-level semantics.0002

The text-level semantics are basically the HTML elements that you have on the paragraph level.0008

This is very similar to what you might be doing if you are working with a very basic word processor, like Microsoft Word,0016

or even something more simple, like WordPad on Windows, and you are marking up italics and bold and things like that.0024

However, the difference is that HTML is a semantic markup language, not a presentational markup language.0033

In a word processor, the primary importance is the way that it looks.0041

You are taking the content of your word processor document, and making it look (with line breaks and bolds and italics and all these different things)...0047

And then, you are usually just going to print it, or send the file to someone who is going to open it up and view it.0058

With HTML, you have pages that are going out into the Internet, and they are being read by a lot of different applications--0064

yes, some people, but also some programs--web crawlers and people using different browsers, user agents...0073

There are a lot of different things that need to be able to understand it, and so the semantics become very important,0081

because the computer software can't understand what the text is, unless it is semantically marked up properly.0088

When I am going through these text-level semantic elements, you won't hear me, very often, saying something like,0101

"This tag makes it look this way," unless I slip up, just out of a bad habit.0109

What you will hear me saying is, instead, "This tag denotes that this content means this."0113

And that is the important thing to keep in mind for all of HTML, but especially going through this,0121

because the temptation is to use a tag that makes it look the way you want it to.0127

That is what CSS is for; the text-level HTML semantics are to mark up the content to indicate what it means, properly.0131

OK, the first semantic text-level element is the anchor element, the a element.0146

And I am not going to go too much in detail on this, because there is a whole lesson that goes more in-depth.0153

But this is, word-for-word, the definition in the HTML5 specification:0158

"If the a element has an href attribute, then it represents a hyperlink;0166

and if it has no href attribute, then the element represents a placeholder0171

where a link might otherwise have been placed, if it had not been relevant."0175

The anchor element has two meanings, based on whether or not it has this attribute here.0180

And it basically just either means that it is a link, or it indicates that a link could go there, even if there is not one.0188

And I will let you look at the anchor lesson if you are wanting to learn more about links.0196

The em element--I will just read the w3 specification definition.0207

"The em element represents stress emphasis of its contents," so it just means it is emphasized, basically.0215

And this emphasis is different than just italics or strong, because the em tag actually changes the meaning of the sentence, based on where it is placed.0225

If you have a sentence, and you emphasize the first word, and then you emphasize the last word--0242

so "I am looking at you" or "I am looking at you"--they have slightly different meanings, based on how you emphasize it.0246

This becomes very important for, say, a screen reader where a blind person is listening to this text be read out.0254

If you are using the em tag properly, they will be able to understand the meaning of the sentences better.0261

You can nest multiple em elements in order to make the stress more and more emphasized.0268

This is especially useful if you have, say, a paragraph where maybe a whole sentence is emphasized;0275

and then, within that sentence, you have a word that is particularly emphasized.0281

Because they can nest, you can use a second set of em tags--put another em element inside the first one and emphasize that word.0286

And it will be doubly emphasized; and you can keep doing that.0295

One thing to note about the em element is that some people have the idea that the old way of doing things was to use the i tag,0300

which people thought of as the italics tag; and the new way of doing things is the em tag, which is the emphasize tag.0309

That is actually not correct: the i tag used to mean italics, and that was just bad semantics, because it is presentational instead of semantic.0315

And the em tag is semantic--so in that sense, yes, the em tag is good and the i tag was bad.0328

However, if you just go through and replace all of your i tags with em tags, you are kind of missing the point.0334

And you are still using it not-semantically-correctly, because the em tag only needs to be used0340

in places where you are emphasizing, not just in places where you are italicizing.0346

So, if you use an em tag like an italics tag, then your text is not semantically marked up.0351

Now, also, the italics tag is not the italics tag; it is the i tag.0359

But people who have learned it the old way think of it as the italics tag.0366

But the i tag has been redefined in the HTML5 specification to have a more semantic meaning; and we will get to that later.0369

For example, WordPress, if you type the i tag in, when it saves it and presents it, will automatically convert it to the em tag.0379

That is not correct, because sometimes the i tag actually is the appropriate semantic tag to use.0388

And if you just automatically change it over to the em tag, then you don't have semantic markup.0394

But actually, it is probably good that WordPress does this, because for the most part, when people use the i tag, they usually mean "emphasized."0400

OK, the strong element--I will read the w3c specification definition--this is it, word-for-word.0411

"The strong element represents strong importance for its content.0418

The strong element does not change the meaning of its contents, as opposed to the em tag, which does."0422

And lastly, you can nest strong elements, just like you can nest em.0427

An example of this might be if you have something that says, "Danger: do not click on this link," or something like that0436

where the word "Danger" is important; it is not emphasized--it needs to stand out, but it is not going to change the meaning of the sentence.0443

If the strong tag is not there, it still means the same thing; it just doesn't get marked up as important if you don't have the strong tag there.0456

If you put the strong tag somewhere else, it is a different word that is important.0464

And I am not going to show you this in a browser, because I want you to be thinking about it semantically, not presentationally.0467

So, I could open up a browser and put a strong tag around some text and show you what it does;0475

but then, you might be thinking in your head, "strong element makes things bold."0479

And that is not what the strong element does.0484

A strong element is not a replacement for the bold tag.0487

And we have a similar thing going on between strong and bold as what I described between the em tag and the i tag.0491

The strong tag is not the new semantic version of the bold tag.0500

It has its own semantic meaning, and the bold tag (I should say the b tag, because that doesn't mean bold)0503

has its own new semantic meaning that they have recently defined.0511

OK, and the small element represents side comments, such as small print.0516

So, this is like fine-print types of stuff.0521

Some examples would be legal disclaimers, caveats, legal restrictions, copyrights, attribution,0526

or if you need to satisfy some licensing requirement--maybe even something like putting a little trademark,0531

or something that is not the main point of what you are trying to convey in the content, but it needs to be there.0537

It is less important--well, it is not necessarily less important; it is just sort of tangential, and it is off-to-the-side to the main thing that you are writing about.0546

So, what that means is that it is really only appropriate for small sections of text.0558

You might think, "OK, small means fine print, so if I have a document that is a big legal document that we need to read--0567

that is the fine print; just use the small tag and mark up the whole page as small."0576

That is not quite the right use there, because the whole page is the main point.0581

If that is the main thing on that page, then it is not an aside; that is the whole thing.0587

Or say you have something like, at the bottom of your page, a lot of footers;0594

you have contact information for how to contact the person that maintains the website and is responsible for the content there.0598

It is kind of a fine-print sort of thing, but better tags to use for that would be the footer tag and the aside tag, because small is really only for an aside.0606

So, here is an example here: I have a paragraph, "Educator.com is the best website on the Internet!"0619

And then, because I am being honest, I am going to give a full disclosure here that Educator paid me to say that.0625

I might be influenced by the fact that I got paid a little bit, right?0634

So, this is what the small element would be used for.0638

It is kind of a legal disclaimer that goes right after something, and it is not...0642

again, it doesn't mean that it is smaller; it is not a presentational thing--it is a meaning thing.0648

The cite element is pretty easily confused, actually, because it sounds like what you would write in an academic paper for your citation.0656

But the real meaning of it for HTML is actually this: the cite element represents the title of a work0666

that is either being quoted or referenced in detail, or mentioned in passing.0673

So, this is the key part right here--"the title of a work."0676

The cite element is not a citation, and it is not that you have quoted something, and then you are putting the name of the person that said it.0683

In fact, the specification clearly states that a person's name is not a work.0693

So, you can't use the cite element to put a person's name, if you are quoting them.0697

But you will use the cite element in a lot of other random cases.0704

Here are a bunch of examples: a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture,0710

a painting, theater production, play, opera, musical, exhibition, legal case report...a lot of things.0719

Sculpture stands out in my mind as a good example, because, say, you have Michelangelo's David.0728

Is it Michelangelo that made that, or was it someone else?0735

But the title of this work is David, right? And it is a sculpture.0739

You wouldn't put the name of the guy who built it; you would put the title of the work.0745

So, here is a little example: "Have you read <cite>War and Peace</cite> by Dostoyevsky?"0752

Notice, his name is not in the cite tag, but the title of the work is.0756

The q element (q would be short for quotation) represents some phrasing content quoted from another source.0767

And on the Internet, that is often going to mean you are quoting from another web page.0775

But it can mean just any other source.0781

Now, there was a bit of debate, earlier on, whether or not the browser should be required to add the quotation marks in for a q tag.0784

And they ended up resolving that argument; now, the browser will put quotation marks in.0794

So, when using the q element, do not put quotes in manually; the q element will put the quotes in for you.0800

And this is a typo here; ignore that--that is from the previous slide.0808

Here is an example--a bit convoluted, but it is important that I have done it this way, because I am talking about the text-level semantics page.0815

So, I am using the cite tag, because I am talking about the title of a work.0826

The work is this page in the w3 website.0832

And I am saying, "This page defines the q element as" and then this is the quotation: <q>some phrasing content quoted from another source</q>.0838

That is actually word-for-word from up here, which is from this page, right?0845

And I have this cite attribute in the q element, which is the reference to where you can find this quote.0851

OK, so it is very convenient when it is a web page, because you are quoting this text from this web page;0862

and you can put the cite right here and cite the exact location.0868

And then, it is different than the cite element right here, which is the title of the work.0873

But in the q element, the cite element means the location of where the quote is coming from.0880

And then, this is just a code element, which I will talk about in a slide or two.0890

When this gets rendered, the browser is going to put quotes in, and you will just see...0897

Probably, actually, it won't even necessarily change the look of this or this too much.0901

Maybe it will make this look italic or something.0908

But again, that depends on the browser; if it is being spoken by a screen reader, it might it say it in a different way,0911

or put a little bit of a "note: a header" behind this.0920

But again, don't put little quotes in here, like this.0926

You might be tempted to put quotes in, because it is a quote; but the q element will do that for you.0929

The abbr element, for abbreviation: this is another one of those elements that is the resolution to a long-standing debate about...0937

There is the abbr element for abbreviations, and then the other type is acronyms.0949

And there is a difference between an abbreviation and an acronym.0962

And there used to be an acronym tag; and so, there was a lot of debate about things that fell in between both of them,0965

and whether or not you should use both the abbreviation tag and the acronym tag,0972

and whether you could just use one or the other.0976

And they ended up solving the debate by just saying, "OK, all acronyms are also abbreviations."0978

"So, get rid of the acronym tag, and just use the abbreviation element."0983

So, we don't have an acronym tag anymore; we just have the abbreviation element.0987

And if you have an acronym or abbreviation, always use this element.0991

The abbreviation element represents an abbreviation or acronym, optionally with its expansion.0995

So, this is how you would do the expansion: you give it a title, and then you expand the abbreviation or acronym.1001

In this case, it is an acronym and abbreviation, and you have the expansion--the full thing.1008

If I have a word that is just shortened, I can put the full word in here.1014

And that is that.1020

The dfn element is for definitions, and the dfn element represents the defining instance of a term.1024

So, this is usually when you are...say, you have a manual of some kind; and the first time...1032

You will see this if you ever read contracts, too.1040

It will define its terms before it continues on.1044

And then, after it has defined the term, it will use those terms again, throughout the rest of the document.1047

And it is understood that it has already been defined at the beginning, and it is using that same definition for that word.1052

So, they will say something like...say if you are getting hired at a company, it might say,1058

"The name of the company" (long official name), and then it will say "hereafter 'us'" or "'the company'" or whatever.1066

And then, whenever you see "the company," you know that it means that whole, long, official-sounding title,1073

with Incorporated and all of the other legal stuff that is needed in there.1079

And you can do that sort of thing with the definition element, because you have the defining instance of the term.1082

The first time that you are defining it, you use this dfn element around the term that is being defined.1089

And then, in that same sentence, you need to define it.1097

So, you can't just use the word the first time, and use the dfn element, and then not define it right there.1100

You have to define it right there.1105

And then, you can give it a title, which has the definition in there, as well.1107

But then, you can give it a name; and later on, in the web page, you can have terms that link back up to this definition and the defining element.1115

So, if you didn't necessarily read the first defining instance of the term, and you are going through and you come across that word,1127

you can hover over it, or (depending on how the browser is implemented) it will either maybe just pop it up right there,1133

as a float tip, or send you back up to the top so you can read it.1139

And it is also semantic; so there are a lot of different ways that it can be implemented, depending on the user agent.1142

The time element is important, because it is very difficult to get a computer to understand the way that normal people talk about time.1152

I might say something like "October 20^th," and if I need a computer or an application or a program to understand1165

what I mean by that, it is going to take a lot of processing power to compute what this really means,1173

because computers use a specific way of arranging it: it is usually yyyy/mm/dd, etc.1182

So, the time element represents either a time on a 24-hour clock or a precise date in the Gregorian calendar.1192

We have to specify, because again, this is the Internet, and it is going to apply to the entire world.1201

There are people that are potentially using different calendars.1208

And it optionally has a time and a time zone offset; this example doesn't have a time zone.1212

But it is just the time tag here; and you surround the actual time or date that you are talking about.1219

Don't let time confuse you, so that you just only think it applies to times (like hours and minutes).1227

It applies to all dates, basically, because the way computers think about time is the number of (I think) milliseconds since this moment in 1971 or 1970.1232

And it just counts them up that way; so this actually makes sense for the way computers think about time,1245

because it is just the number of seconds since this time in the 1970's.1251

And this will put it in a format that it can really understand.1256

You have October 20^th, and then you actually have the computer understanding laid out here,1261

so that, if your website needs to interact with this time, it can do so very easily, without having to parse through all this.1265

datetime is the attribute where you put that in, and it is pretty simple.1274

OK, the code element is very useful, especially if you are describing code on a website,1280

which happens quite frequently, especially in teaching websites--but also just any time you are referencing code--any kind of code.1287

The code element represents a fragment of computer code.1296

It could be an XML element name, a file name, a computer program, or any other string that a computer would recognize.1299

A string just means if you string together a bunch of characters.1305

It is really a variable type (that is where it comes from), as opposed to a number or some other type of variable.1312

It just means that a string of text characters, like all of this--this is a string--1321

so, any string of computer code that a computer would recognize.1328

And it is nice, because it usually will render it in a monospaced font, so that it aligns properly, with indentation and all that.1335

But it also makes it stand out.1347

For example, this word right here--in the slide, I have prepared it so that it has a different font, and it is blue.1349

And I had to do that manually; but if this was HTML, I could have used the code element,1358

and then taken CSS to make it look the way I wanted it to,1363

because then it is clear, as you are reading this, that this is not just me talking about using the word code;1367

but I am talking about a piece of code--an actual fragment of computer code.1374

And so, here is a little example: strong is a tag we talked about a bit earlier.1382

And if we didn't mark it out as code, we might be a little bit confused about what this sentence is saying.1388

The strong element? Why is this element strong, and what are the weak elements?1396

That is confusing; but because it is marked as code, it is clear that it is the element--the actual computer code element, strong.1400

The sub and sup elements, for subscript and superscript, are easily just subscript and superscript; that is it.1413

It is kind of presentational-sounding, but there is some semantic meaning there, as well.1426

And it is important, for example, to indicate, in something like a date like this, like the 10^th of May:1435

you have the th; the computer needs to know that that is this special way of writing it.1442

And it is going to render it smaller and up a little bit.1452

And then, it is going to be able to deal with it the right way.1455

And it may actually even help computers in trying to process the meaning of it.1457

When it sees a number, and then a superscripted th right after it, that is going to indicate to it that it is probably meaning tenth, right?1461

So, computers can still use this data semantically.1470

And then, this is another typo; this should be sub, with a b, like that; erase that...there.1473

Don't spill the H₂O; the 2 is down below--simple.1486

OK, and finally, we get to the i element, which does have a place.1492

It is not deprecated; it is not removed from the HTML5 specification.1498

It has a new semantic meaning from in the HTML4.01 specification, and this is it.1504

The i element represents a span of text in an alternate voice or mood, or otherwise offset from normal prose.1508

Very vague, but it took a lot of time to come up with this definition, because there is a need for the i element.1517

And so, first of all, it is a span of text: so, it is just a string, you could say.1527

It is a piece of text; and you could have other elements inside of it, of course.1534

But it is in an alternate voice or mood.1539

It is always helpful to think of semantics when you are imagining a browser for the blind that will read it.1543

An alternate voice or mood is going to be read differently than just normal.1552

It doesn't necessarily mean something specific, but there is a difference that needs to be communicated.1558

And there are a lot of examples here: a taxonomic designation, a technical term, an idiomatic phrase from another language1567

(like a priori, a philosophy term), a thought, a ship name, or some other prose whose typical typographic presentation is italicized.1575

It is kind of a hodgepodge of different things joined together.1584

But there are a lot of random, disconnected places where you need italics.1588

This is going to take some thought as you are marking things up semantically.1596

The ship name is probably the simplest one.1600

You might be tempted to use the cite tag for a ship name, because it is kind of like the title of a work (the 'title' of a boat).1604

But a boat is not a work, really (unless it is submitted at an art exhibit).1612

But here, it has the italics; when you see it in print, it is usually marked up in italics.1618

That is a good hint that it will be italicized here--but again, not if it is italicized because it is emphasized.1626

And the b element used to be, really, the bold element.1637

It is not the bold element anymore; it is more of, say, the keywords element.1642

But we still have the b, for historical reasons.1647

The b element represents a span of text to be stylistically offset from the normal prose, without conveying any extra importance.1651

The important part of this definition is that it is stylistically offset from the normal prose.1659

and that it doesn't convey..."without conveying any extra importance."1665

So, this is kind of presentational, but it does have a semantic meaning, again,1672

because "stylistically offset" sounds presentational, but it is still something that needs to show up differently--1676

and you don't really have any other elements that would work well for that.1683

When you are considering using a b or an i tag, first think through all of the other text-level semantic elements1692

and see if any of those fit; and if it still doesn't fit into any of those, then you may be a good candidate for the b or the i tag.1701

Some examples for use of the b tag would be keywords in a document abstract1711

(you will see it in a lot of textbooks--the important terms are bolded); product names in review;1717

other spans of text whose typical typographic presentation is boldened.1724

They are using this catch-all language again, of just kind of allowing anything that would normally be bolded,1728

just because of what it is--not based on its emphasis, but because of what it is.1734

That is the sort of thing that you would bold.1741

It is very vague, but put some thought into it, and you will be able to use it appropriately.1742

Here is a little example: this is from if you had one of those old-school text games,1748

where you type what to do and it tells you where you are--describes it.1755

And then, it might say something like, "You enter a small room. Your sword glows brighter. A rat scurries past the corner wall."1761

And in the game, sword and rat would typically be typographically boldened,1768

because you need to know that these are items that you can use in the game.1778

So, you can say something like "use sword" or whatever.1784

So, that is a good candidate for the bold...or, sorry, the b tag.1788

None of the other semantic elements would work in this case; it is more of a keyword sort of thing.1795

That is all of the really important semantic elements that you will be using most of the time.1800

And that is also the end of this lesson.1809

Thanks a lot for watching Educator.com.1811