Mote Interactive

Tags and Simple XML Tutorial

HTML is Easy-going

After the strictness of XML, you'd be amazed how loosey-goosey HTML is. Pret' near anything will be rendered in a browser because browsers have no lofty expectations about HTML so they'll attempt to display anything.

Try this, for example:

<p>
8000<br>
<a href="#">this</A><br><78789>

It's definitely not valid XML, but your browser won't choke on it, just skip what it doesn't understand and dump the rest on the screen.

HTML is Tags

An HTML file is merely a bunch of XML-like tags. The browser reads those tags and displays the contents on those tags on the screen.

Browsers will display anything, including text without any tags, like this:

Bebop jammin' sandwich 435 :)()( $@$

Your First HTML Tags

<br> means line break. It's probably not the most important tag, but we can see it work in this example:

Bebop <br> jammin' <br> sandwich <br> 435 <br> :)()( <br> $@$ <br>

<p> is a paragraph tag. It's different from the <br> in that it adds space around the paragraph to set it off from other paragraphs, like this.

Bebop <p> jammin' <br> sandwich <p> 435 <p> :)()( <brp> $@$ <p>

In XHTML you'll want to open and close the <p> and <br> tags thusly:

<p class="headline">Basketball Finals</p>

and <br />

The <br> has no closing tag, but it needs that backslash in XHTML.

 

More HTML Tags

The <p> and <br> tags break up text on the page. Here are a few more text display tags:

<strong>bolds the text inside the tags</strong>
<em>italicizes the text, short for "emphasis"</em>
<u>underlines the text</u>

You've seen bulleted lists. They use the <UL> tag (meaning unordered list). You start with an opening <UL> tag, then each of the lines starts with <LI> meaning "list item" or "line item". HTML is strict here and needs you to close this <UL> tag.

<UL>
<LI>Dogs
<LI>Cats
<LI>Mice
</UL>

looks like:

  • Dogs
  • Cats
  • Mice

An ordered list ("<OL>") looks like this:

  1. Dogs
  2. Cats
  3. Mice

Special Characters

If you want to display a French accent acute or a Spanish cedilla, you'll need to learn some special characters. They're codes that the browser recognizes and converts to special characters. They start with an ampersand and end with a semi-colon. The stuff in between is the ID of the character.

eg. &amp; is an ampersand
&eacute; is é
&ccedil; is ç
&copy; is ©

etc.

>>>MORE HTML
MORE TUTORIALS