SML Coloring Book. 2nd Edition

This is the second edition of the SML Coloring Book. The First Edition is still available online.

In the second edition we present a slightly lengthier example.

Color Chart

ColourNotesApplicability
Dark blueElementSML & XML
GreenAttributeXML
OrangeCommentXML
BlueTextSML & XML

Original Markup

This is the original page. You can view it here. 

<html>
<head>
<title>Rainbow Song</title>
</head>
<body>
<h1>Rainbow Song</h1>

<strong>Authors Note:</strong> I found this song <a href= 
"http://www.theteachersguide.com/Songs/rainbow_songrainbow_purplerainbo.htm">
here</a>. It seemed somehow fitting. :) 
<!-- This is just a comment to myself. --> 

<pre>
Rainbow purple
Rainbow blue
Rainbow green
And yellow too
Rainbow orange
Rainbow red
Rainbow shining over head.

Come and count
The colors with me
How many colors
Can you see?
1-2-3 on down to green
4-5-6 colors can be seen

Rainbow purple
Rainbow blue
Rainbow green
And yellow too
Rainbow orange
Rainbow red
Rainbow shining over head.
</pre>
</body>
</html>

XHTML

The following code shows the page through an XML lens. An element which has only text content is colored as text. An element with mixed content is dark blue. Attributes are green.

<html>
<head>
<title>Rainbow Song</title>
</head>
<body>
<h1>Rainbow Song</h1>

<strong>Authors Note:</strong> I found this song <a href= 
"http://www.theteachersguide.com/Songs/rainbow_songrainbow_purplerainbo.htm">
here</a>. It seemed somehow fitting. :) 
<!-- This is just a comment to myself. --> 

<pre>
Rainbow purple
Rainbow blue
Rainbow green
And yellow too
Rainbow orange
Rainbow red
Rainbow shining over head.

Come and count
The colors with me
How many colors
Can you see?
1-2-3 on down to green
4-5-6 colors can be seen

Rainbow purple
Rainbow blue
Rainbow green
And yellow too
Rainbow orange
Rainbow red
Rainbow shining over head.
</pre>
</body>
</html>

SML

The following code shows the page through an SML lens.

<html>
<head>
<title>Rainbow Song</title>
</head>
<body>
<h1>Rainbow Song</h1>

<strong>Authors Note:</strong> I found this song <a href= 
"http://www.theteachersguide.com/Songs/rainbow_songrainbow_purplerainbo.htm">
here</a>. It seemed somehow fitting. :) 
<!-- This is just a comment to myself. --> 

<pre>
Rainbow purple
Rainbow blue
Rainbow green
And yellow too
Rainbow orange
Rainbow red
Rainbow shining over head.

Come and count
The colors with me
How many colors
Can you see?
1-2-3 on down to green
4-5-6 colors can be seen

Rainbow purple
Rainbow blue
Rainbow green
And yellow too
Rainbow orange
Rainbow red
Rainbow shining over head.
</pre>
</body>
</html>
Unfortunately this all looks a bit monochrome, so I'll use the following syntax to break it apart a bit more. I believe its largely consistent with the Unisyntax proposed by Oren in this message. 
<!ELEMENT node (node)*>
<!ATTLIST node value CDATA #IMPLIED>
The nodes will still be colored according the color scheme given above. I could have included a color attribute, but I didn't want to assume to much concerning the 'unisyntax' and wanted to make the color differences as explicit as possible. I may be pushing the color metaphor a bit hard here, but I believe its that metaphor which is allowing us to take a fresh slant on things... 

<node value="html">
	<node value="head">
	<node value="title">
		<node>Rainbow Song</node>
		</node>
	</node>

	<node value="body>
		<node value="h1">
			<node>Rainbow Song</node>
		</node>
		<node value="strong>
			<node>Authors Note:</node>
		</node>
		<node>I found this song</node>
		<node value="a">
			<node value="href">
				<node>http://www.theteachersguide.com/Songs/rainbow_songrainbow_purplerainbo.htm</node>
			</node>
			<node>here</node>
		</node>
		<node>. It seemed somehow fitting. :)</node>

		<node value="comment">
			<node>This is just a comment to myself.</node>
		</node>	

		<node value="pre">
			<node>
			Rainbow purple
			Rainbow blue
			Rainbow green
			And yellow too
			Rainbow orange
			Rainbow red
			Rainbow shining over head.

			Come and count
			The colors with me
			How many colors
			Can you see?
			1-2-3 on down to green
			4-5-6 colors can be seen

			Rainbow purple
			Rainbow blue
			Rainbow green
			And yellow too
			Rainbow orange
			Rainbow red
			Rainbow shining over head.
			</node>
		</node>
	</node>
</node>