Form Follows Function 2: Semantic Markup in XHTML

This article will get you coding with some basic Standards-Compliant XHTML/CSS web-design by doing the following:

• Make some basic layout decisions: How will this new web-page look and work, or at least how I envision it now.
• Get a basic knowledge of some common HTML elements/tags.
• Put together some Clean, Semantic HTML markup for a web-document.

This article will get you coding with some basic Standards-Compliant XHTML/CSS web-design by doing the following:

• Make some basic layout decisions: How will this new web-page look and work, or at least how I envision it now.
• Get a basic knowledge of some common HTML elements/tags.
• Put together some Clean, Semantic HTML markup for a web-document.

Rough sketch of sample site

Everybody has a different way of brainstorming ideas for web-designs.  Some start right at the code and work up, while others sketch in notebooks or do mock-ups in DreamWeaver.  Personally, I tend to start in Photoshop, sketching out an idea of how the site should look.  To the left is a thumbnail of the template we’ll use as an example for this series, MorningBliss.  It’s a traditional Blog/CMS design, with a spacious graphic header, fixed-width design, wide content area, and chunky side-bar for navigation links and the like.  It also includes a graphical footer at the bottom of the page (not visible in preview).

Here are some of the areas or features I wanted in this Web-template:

• Multiple entries/articles/blogs shown in the content area.
• Style Header/Titles for each entry.
• First paragraph to be styled differently, as an excerpt or teaser for the main body of the article.
• Styles for article information, such as author, date published, etc…
• Styles for user-comments and quotes.

Although one can theoretically create full-fledged HTML websites in Photoshop, the markup/coding is often sloppy and functionality minimal, at best.  In old crappy table-based web-site layouts frequently the site would be made entirely in Photoshop, then chopped up or “sliced” in ImageReady to make downloading the page easier and exported for use.  That’s not Standards-Compliant design, and we’re gonna do things the right way, from the code up, with the template sketch as our finished goal.

So how is a web-site structured?  If we took took the desired functions mentioned above and sketched out hierarchically what is desired, something like the image to the right might result.  (Using freeware programs like Freemind can be helpful when planning where things will go in a site, or even in planning site navigation.)  You’ll notice that many elements of the structure are nested within others, like Russian matryoshka dolls.  Take the article content element, for instance.  It is contained within an article, which itself is contained in the left-column, in the main-body, in the container, of the body, of the HTML document.  In this respect, the article content element is a descendant or child of all the elements it’s contained within.  The elements that contain the article content element would be called ancestor elements.

You might have astutely noticed that some of the bubbles in that structure-map were highlighted with red text.  These are required elements of a properly made HTML document, in this case, XHTML.  We’ll get to that further on in the article, but give yourself extra-credit if you picked up on this fact!

Installing a freeware Web-Authoring program

To create an XHTML/CSS Standards-Compliant web-site, all you really need is a text-editor.  REALLY!!!  However, design professionals often rely on costly commercial software to provide a nice interface, reference materials, and previews of sites under construction, as well as FTP clients to publish the sites.  Industry standard, of course, is Adobe’s DreamWeaver, probably the best commercial web-design product in the solar system.  It’s available for Mac OS X and Windows, and although the price is certainly merited for a professional web developer or hard-core enthusiast, the price-point is intimidating for the casual learner. Another commercial alternative is Coda, a incredible and affordable program for Mac OS X.  It’s a bargain at $69, compared to the $399 for DreamWeaver, and also includes built-in referencing: The Web Programmer’s Desk Reference.

Free alternatives exist, however, and generally do pretty good job.  Nvu is a WYSIWYG web-design program that will let you work via drag-and-drop or by messing with the code directly.  It has a more stable, unofficial sibling named KompoZer, which is also freely available on multiple OS platforms.  It’s essentially a bug-fix release of Nvu.  Although both are decent enough for the novice, the coding done by these programs is (IMHO) really sloppy, making maintenance or code-level modification of sites more difficult.  The closest I’ve found (recommendations anyone?) to getting even close to DreamWeaver like capability for free is Quanta Plus, which is only available for *Nix systems running the KDE Desktop Environment, clearly a trade-off for Windows users.

For purposes of demonstration in this series, the examples of code I use will be done in the freeware text-editor jEdit.  I know there are those out there that despise this program (right Wes?) but I’ve decided to show examples from it for a few reasons I feel important:

• Syntax Completion – jEdit will finish up tags for me and add closing tags automatically, making it very easy to do web-coding in.
• Syntax Highlighting – jEdit highlights a lot of code, distinguishing between proper tags, broken tags, variables and the like.  This makes it much easier to see what parts are code and pinpoint any broken quotations and the like.  Great for demonstrations.

