Putting it All Together

Help Center HTML Putting it All Together

We’re at a good check-point: we know

Writing Good HTML

Until now we’ve only told you about the HTML tags you need to get a basic site up and running. There are in fact quite a few more tags in the “inline”, “block-level”, and “element” categories. Most of these tags (like <address> for addresses, <cite> for citations, <blockquote> for mutli-line quotes, and many others) do not get much attention. The reason is mostly that the visual styles that these tags garner by default are very easy to achieve using the tags we’ve already discussed (possibly with the addition of CSS). This misses the point of HTML — if something is an address, it should be wrapped in an <address> tag.

That said, there is no way we could cover all the HTML tags. What we would recommend, however, is that you read over the list of XHTML tags available from the W3C (the “World Wide Web Consortium” — the maintainers of XHTML) at this page. Review the list to see what tags exist. We will go on to talk about Tables and Forms and their related tags in coming pages.

The HTML Family Tree

We discussed in some detail on the Page Tags page about the “HTML Family Tree” and how it represents our HTML document and the relationships between the bits of content it establishes.

Before continuing on, grab a pen and a piece of paper and try to produce the HTML family tree for the following HTML document:

<html>
	<head>
		<title>Ryan's Site - Home Page</title>
	</head>
	<body>
		<div>
			<h1>Ryan's Site</h1>
			<h2>Home Page</h2>
		</div>
		<div>
			<h3>Here is a list of my <em>current</em> classes</h3>
			<ul>
				<li>English 101</li>
				<li>Math 101</li>
				<li>Chem 101</li>
			</ul>
		</div>
		<div>
			<a href="aboutme.html"><img src="img.jpg" /><em>About Me</em></a>
		</div>
	</body>
</html>

After doing so, hopefully you’ll arrive at something similar to the following diagram:

tree
Click thumbnail to view full image.

This exercise is twofold. First, it illustrates the importance of <div> tags — without them, this would be an amorphous bunch of nodes extending from one common direct ancestor, the body. That means that our content is not very succinct and is hard to grasp with respect to what relates to what. With the addition of the divs, however, we grouped similar items together. The three key regions are now the page headers, a ul and its associated title (in the form of an h3), and finally a section for a link (which maybe would evolve into a page footer with the addition of more content).

Also notice in the diagram that we do not include the <img/> tag. Say it with me an element tag is just like text. And since we decided a while ago to not put text on our HTML family tree, the logical deduction is that <img/>s also don’t belong on our chart.

Creating Sub-Lists

We’re all very familiar with traditional text outlines where some bits of information have “sub” bits of information. For example:

  • Pink Floyd
    • David Gilmour
    • Rick Wright
    • Nick Mason
  • Bachman-Turner Overdrive
    • C. Fred Turner
    • Blair Thornton
    • Robin Bachman
    • Randy Murray

The relevance here is the proper semantics. There are in fact (three) three ways of achieving this effect. Each of these methods is valid XHTML and each of them is displayed exactly the same way in some web browsers. Can you spot which is the most correct and why?

<ul>
	<li>Pink Floyd</li>
	<li>  <ul>
		  <li>David Gilmour</li>
		  <li>Rick Wright</li>
		  <li>Nick Mason</li>
		  </ul>
	</li>
	[...]
</ul>
<ul>
	<li>Pink Floyd
		<ul>
			<li>David Gilmour</li>
			<li>Rick Wright</li>
			<li>Nick Mason</li>
		</ul>
	</li>
	[...]
</ul>
<ul>
	<li>Pink Floyd</li>
	<ul>
		<li>David Gilmour</li>
		<li>Rick Wright</li>
		<li>Nick Mason</li>
	</ul>
	[...]
</ul>

The “correct” version is the second one. The first version says that the sub-list (the band lineups) are separate list items from the bands to which the lineup belongs. The third version doesn’t even indicate that the band lineups are a part of any sort of list item. The only indication that we have about the lineup being related to the band is their proximity to each other.

The second version, however, includes the band lineup <ul> right in with the same list item as the name of the band. This properly indicates the ancestor <ul> as defining an “unordered list of bands” (if you will) while the descendant <ul> is then defined as an “unordered list of band members.”

This attention to detail is especially important when we talk about CSS. CSS “grabs” things to style based on their relationships. If you want a child menu (a/k/a a “sub-menu”) to be visible when the mouse is over the parent list item, then it’s important that we correctly define the child menu as being a part of the parent list item and not as being a child of the parent list.

Share this page Share