START A COURSE

The HTML and CSS Blog:

What You Learn in This HTML Lesson

Throughout the site I’ll be talking about XHTML, HTML, and even the new HTML5…all these acronyms, but what’s the difference? Should you be writing your code in strict XHTML, or HTML? In this post you’ll learn what XHTML is, how it differs from HTML4 or HTML5, and all you need to make your code strict XHTML compliant.

XHTML tag

What Is XHTML? Why Use XHTML?

What Is XHTML?

XHTML is a stricter version of the HTML language. XHTML is not a separate language. XHTML is HTML, just a stricter version, a pickier way of writing the code. It sounds good: let’s be more consistent—rather than sometimes putting quotes around values, and sometimes not needing them, wouldn’t it be easier to remember a rule like: always put quotes around “values”?

old cell phone from the bad old days of HTML is big as a house

My old cell phone from 1994. I was so glad to get this upgrade to the smaller model! But anyway, back to XHTML. [image via Daryl Mitchell]

We were using HTML4 in the bad old days when cell phones were rare and large. HTML4 was kind of inconsistent. Some of the tags had closing tags (container tags), some didn’t (the “empty” tags). So, when XHTML came along and Don Johnson seemed fresh in his San Francisco cop sitcom (not the Miami cop sitcom), it seemed refreshing to follow a handful of strict rules to make our code clean and consistent. This was XHTML 1. It was the new millennium. I ditched my landline and fax machine and felt giddy.

Secretly, we were encouraged to write to strict standards because there was talk of changing the language of the web to XML, the Extensible Markup Language, which allows you to make up your own tags. Since XML allows you to invent tags you have to follow strict syntax to clue in the browser about what’s what. The browser looks at your strict syntax to decide what is a tag and what is an attribute or value.

XHTML was just plain old HTML, (no making up your own tags) but following the strict standards anyway. It was hard to explain why we should do this without telling people about XML, especially since the browsers don’t care about these strict standards, and pages display just fine with or without following strict standards.

Then I started teaching HTML classes and taught the clean XHTML standards for years and years (seems like a couple minutes ago). Students seemed to like rules, and there aren’t too many in this stricter standard of XHTML, so it was usually an easy sell. Once in a while I’d have an artist or an engineer taking the HTML class who would notice you could break the rules and it didn’t seem to matter—the web page still displayed just fine. It XHTML strict standards angry bunnywas always a little awkward explaining that the web browsers don’t really care if you’re following the old Don Johnson HTML4 or the new Don Johnson XHTML, it all still works. I had to fall back on vague answers like “if you want a job in web design you need to follow contemporary practices” or “it’s better, someday in the future it will matter”, and “you’ll want your web page to work in the future” (that was a lie, but nobody could check me on that).

So, after a while no one could remember how to spell new millennium, or cared anymore, and HTML5 was suddenly the rage. A standard so infectious it was adopted by the web browsers before the World Wide Web Consortium could even finish ratifying it. New and Shiny, it even had a logo. Suddenly everyone wanted to know if you were coding in HTML5, and did it really work? (more on that topic in upcoming HTML5 blogs).

HTML5 Loves You and You Can Love it Back

HTML5 dropped the whole strict standards thing, and decided the most important thing was to make web pages work, even if humans were not consistent or clean. Have you heard the news? Loose standards are in: don’t worry about self-closing empty tags, and you can skip quotes (sometimes). HTML5 wisely decided not to break the web, so your old XHTML-compliant pages are fine, too; meaning strict standards or loose standards are just fine in HTML5.

Why Code with the Strict XHTML Standards?

While you probably won’t be adding any XML elements to your code if you are just getting started learning HTML, it’s a good habit to start writing your code as XHTML now.

Strict XHTML asaurusBut If I’m Not Using XML, Why Code in XHTML?

Now that you know XHTML is just a pickier version of HTML…why not try it? You’ll get respect among the coding community, even if the web browser doesn’t care. Besides, it doesn’t take much effort to write the cleaner code that XHTML requires. Writing XHTML builds good habits that will leave you with less errors, whether you code in XHTML or HTML.

Even if HTML5 doesn’t require the stricter standards, many people code following them anyway. It just feels right, like sometimes touching the light switch five times just feels right.

Strict XHTML is Simple If You Follow These Five Rules

Here’s five rules to make your HTML XHTML-compliant (think of it as a clean and consistent way to write your HTML code).

1) In XHTML All Tags Are Lowercase

