HTML Markup Language

Welcome to Educator.com.0000

This lesson is going to be a brief overview of some of the different markup languages for the Web, and versions of HTML and XHTML.0002

I have condensed all of the versions of HTML, up through 3.2, into one slide,0017

because it wasn't really until after that that they coalesced into a version that really works for the Internet.0022

From the beginning of HTML, which started with Tim Berners-Lee having a little document that just gave some basics of HTML--0031

and you can consider that HTML1, although it was never officially created as a recommendation by any sort of governing body--0039

up through about 3.0, HTML was in a sort of rapid-fire updating process,0047

where implementers of browsers were creating HTML tags--for example, the image tag, and a lot of new things.0055

And there were browser-specific tags: the blank tag, and frames, and a lot of innovation going on.0065

And there was nothing to control it or organize it; and it was just all over the place.0071

There was an official HTML2 version; there was an official HTML3 version.0077

But it didn't really get codified into a standard until HTML 3.2.0082

They were just trying to catch up to all of the innovation that was happening up to that point.0089

And it was causing a lot of problems, as well, because there was not one type of code that you could write that would work in every browser.0093

So, HTML 3.2 was the first real version of HTML that set a standard that everybody could use.0101

And instead of taking the standpoint of trying to upgrade and add a lot of new features,0109

the w3c just wanted to codify the things that were in place already.0116

Tag soup is what people were using up until 3.2, really--and still use, to this day, actually.0124

Tag soup is not an actual version of HTML; it is what we call...basically, bad HTML.0132

It is when you are not aware of which version of HTML you are using.0137

So, it is poorly-written code that doesn't conform to a standard.0140

And it is called tag soup because any element can go anywhere.0144

The example that always gets used is the title tag, which always have to be underneath a child element of the header element.0149

But in tag soup, if you are a new web developer, and you don't really know what you are doing0158