Coding: Function before Form

So, we’ve got a pretty template, got an idea of what we want in it…

…Now where do we start?

Let’s start on making some Clean Semantic Markup.  This means we’re gonna code the content using the appropriate HTML tags for for appropriate items, paragraphs going into <p></p> tags, level 1 titles into <h1></h1> tags, for instance.  First we’ll discuss XML tags.  Then I’ll present a list of some of the common XHTML tags, the ones we’re gonna use.

XML and XHTML TAGs

Tags are just a method to annotate content.  Think of a Word document in which certain text is bold, there must be something to tell Word where the boldening starts and ends.  In HTML/XHTML, those things are called “TAGs”.  HTML was an old standard that specified which web-tags did what.  It has since been supplanted by XHTML, which is a much more strict form of HTML relying upon XML.  For purposes of instruction here, XHTML looks nearly identical to HTML, and is much more cross-browser compatible.  XML itself looks very similar to old HTML, but is much more versatile.  Lemme give you an example.

Here is some generic data in no particular format:

People

——————————-

First name:		Fred

Last name:		Pestulwinkelish

Nick-name:		Dork


	
First name:		Chester

Last name:		Pestulwinkelish

Nick-name:		Schmuck

	
First name:		Bartholomew

Last name:		Turdmunch

Nick-name:		Putz

Here is how the data could be stored using XML:

<people>
<person>
	<firstname>Fred</firstname>
	<lastname>Pestulwinkelish</lastname>
	<nickname>Dork</nickname>
</person>
<person>
	<firstname>Chester</firstname>
	<lastname>Pestulwinkelish</lastname>
	<nickname>Schmuck</nickname>
</person>
<person>
	<firstname>Bartholomew</firstname>
	<lastname>Turdmunch</lastname>
	<nickname>Putz</nickname>
</person>
</people>

XML surrounds data with opening and closing tags, which I’ll call a Tag set, or Elements.  These tags are a word surrounded by the greater-than symbol “<“ and ending with the less-than symbol “>“.  The <people> tag starts a list of people, and ends with the </people> tag.  Think of these like opening and closing quotation marks.  The closing tag looks just like the opening tag but contains a “/” character within the brackets.

In this particular example there are a few nested tags, where one or more tag-sets are contained within another tag-set.  For instance the tag-set <people>...</people> contains three more sets of tags, <person>...</person> which themselves each contain three more tag pairs, <firstname>...</firstname>, <lastname>...</lastname>, and <nickname>...</nickname>.  As an informal rule, whenever tags or tag-sets are nested inside another tag-set, they are indented to visually demonstrate their relation to to one another.

Another important point to make about tags and tag-sets is that sometimes they have properties.  These are included within the brackets of the tag and are separated by spaces.  These are used heavily in XHTML to help identify parts of a template and to connect style information with the content.  They consist of a keyword, followed by an equals sign (=) and a value, which is in quotation marks. Here’s an example of a paragraph that has been assigned a CLASS to assist it in being styled later on: <p class="infobox">3 New Users Today!!!</p>.

XML is so free-form that you can create whatever tags you want, such as <lovehandles>Wish I had some </lovehandles> or <communismfails>HA!</communismfails>.  There are also tags that don’t require opening and closing tags like <br />, which in XHTML represents a line-break and <img> for placing images.  XHTML is just a special use of XML.  The tags look very similar but are all defined by the WWW Consortium.  Although this means you cannot create your own tags, if you use the ones specified by the Consortium the way they dictate, they should look almost identical between browsers (though this isn’t always the case).  There are also several versions of the rules, which will be discussed next.

TAG!!!  You’re it!!!

We’ve bounced the word “Tags” a few times already, so it’s time to provide practical examples.  Below are some of the most common HTML/XHTML tags and tag-sets.  These will be the ones we use for our demonstration template.

<html>
<head>
	Non-public stuff
</head>
<body>
	Public stuff
</body>
</html>
			

<head>
Non-public
</head>
			

<body>
Public
</body>
			

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
			

Unordered list item 1


Unordered list item 2


Unordered list item 3




	


Ordered list item 1


Ordered list item 2


Ordered list item 3



			

<table>
<tr>
	<th>Row 1, Column 1</th>
	<th>Row 1, Column 2</th>
</tr>
<tr>
	<td>Row 2, Column 1</td>
	<td>Row 2, Column 2</td>
</tr>
</table>
			

p {float: left;}
<samp>p {margin: 10px;}</samp>
<pre>
for {i=0 ; i<100 ; i++}