Avoid typing tags in all caps or mixed case. The tag names and attributes should always be lowercase.

Some values can be capitalized, such as font names, the doctype, a file name in the href of a link, or hex values for colors.

2) In XHTML All Tags Must Be Closed

Most tags are container tags and would have a natural closing tag that follows the content being marked up (to indicate where something ends, like the end of the link, or the end of a heading paragraph).

But, in the original HTML specification there were just a handful of non-container tags that didn’t have a closing tag. When following XHTML standards, you can self-close those non-container tags by adding a space and a slash at the end of the tag. Rather than a second closing tag, the tags are self-closed.

Examples:

<br>  HTML, a non-container tag, does not need a closing tag

<br />  XHTML standards, the break tag is self-closed

<img src="images/picture1.jpg" alt="a picture" >  HTML, the image tag is not closed

<img src="images/picture1.jpg" alt="a picture" />  XHTML standards, the image tag is self-closed. Note that the slash is at the end of the tag, after all attributes.

This rule refers to self-closing non-container tags such as the break tag or image tag. (This is sort of a funny way of trying to be consistent by creating an exception in how the slash is typed….causing some to be doomed to a lifetime of wondering: does the slash go before or after the tag name?)

[image via Pinterest]

3) In XHTML You Always Put “Quotes” Around Values

In HTML you could sometimes get away with specifying a value without putting quotes around it. XHTML requires you to be consistent, and use the quotes every time.

Example:

4) In XHTML Attributes Always Have Values

Most attributes will naturally need values to specify something (like width….well, what’s the width? The image tag’s src attribute….well which picture?) so it is unlikely you would skip a value. Occasionally you’ll find an attribute that implies the value, such as a form field using the checked attribute to indicate the check box is checked by default (and the person filling out the form would have to click if they wanted to uncheck the field…”NO, I don’t want to be on your frickin’ mailing list”). In this case, to be XHTML compliant, even if the checked attribute does not appear to need a value in HTML, we will add a value for consistency sake. So, it becomes checked=”checked” in XHTML.

DO NOT WANT

5) In XHTML Tags must Be In Proper Nesting Order

When looking at the order of tags, watch when you have more than one tag in a row, that you end with the same tag you begin with. This is know as “First In, Last Out”. For example, if using <strong> and <em> to create bold and italics, just start and end with the same tag.

Both of these examples are properly nested:

<strong><em>This is bold and italics text.</em></strong>

<em><strong>This is bold and italics text.</strong></em>

That’s it. No really.

OK five steps, but still pretty easy.

That’s all you need to make your code XHTML compliant. Yes, it’s more strict. But do you see how following these five rules will make your regular old-fashioned HTML better and cleaner?

Brain Snack: You try it!

Learn HTML with this Activity:

Copy the following code sample and paste it into your code editor. Check over the code and notice the many inconsistencies and missing or incorrect XHTML compliant details.

Your job is to fix these errors and make this file an XHTML compliant HTML page.

Here is a checklist to help you complete your mission:

1) All tags and attributes are lowercase.

2) All tags must be closed. Self-close empty tags by adding a space and a slash at the end of the the tag.

<br> becomes <br />

<hr> becomes <hr />

<img> becomes <img />

3) Put quotes around all values.

4) All attributes have values.

5) Proper nesting order of tags. Inline tags go inside block-level tags. First-in, last-out when using multiple tags in a row.

When you are finished, you can check your work by looking at the finished file.

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.
  • Pingback: Validate Your HTML Code - Learn HTML with Diane()

  • http://Newhostingcoupons.com/news/ webhosting

    Good post. I learn something new and challenging on websites
    I stumbleupon on a daily basis. It will aalways be exciting to read through articles from
    other writers and use something from other sites.

  • http://Www.bestblackhat.eu Www.bestblackhat.eu

    I am extremely impressed with your writing skills as well as with the layout on your weblog.
    Is this a paid theme or did you modify it yourself?
    Either way keep up the excellent quality writing, it’s rare
    to see a nice blog like this one today.

    • http://www.learnhtmlwithsong.com Diane Presler

      Thank you for your kind words. We modified a WordPress theme, adding a custom header and footer.

  • http://www.mycandylove.com/profil/William6l5p4pv7 zombie diary 2 hacked

    Actually no matter if someone doesn’t understand then its up to other viewers that they will help, so here it happens.

HTML Lessons

©2013 Diane Presler. All rights reserved.