(or you don't care what you are doing), you can put the title tag anywhere in the code.0163

It doesn't have to be in the head; it doesn't have to be in the body; it can just be free-floating.0167

And browsers will look at that and render it, and actually put the title correctly.0171

This is something that a lot of people use.0178

Here is...this is in Chrome, and this is just an example of tag soup.0184

I have this HTML here, and it is good HTML5 right now.0192

But let's mess up a doctype; you can write anything, or even just delete the doctype completely--0196

anything that is not a valid doctype will cause it to be tag soup.0205

You can take the title element, remove it, and put it in completely the wrong place.0209

Font tags are not really in the right place; so let's see what happens when I do this.0216

Refresh it, and nothing happened, because the browser is rendering it in quirks mode.0224

It recognizes that it is tag soup; it sees that things are in the wrong place; and it doesn't render it the way that it really should:0230

you would think, "The title tag is in the wrong place; there should be no title;0239

the font tag is up in the header, where it shouldn't even be showing up in the body."0242

All of this doesn't matter, because it is just rendering it in the best way it can; it does its best guess, and it is very forgiving.0247

Tag soup is actually not something you want to be getting into, though, because you are going to have really inconsistent rendering between browsers.0253

Every browser will render it differently; they try to be forgiving, but it also depends on the version--it will change it between versions.0266

So, this is what we mean when we say 'tag soup'; and it is really something to avoid.0275

If you are writing tag soup, you are doing it wrong.0279

The last note on this is that, even if you do have a valid doctype (in this example here, let's undo back to the beginning)--0286

say I have this title tag, and it is down in the wrong place, but I have a valid doctype here--it is still tag soup,0297

because the browser is going to look at the doctype and try and display the page according to the doctype that is set.0306

And it is going to see that it is wrong--it is not conforming--and it is just going to go into quirks mode.0316

So, your code is not compliant.0321

HTML 4.01 is really what made the Internet, as we know it today, possible.0327

Web 2.0 depends on HTML 4.01.0334

It really did a lot, in terms of making the HTML more semantic and making the Internet work in a way0338

that all browsers could use one piece of code, and you wouldn't have to write multiple versions for each browser.0346

And it helps with accessibility and a lot of things like this.0354

For example, it deprecated presentational elements like font.0359

"Deprecate" means you are not supposed to use it anymore, basically.0362

And HTML 4.01 came in three flavors: strict, transitional, and frameset.0365

These are the doctypes for the three flavors.0371

Now, they included a transitional here, which was to be for people that were upgrading from either tag soup or an older version, like 3.2.0376

And they still were using font tags and other things like this, that weren't quite up to 4.01 par.0387

But they were moving in the right direction, and they wanted to be able to have the browser render it0394

according to the new standard of 4.01, which was much better and not in quirks mode.0400

Transitional is HTML 4.01 that allows a lot of the deprecated elements.0406

Strict does not allow the deprecated elements, so if you have a font tag anywhere in your page, it is going to fail; it is not going to be valid.0411

And then, frameset was specifically for frames, which aren't really important anymore,0421

because nobody uses them; most people are just too annoyed by them.0426

But if you did have a frameset website, you would have to use this doctype--slightly different from the others.0431

After HTML 4.01, the World Wide Web Consortium (w3c) started working on XHTML.0441

And XHTML stands for Extensible HTML--Extensible Hyper Text Markup...0448

And it is actually just the same as HTML 4.01 (XHTML 1.0 was), but they implemented XML syntax.0455

XML is a language that is very common in computers, and it is very old, as well.0466

And by using this syntax, it made the Internet more compatible with a lot of different programs.0473

So, the major advantage was that, if you had XML-formatted documents that you wanted to include in your website, you could put them directly in.0482

And because it was valid XML, then it would parse right through it, and it would include it as part of the document.0493

SVG images and MathML are probably the most common examples of that, although actually, they are used fairly infrequently.0500

And that is probably due, at least in part, to some problems with XHTML that I will talk about in a bit.0511

The other things with XHTML are that XHTML needs to be sent with its own MIME type, a special XHTML MIME type;0518

and it enforces stricter syntax; so a lot of people really liked that XHTML would throw an error0525

directly onto the page if you, for example, forgot to put a closing tag on an element,0532

or if there was some other minor problem--there was a nesting problem, for example.0538

Anything like that could throw an error, and it would show up right away, and you would have to fix it.0544

So, it was very unforgiving; you couldn't get tag soup with XHTML.0549

If you wrote tag soup in XHTML, it would just break.0555

Let's look, really quickly, at an example of some XHTML.0561

This is XHTML; it is actually 1.1, which was a little bit more getting into the XML style of syntax than just 1.0.0566

And this doctype also specifies that it is using MathML and SVG.0579

And then, you will notice: a lot of XHTML websites have this in the top.0586

So, you will just have to copy and paste that to make sure you tell any XML reader0592

that might be reading through your code, other than a browser, what exactly this is and how to render it.0597

You will see: it looks pretty much the same as normal HTML.0603

This is kind of a rare example, in that I am using MathML and SVG, which most XHTML websites that you see will not use, actually.0607

But it is all the same sort of HTML tags you are used to.0618

And then, right here, we have this MathML thrown in; and this is its own sort of thing;0623

so this is following its own rules, and it renders it in a way that the browser can see that it is math.0629

You have this equation set up here, and this browser isn't putting the lines or anything;0640

but you can get very complicated math symbols using MathML.0650

And then, down here, you already saw the image: this is an SVG image--this section right here.0656

And it is in XML, and it specifies these three circles, and the colors are overlapping, and you can see how the colors interact with each other.0661

This is not an image that I have included; I can't right-click on this and save the image.0668

It is an SVG image, so you see it is defining these three circles.0672

Here is the first circle that is red; the second circle right here is blue; and then, it specifies the size and all of these other things.0677

And you can get very complicated with this, as well.0687

This is something you can't do in HTML, because this is XML format.0689

That is an advantage of XML: if you need to be using MathML, you will probably want to use XHTML.0701

Getting to some of the specifics of XHTML syntax (and if you break any of these rules, your page is going to fail to render):0711

the first one is that all XHTML elements and attributes have to be lowercase.0721

So, a lot of people will use uppercase for their tags and lowercase when they are writing;0726

XHTML requires you to use lowercase across the board, except in, for example, attribute names, like anything inside the quotes.0731

And of course, you can capitalize things that are not part of the code, like just a regular paragraph.0739

All elements have to be closed, even void elements.0746

We talked about elements that don't have any content to them--for example, the hr tag.0749

It doesn't have a closing element in HTML.0756

In XHTML, because it has to be valid XML syntax, it requires this closing tag.0758

And there is a shorthand notation where you can put the closing slash right in the opening tag, as well.0764

And you have to put a space here for some compatibility reasons.0772

But this is correct XHTML syntax; it is not correct HTML syntax.0776

So, any HTML up to 4.01--if you have this slash in here, it is going to be tag soup.0782

This was something that I had run into in the past, where if you are working with back-end code0793

that is using XML tools to generate HTML, it is really difficult to get them to generate it in HTML syntax, and not XML syntax.0799

And so, it would be creating a lot of HTML that was using XML syntax with these closing tags, where they weren't needed in HTML.0810

And our pages weren't validating, and it was causing quirks mode to be run, and it was a big mess.0820

And what ended up happening was: we had to go in and change it by hand every single time,0826

because they absolutely could not get the XML tool to remove the slash,0831

because it was XML, and it required the stricter syntax.0838

So, if you are using an XML tool like that, XHTML might be a good thing to use,0843

because then your XHTML will be still valid and syntactically correct, even if it is giving output that is in XML format.0848

Attribute values in XHTML have to be encased in quotes.0860

You are probably used to doing this anyway; it is good practice putting quotes around the values of an attribute.0863

This is actually valid in HTML, to not put the quotes--but in XHTML, it is required.0870

Boolean attributes may not be minimized in XHTML.0876

So, this is sort of a shorthand notation option selected that tells the browser that this would be selected.0880

And it is a boolean attribute, in that its value--you can't say yes or no; you can't say selected=false or selected=no.0888

It is just that if it is there, then it is true; if it is not there, then it is false.0897

And so, the way you have to do this in XHTML is selected='selected'.0901

You don't put selected='no' or false; if it is not there, just all of this--you just leave it out completely.0907

This is XHTML, and it is because you don't have anything like this, where it is just shorthand.0914

Every single attribute has to have the name and the value with an equal sign in between; and then, the value has to be in quotes.0921

And it is strictly enforced.0928

Also strictly enforced is correct nesting: so, in HTML, you might be able to get away with a span tag nesting improperly from this em tag here.0930

See, the em actually begins here and ends here, but the span begins over here, right?0940

That is not allowed in XHTML; you have to nest everything exactly properly,0947

which can also be a problem if, for example, you forget one tag in HTML.0953

It will, if it finds another closing tag to that later, kind of fix it.0958

And you might get away with the page still rendering pretty well.0964

In XHTML, it is going to see that right away; it is going to catch it, and it is going to point it out to you, and you are going to be able to fix it right away.0968

The main problem with XHTML (and this is a big problem) is that it needs to be sent to the browser from the server with this MIME type: application/xhtml/xml.0977

Anything else is incorrect; and the big problem with this is that Internet Explorer, all the way up to version Internet Explorer 8--0992

none of them support XHTML when sent with this MIME type.1003

If you try and do it, it may try and download the page; it will open a little Save dialog, because it doesn't recognize this MIME type.1008

Or it just breaks completely--you don't even get broken code.1016

You get no code; you get no content at all.1020

So, it is 100% broken in Internet Explorer; and the only way around it is that you send it improperly as text/h/html.1022

It is the wrong MIME type; and then, if you send it with the wrong MIME type, then you are getting it, and it is reading it as HTML.1033

And since XHTML is so similar to HTML, it usually renders correctly, and it will display the right way.1041

The problem with that is that you are losing all of the benefits of actually having XHTML as a code,1050

because what is happening is: you are sending it as text HTML, and the browser is reading it as text HTML.1056

It is seeing that it doesn't conform to a valid HTML doctype.1063

It will run into things like those self-closing tags or other things like that, or even just the wrong doctype at the beginning.1067

And it is going to just treat it as tag soup.1076

It may be completely valid XHTML; you may have spent hours and days trying to get this XHTML to be perfectly valid.1081

And it will be, but then as soon as you send it with the wrong MIME type, the browser is going to treat it like tag soup.1090

And you also will run into problems with some of the other benefits that I talked about of XHTML.1097

Now, there are different methods you can use to try and work your way around this,1104

where you can, for example, do content negotiation on the server, where the server asks what type of browser it is.1108

And if it is a browser that supports the XHTML MIME type, it will send it properly MIME-typed (the XHTML MIME type).1117

And then, if it is Internet Explorer, it will send it as text HTML.1124

And there are a lot of other tricks like that that you can employ.1128

They are all very complicated; they don't work 100%; and they all have the common flaw where you are still sending the wrong MIME type to Internet Explorer.1131

And because Internet Explorer just doesn't support it, most people end up just sending it as text HTML,1142

which is really very sad, because XHTML is good.1149

It is not necessarily any better than HTML; it just was its own unique sort of solution to some problems.1153

XHTML2 is actually worse off than XHTML1 and 1.1, because it is not backwards compatible.1164

If you write XHTML1, and then try and give it an XHTML2 doctype, it won't work.1172

If you write XHTML2, it won't work backwards-compatibly, either.1179

So, it is just almost completely useless, because there was no support for it; it broke existing pages; and it was just a big mess.1183

And it kind of had the idea that they were going to do away with all of the problems of the past.1194

They weren't going to worry about being backwards compatible, or tied down by old problems--historical things.1201

They were just going to make perfect code from the outset, the way that it should have been.1205

But it just never caught on, because it didn't work.1210

You would have had to completely redo everything, and it was just too much effort; so nobody ever did it.1216

They actually abandoned development of XHTML2; I don't think it ever even reached a conclusion--the final specification never went through.1223

They abandoned it and decided to put their efforts into HTML5 now.1233

And by "they," I mean the World Wide Web Consortium, W3C.1238

HTML5 is the newest version of HTML; it doesn't have a space between the L and the 5.1244

That is just the way that they are doing it now; they were considering, probably, that now you can do a search for this single term,1255

and it is going to show up (instead of finding every page that has the number 5 and the letters HTML in it).1263

And HTML5 is still in development; it won't be officially, completely done until 2022 (that is when the recommendation is to be finished).1270

But that requires, I think, three working versions; and that is kind of an imaginary date,1283

because, for example, even going back to HTML 3.2, there are some things that never even got implemented from 3.2,1290

just because browsers never got around to implementing them.1299

What matters is that browser vendors and user agents are implementing HTML5 things now--so, it is already usable now.1302

And the date that really matters is that the candidate recommendation status will be attained in 2012,1312

if everything goes according to plan (and it looks like it is on track to do that).1318

In 2012, that basically means that the specification is done; they are not adding to it or changing it anymore.1321

And it is just up to the browsers to continue implementing it and getting it right.1328

But this entire course, I have been teaching as much HTML5 as possible, because you can use it now.1335

And it is being implemented very quickly; in the next few years (probably before 2012), a lot more of it is going to be implemented.1342

So, it is worth learning HTML5 and using it now, although the majority of websites that are mainstream nowadays1350

are going to be using an older version of HTML or XHTML.1358

The last thing that I am going to show you today is how to validate your page.1366

You want to be writing with a specific HTML version (or XHTML version) in mind; otherwise, you are writing tag soup.1372

So, you need to be aware of what is allowed and what is not allowed.1380

I am going to recommend that you just always write in HTML5, because it is by far the best version to date.1384

Something I forgot to mention in this last slide is that HTML5 allows XHTML syntax.1394

So, if you are in a place where, for example, the XML tool is outputting generated code that is XML format,1402

the web page is not going to get confused and break, because you are allowed to have XHTML syntax or HTML syntax.1411

Because you can have both of those together, it really clears up a lot of the problems between XML and HTML; it is a good solution.1422

So, validating: you are going to want to always validate your document, and make sure that it is valid for a certain document type definition.1431

If you are doing HTML5, that is great; if you are doing HTML 3.2, that is fine, as well.1442

HTML 3.2 uses font tags and a lot of other things that I will talk about as being bad.1447

But if you are using that document type, it is OK: it is valid.1453

And there are reasons to be using older doctypes like that: legacy code and things like this.1458

But what is important is that you are valid to a doctype.1467

Now, you still can't just use a validator to get out of work; you still have to understand a lot about what is required in your doctype.1471

For example, there are a lot of semantic things in HTML 4 and 5;1481

for example, the <b> tag--if you are using the b tag as a bold tag in HTML5, you are not using it correctly.1487

And so, validation is just a start to writing good code; it is not the end.1496

But it is also very, very helpful.1503

This is the validator provided by the w3c, and it is very helpful.1507

It will validate all kinds of documents from the early HTML versions all the way up to HTML5,1512

even though, at this point, it is still experimental; and it will be updated with the final version when it becomes a candidate recommendation.1520

So, if we were going to go to the w3c website here, this is what it looks like.1528

And you have three options: you can validate by putting in the URL of your website...1535

So, if we wanted to, right now, we could...let's validate alistapart.com, since they are a website that does a lot of web development and stuff.1543

It has actually failed; it tells you right up here that it is XHTML 1.0; it is a transitional version of that doctype.1555

And it will tell you exactly what the problem is.1565

This is another reason why you really need to understand the version that you are working with,1572

because these problems aren't necessarily that easy to understand.1577

It will give you a good explanation that it thinks might be helpful;1582

but in this case, it looks like there is a paragraph element that is just in the wrong place.1589

You would have to know, for example, where paragraph tags are allowed; you can't just have guess-and-check on this.1599

Let's go back--it is kind of embarrassing that they failed that, but it is probably just a typo that they will be correcting soon.1609

You can also upload a file, if you have it on your hard drive and you haven't put it on the Internet yet.1618

You can just click here and upload.1621

And then, what I find very useful for validating is direct input.1623

Say I have this code right here, this XHTML that I showed you.1629

I am going to copy all of it, including the doctype; and I am going to paste it in and check it.1634

And so, it checks it, and it gives me this nice little green message telling me that I have done it correctly.1643

And it automatically detected that it is XHTML 1.1, based on the doctype here.1650

And it has also looked at the encoding and a lot of other things automatically.1655

And it checks for a lot of different problems.1660

Another thing that you can do on here is use HTML Tidy to clean up your code for you,1664

if you have really messy code--if you have tag soup you are working with.1668

And there are some other options here, but that is the most important thing: just being able to validate.1672

And then, go through; find all of your problems; and then correct them.1681

And then, put it in the validator again; run it again; see if there are more problems; and keep doing that until it is clean.1686

So right now, you will notice: it is good, but it has three warnings.1691

And warnings are things that aren't technically wrong, but might be wrong--1696

for example, no character encoding declared at the document level.1700

That could lead to problems, theoretically, if I haven't declared a character type,1705

and a browser is expecting something, or doesn't know, or maybe I have pasted in the wrong kind.1711

This could lead to an example where you go to a web page, and it just has funny, crazy nonsense, because your character type is wrong.1717

But probably it will be OK; so that is why it is just a warning.1726

And the warnings, you want to look at, and make sure that, if you are throwing a warning,1731

you are doing it intentionally (and not just because you are lazy or you don't know what you are doing).1737

And that is all the versions of HTML and XHTML that are important, up to this point, for developing websites.1741

And it is important, especially, to know the difference between these--even if you are just always going to be coding in HTML5--1752

because you will sometimes run into code that is in another version, and you don't want1758

to get confused when suddenly you see a self-closing tag, or you see a tag1763

that is from an older version of HTML or a newer version of HTML,1767

and if you put it in, it is going to break your version of HTML.1770

It is just important to be aware of some of these.1774

And thanks for watching Educator.com.1776