In addition to the above tags describing specific types of content, there are two tag-sets that are more generic in nature.  These can be used to create your own content types, where applicable, but are intended to provide natural separation of information, where applicable.

Tags, Brief Summary

In short, tags…

• …Are short pieces of XML/XHTML code that distinguish one piece of data from another.
• …Are usually a couple of letters or a short word between < and > symbols.
• …Mostly exist as Tag Sets, having OPENING and CLOSING parts that look almost like each other: <p>...</p>, only the closing tag has a / stuck immediately inside the braces.  There are tags that exist without closing tags, <br/> and <img> as examples.
• …Can be nested, with some tag sets inside the opening and closing tags of another.  Nested tags are usually indented to visually show they are nested.
• …Are considered block-level, like Headers and DIVs, or in-line, like bold, underlined, or italicized text, which can appear anywhere in a paragraph.

A Basic XHTML website

The adjacent image shows the contents of an basic empty XHTML template.  For it to render properly in a web-browser we would name it “pickanyname.html” or “pickanyname.htm”.  Let’s pick it apart line by line to show you what’s going on here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The first line is just the Document Data Type or DTD.  It’s a standard piece of web-coding that tells the browser that the rest of this document is an XML file that contains strictly formatted Web Content, as well as providing a link that the browser uses to pull up the information to format the XML properly.  Most standards-compliant web-templates use one of the first three of the following specifications:

For reasons that are too strange, unusual, and technical, it is usually recommended that you stick to the first 3 DOCTYPES.

Lines 2 and 11 tell the browser where the actual web-document information is, in HTML format.  Specifically, line 2 contains the HTML opening tag, and line 11 is the ending tag.  Remember, ALL web templates should have an opening and closing HTML tag!  You’ll see that inside the opening tag there are two attributes, xmlns and lang.  Since this is an XHTML-STRICT document, the xmlns attribute points to another instruction file to be read secretly by your browser, hosted by the W3C.  More XHTML specifications.  You don’t have to know what it is… just put it in there and things will work smoothly across browsers.  The lang attribute just tells the browser that this particular XHTML content is in Unite States ENGLISH.  You can find a list of other acceptable alternatives at The W3Schools Website.

Nestled in between the HTML opening and closing tags <html></html> are two additional sets of opening and closing tags:

• <head></head>
• <body></body>

The <head></head> tags contain information read by the browser but perhaps not directly shown in the browser window.  In this particular example the HEAD contains the <title></title> tags, which put the web-pages TITLE up in top of the browser window or browser tab.  Commonly in this section of the web document you’ll see tags for <style></style>, which can contain document STYLE information (although we usually want to segregate that to a separate file for reasons previously discussed), or <link rel="" href="" /> tags to include things like web-site title-bar icons or external style-sheets.

In fact, here’s how one could add an external stylesheet and site titlebar icon (the little 16×16 pixel icon that shows up next to the URL of the current web-document in the browser):

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="shortcut icon" href="/favicon.ico" />

In the Photoshop mockup of the site earlier I briefly described some of the features of the site:

• Large graphical header image (including site title).
• Central content area containing one large column for articles and a smaller side-bar to contain navigation links.
• A footer, to contain legal disclaimers, site information, etc…

Let’s go ahead and add these elements by using DIV tags, as shown to the right, all nested in the BODY tags of the document.  Each DIV also contains an ID property and a unique name of my creation.  These will create the natural divisions of the document.  You can also see that in the HEAD tags, the text between the TITLE tags has been changed to My XHTML/CSS Template, just for grins.  I also added two DIVs nested in the DIV with ID of “container”, one for the left-column, which will contain the articles, and one for the right-column, which will contain the navigation links.  Note that as all these modifications are made I’m making liberal use of indentation to show which elements are nested in what.  To demonstrate the nesting of the left and right columns, I’ve highlighted the closing tag for the “container” DIV in yellow.

Using the proper XHTML/HTML tags to encapsulate structural items in our FreeMind mock-up earlier results in coding that looks like what’s on the right. A level one header was inserted in the Header Division: <h1>MorningBliss XHTML/CSS Template</h1> for the site’s title. A series of fake navigation links have been made and nested in the right-column DIV element. Two fake articles have been created in the left-column division using H2 tags for the headers, like we should, and paragraphs for the individual sample paragraphs. One of the paragraphs in each article has a property tucked inside the opening brackets for the paragraph tag: <p class="excerpt">. This will be used for styling information in the next tutorial, but also serves to remind us that this paragraph is special, it’s a brief summary or teaser of the article to hook reader’s interest. In addition, a paragraph was nested in the Footer Division providing a link to the original template author: <a href="mailto:mrbiotech@skinyourscreen.com">mrbiotech</a> and the license in which the template is being released: <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">Creative Commons ANSA3U License</a>

So what does this look like in a browser? The image to the left shows the code we wrote above rendered in Apple’s Safari web-browser. Plain, ‘eh? Don’t get worried yet! Although it’s unstyled, the code we’ve written is Clean Semantic Markup, using the right tags (markup) for the right elements (semantics). The best way to check this is to use a validator, a program to check the XHTML code to make sure everything is written properly and that all the rules are being followed. The W3C offers various on-line validators that will check both on-line XHTML documents (those hosted on a web-server) and off-line XHTML documents (those tested locally on your computer). While developing any web-site, it is strongly recommended you frequently validate your web-document(s). Often a simple mistake like missing a closing bracket or misplaced quotation or forward slash results in a cascade of errors. Validating early and frequently will help pinpoint these errors, facilitating good coding practice.

What’s next?

Basic design principles? Check. Rough idea of the site look? Check. Semantic markup of content? Check.

Next up is styling, which we’re gonna do using some CSS in an external file – right after this commercial break…

Glossary & Terminology

XHTML/CSS Standards-Compliant Design is full of all sorts of confusing words, such as XHTML/CSS Standards-Compliant Design. For your convenience, review purposes, or just plain fun (not in that order) I provide the following definitions. Feel free to make suggestions!

Accessibility

Accessibility refers to a site that uses proper markup

CSS

Cascading Style Sheets are instructions that give STYLE (size, color, font, position, and layout) to the structural definitions of the XHTML.  Incidentally, these CSS instructions can be included inside an XHTML file, or for greater flexibility, stored in a separate file.  You can even write multiple CSS definition files for a given XHTML document and using a few tricks to switch between ‘em.

DTD

Document Type Data, a mandatory part of any XHTML document.  The DOCTYPE is the first line of any modern web-page and specifies which DTD specification to use.  It is required to tell the browser what type of document the web-page is.  If not included, all modern web-browsers will resort to “quirks mode” – a mode for rendering poorly written pages and deal with bad code.  Chances are your page will be borked if the DOCTYPE is excluded.

The DTD instructions tell the web-browser that anything enclosed with bold tags: <b>Bold Text!</b> is to be rendered as bold text.

Standard-Compliance

Wouldn’tcha know, but the web is a bunch of standards, a bunch of digital directions to take code written on a remote computer and let you pull it up rendered virtually identically on your own computer.  These standards, or directions, are established by the World Wide Web Consortium, and organization that states how web-pages should be written, and how your web-browsers should interpret them into what you get on your screen.  Well, ideally, anyway.  Certain groups (Microsoft, cough… cough…) interpret the rules so differently than anyone else that a simple box might not appear the way it should.  But HEY!  That’s Microsoft, and they’ve always played their own game (mrbiotech officially endorses Apple’s Safari, Mozilla Firefox, or Opera and snubblingly wags his anus at the despicable Internet Explorer thingy that barely deserves the moniker “web-browser”).

Tags

We’ll talk about this more in the future, but suffice it for now that TAGS are simply text-things coded into web-pages to make things bold, italicized, underlined, big, small – although they do a WHOLE lot more.  When you write a sentence (in English), you capitalize the first letter of the first word and end the sentence with a period.  Similarly, tags usually have some way of starting and ending, telling the browser “The next couple words are in italics… here are the words in italics… okay, now we’re stopping the ugly italics.”  We’ll get to that later on.  Here’s an example of the tags for boldening text:  This is the bold text.

Semantic Markup

Semantic Markup is… Clean Semantic Markup uses all the right HTML elements or tags for the right things, but also avoids the use of any “extra” or unnecessary tags included just for layout purposes without serving any content/contextual purpose.

XHTML

A set of STRUCTURAL guide-lines for constructing web-pages.  This is the content.  XHTML is a stricter form of HTML and was designed to outright replace HTML.  XHTML is made of XML-tags, or short-bits of code, that define what a piece of content is (paragraph, header, image, etc.).  There are many flavors of XML (eXtensible Markup Language) that can be used for storage of different data types.  WinAmp uses one form of XML to define themes made for it.  HTML is a form of XML.  HTML adhering to DTD standards is XHTML.

XML

Extensible Markup Language – a set of standards used for holding and/or describing information.  XML can be made to carry any kind of data, provided it is instructed how using a Document Type Definition, or DTD.