<h2>Use Snap to model it.</h2>

<p><a href="https://i.sstatic.net/x4Z5M.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/x4Z5M.png" alt="Use Snap to model any language"></a> — see this code here <a href="http://snap.berkeley.edu/snapsource/snap.html#present:Username=rdelorenzi&amp;ProjectName=html" rel="nofollow noreferrer">http://snap.berkeley.edu/snapsource/snap.html#present:Username=rdelorenzi&amp;ProjectName=html</a></p>

CC BY-SA 3.0
2017-06-22T10:13:20.330Z
There is an editor called [Pollo](http://pollo.sourceforge.net/) which has a similar aesthetic but is actually designed to edit XML. In addition, you can give it a schema and it will enforce it, which makes it useful for teaching the structure of a real document. I have actually used this with a custom schema for a configuration file which was essentially a basic programming language to teach someone who knew nothing of programming how to create config files without having to worry about syntax errors.
Peter Taylor
CC BY-SA 3.0
2017-06-22T17:26:28.617Z
@ItamarGreen what is the 2nd language? (I see html and snap).
ctrl-alt-delor
CC BY-SA 3.0
2017-06-22T17:27:48.627Z
@richard HTML and XML.
ItamarG3
CC BY-SA 3.0
2017-05-28T12:53:17.927Z
Use a third language to explain one of the other two? Can see why ...
ItamarG3
CC BY-SA 3.0
2017-05-28T12:51:44.987Z
2017-05-28T12:51:44.987Z
ctrl-alt-delor
<p>How did you begin to teach Java to your students? I bet you didn't start by showing them the <a href="https://users-cs.au.dk/amoeller/dRegAut/JavaBNF.html" rel="nofollow noreferrer">Backus-Naur form</a> that the Java parser follows. Instead, you probably introduced a simple <em>"Hello, world"</em> program, and slowly built on that with assignments and projects for the students to work on.</p>

<p>I'm sure you can see the parallel here—teaching XML as a prerequisite for HTML is <strong>not</strong>, in my opinion, a productive or helpful exercise. XML is a rather boring language; it doesn't <em>do</em> anything, so you don't get that instant feedback when you write some code, unlike in HTML, where you can see the webpage unfold as you add elements.</p>

<p>HTML is also simple enough that you can generally pick it up as you go along; explaining that you start an element with <code>&lt;tag&gt;</code> and end with <code>&lt;/tag&gt;</code> should be simple enough, and any mistakes in the markup will be visible when you load the page.</p>

<p>As a general rule, if you want to teach [insert language here], <strong>you probably don't need to teach a different language first</strong>; teaching XML to make HTML easier probably won't give you the benefits you're expecting.</p>

<p>I'm rather partial to the typical <em>"Hello, world"</em> for HTML. Almost certainly, your students will spot that the title is <em>"My First Webpage"</em>, and I imagine that they'll be able to guess <code>&lt;h1&gt;</code> with some guidance.</p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;My First Webpage&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;Hello, world!&lt;/h1&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The general structure should be obvious, and you can reinforce it with some tasks, such as:</p>

<blockquote>
  <ul>
  <li>Add a paragraph (<code>&lt;p&gt;</code>) after the heading.</li>
  <li>Add this image: [insert image link here] using <code>&lt;img&gt;</code></li>
  </ul>
</blockquote>

<p>I would expect that <code>&lt;img&gt;</code> would need some explanation, because it will be the first element with attributes, and it's self-closing, which is different to all the others.</p>

CC BY-SA 3.0
2017-06-22T10:08:59.383Z
If "*any mistakes in the markup will be visible when you load the page*" then you must be using a custom browser, because most of them go out of their way not to cover up mistakes in the markup.
Peter Taylor
CC BY-SA 4.0
2017-05-24T12:30:51.973Z
2018-10-11T19:33:27.793Z
2018-10-11T19:33:27.793Z
Aurora0001
<p>I would avoid starting with something this abstract if the aren't used to it. Doing so might, in my experience, turn away students, especially since the beginning is usually the easiest. If the beginning is hard, they might not understand it. </p>

<p>I would start by explaining the basics like <code>&lt;html&gt;</code>, <code>&lt;body&gt;</code>, <code>&lt;head&gt;</code>, and also images, links, etc. Basically what you need to make a functioning, but not very special site. Then, if you have enough examples of structures like you describe in the question and the students already know these examples, you can show them the general, abstract form. Doing so avoids that they have to learn the examples and the abstract form at the same time.</p>

CC BY-SA 3.0
2017-05-24T07:05:20.457Z
So effectively, going in reverse: teaching `html` structure and then showing that it is actually a particular case of a more abstract structure, which is `xml`? *This suggestion actually makes the lesson plan flow better, so thanks for that*
ItamarG3
CC BY-SA 3.0
2017-05-24T07:10:02.453Z
@ItamarGreen Yes, that is what I suggest. In fact, I think that this is important in most CS: use examples as much as possible, and if possible, use examples students are already familiar with.
wythagoras
CC BY-SA 3.0
2017-05-28T11:59:09.177Z
I think html, head, body are abstract, they don't appear to do anything. Start with the tags that produce, obvious, output.
ctrl-alt-delor
CC BY-SA 4.0
2018-10-16T02:43:50.653Z
Technically, html is an irregular subset case of sgml, while xml is a compliant subset of sgml. Xhtml is a subset of sgml that is fully compliant with the xml  that implements the html concepts. Html is irregular to reduce bandwidth usage on slow acoustic modems, and to minimize typing when web pages were all hand built
pojo-guy
CC BY-SA 3.0
2017-05-24T07:03:16.130Z
2017-05-24T07:03:16.130Z
wythagoras
<p>I think that it's relevant to mention the ADEPT method of teaching here...</p>

<p><a href="https://i.sstatic.net/C8KIk.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/C8KIk.png" alt="ADEPT Methodology"></a></p>

<p>Perhaps one of the best ways I've found to explain these concepts to students is that of human anatomy... head, body, feet (foot).</p>

CC BY-SA 3.0
2017-06-22T17:28:13.763Z
@austin good to see some teaching theory, in an answer.
ctrl-alt-delor
CC BY-SA 3.0
2017-07-21T12:48:14.547Z
I use this system when teaching html to young pupils
Harry
CC BY-SA 3.0
2017-05-30T04:18:55.300Z
Welcome to cseducators. We're glad to have you here! This may be good advice generally, but it isn't really an answer to OP's question, which was asking about advice specific to explaining HTML.
Ben I.
CC BY-SA 3.0
2017-05-30T02:31:25.610Z
2017-10-30T01:17:11.537Z
2017-10-30T01:17:11.537Z
1234567
<p>To elaborate on my comment, I suggest approaching both (but HTML first) by way of the DOM. W3 Schools has a tutorial on both <a href="https://www.w3schools.com/js/js_htmldom.asp" rel="nofollow noreferrer">HTML</a> and <a href="https://www.w3schools.com/xml/dom_intro.asp" rel="nofollow noreferrer">XML</a> using this model for conceptualizing the structure of HTML/XML documents. The XML tutorial stresses the importance of knowing this structure:</p>

<blockquote>
  <p>Understanding the DOM is a must for anyone working with HTML or XML.</p>
</blockquote>

<p>Here is a screenshot of a slide I used when introducing the structure of HTML (thanks to CS50 AP):</p>

<p><a href="https://i.sstatic.net/ZDFhz.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/ZDFhz.png" alt="HTML DOM Screenshot"></a></p>

<p>It's elementary, but with this basic structure it is easy to visualize nesting, siblings, and paths of traversal. Also, from a stylistic perspective vis-a-vis indentation, each child equals one further tab in, so this structure also makes it possible to address code style. </p>

<p>As a result I wouldn't say one needs to know XML before HTML. Instead, one should know the structure common to both to be effective with either.</p>

CC BY-SA 3.0
2017-07-03T02:38:19.230Z
I agree: start students with a minimal skeleton of working HTML. They can load the local file in their browser and see the effect of saved changes by refreshing the browser. But I precede the skeleton with an overview of server/client and HTML/CSS/JS. I immediately follow the skeleton by adding an `<h1>`  element and then modify the start tag with `style="color: #ff00ff;"` and teach inline CSS, reinforcing hex RGB which I taught earlier in a different context.
Bennett Brown
CC BY-SA 3.0
2017-05-28T16:34:00.657Z
I see. I'll definitely use that slide. Thanks!
ItamarG3
CC BY-SA 3.0
2017-05-28T16:07:30.360Z
2017-05-28T16:07:30.360Z
Peter
<h2>Use Russian dolls</h2>

<p>Russian dolls nest inside each other, much line block of code in almost all modern programming language (maybe all post “goto considered harmful” languages).</p>

<p>Russian dolls nest like this <code>[({&lt;&gt;})]</code>, in programming we can also nest like this <code>[][]</code> <em>no nesting</em>, this<code>[()()]</code> or this<code>[()({}{})({&lt;&gt;&lt;&gt;})]</code> </p>

<p>I have used Russian dolls to <strong>help</strong> to explain the idea of nesting.</p>

<p><a href="https://i.sstatic.net/ZOnRW.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/ZOnRW.jpg" alt="Russian dolls, open showing the smallest in the middle "></a> From <a href="http://maxpixel.freegreatpicture.com/Traditional-Russian-Toy-Russian-Doll-Russian-1090697" rel="nofollow noreferrer">http://maxpixel.freegreatpicture.com/Traditional-Russian-Toy-Russian-Doll-Russian-1090697</a> CC0 Public Domain </p>

CC BY-SA 3.0
2017-05-28T12:17:11.570Z
... or next to another doll? How does this relate to using XML to teach HTML?
thesecretmaster
CC BY-SA 3.0
2017-05-28T12:46:57.420Z
This isn't an answer to the question as posed. Can you flesh this out?
Ben I.
CC BY-SA 3.0
2017-05-28T12:52:43.923Z
@thesecretmaster it relates to a comment on the question itself. I suggested adding an answer that explains what he meant, but I wasn't expecting this kind of answer o.o
ItamarG3
CC BY-SA 3.0
2017-05-28T12:16:19.317Z
2017-05-28T12:56:46.253Z
2017-05-28T12:56:46.253Z
ctrl-alt-delor
<p>My students are already familiar with Word documents by the time I get them (Grade 6 is when I start them on HTML) so those are the most common analogy that I use in my classes.  I explain that HTML was invented as a way to share documents over the internet.  I review document parts and compare examples in Word and HTML.</p>

<p>I typically start students with a Hello World example as several other answers have mentioned.  Let students have that quick feedback from their browsers and get into the habit of making stuff.  When it comes to anything more than a simple paragraph or two - especially the potentially messy nested elements like lists and tables - I fall back on that Word analogy.  I consistently refer to HTML files as documents and reinforce the names of document parts that Word and HTML have in common (like headings, paragraphs, images, tables, lists, etc.).  I demonstrate making a table in Word first and introduce the "row", "header", and "data" vocabulary to motivate the tr, th, and td abbreviations and give them meaning.</p>

<p>I also use spatial metaphors (for example, I tell students to make sure their head is "above" their body) and enforce fairly strict indentation rules so that students can see which elements are "inside" each other.  I make sure students open and close tags and elements, and I frequently reinforce "element" and "tag" and related vocabulary words.  I introduce parent/child/sibling a little later and tree diagrams a little later, with the family tree being the most obvious analogy there.</p>

<p>I give students lists of things to check for - for example, are all of their tags closed?  All of their elements?  Are all of their element names spelled correctly?</p>

<p>I basically build up from the practical and familiar towards the abstract and unfamiliar - and over time and practice that structure becomes much more obvious and familiar.</p>

CC BY-SA 3.0
2017-06-18T10:15:36.130Z
2017-06-18T10:15:36.130Z
Neal Zupancic
<p>I am trying to think of a lesson plan about html, and I am looking for a good way to explain the concept of the structure of an <code>html</code> file.</p>

<p>I was wondering whether the subject would be better understood if I firstly described <code>xml</code> in general. What I had in mind is teaching a basic <code>xml</code> block:</p>

<pre><code>&lt;rootElement&gt;
    &lt;element withAttribute="that we can set" scndAttr="there can be more than 1 attribute"&gt;
        &lt;subElement otherAttr="these can also have attributes" /&gt;
    &lt;/element&gt;
&lt;/rootElement&gt;
</code></pre>

<p>and then use this basic block to get into the subject, after which we veer off to <code>html</code> specific <code>xml</code>s. </p>

<p>The students are at a beginner's level, and HTML is the first technology with a structure like this that they will encounter, So this lesson is meant to introduce them to HTML.</p>

<p>So, is knowing the concept and basics of <code>xml</code> structure important and necessary for understanding <code>html</code>?</p>

CC BY-SA 3.0
2017-05-24T06:53:11.873Z
What level is this? Are the students familiar with more abstract structures?
wythagoras
CC BY-SA 3.0
2017-05-24T06:54:19.963Z
@wythagoras their level is the most basic `java`. By that I mean only `Scanner` and the simplest of things. I will update the question to add this information.
ItamarG3
CC BY-SA 3.0
2017-05-26T00:52:56.230Z
Do you teach the DOM? I found that the tree-like structure and the accompanying visualization helped illustrate how HTML works.
Peter
CC BY-SA 3.0
2017-05-26T11:08:29.487Z
@Peter I didn't think about showing it like that. Thanks
ItamarG3
CC BY-SA 3.0
2017-05-28T12:01:09.353Z
Explain the structure: opening and closing tags; nesting (Russian dolls). Then use an editor that automatically adds closing tags, and indentation.
ctrl-alt-delor
CC BY-SA 3.0
2017-05-28T12:01:51.797Z
@richard Oh, the Russian dolls analogy is one that I have never thought of. Thanks! And if you think that you or fellow educators will find this question useful I suggest adding your own answer, as we need a critical mass of answers on this site.
ItamarG3
<lesson-ideas><introductory-lesson><html><xml>
Explaining basic html structure
# Explaining basic html structure

(Asked by: username_0 on 2017-05-24)

I am trying to think of a lesson plan about html, and I am looking for a good way to explain the concept of the structure of an html file.
I was wondering whether the subject would be better understood if I firstly described xml in general. What I had in mind is teaching a basic xml block:

    
        
    


and then use this basic block to get into the subject, after which we veer off to html specific xmls. 
The students are at a beginner's level, and HTML is the first technology with a structure like this that they will encounter, So this lesson is meant to introduce them to HTML.
So, is knowing the concept and basics of xml structure important and necessary for understanding html?

**Tags:** lesson-ideas, introductory-lesson, html, xml

> **Comments:**
> **username_1**: What level is this? Are the students familiar with more abstract structures?  
> **username_0**: @username_1 their level is the most basic `java`. By that I mean only `Scanner` and the simplest of things. I will update the question to add this information.  
> **username_2**: Do you teach the DOM? I found that the tree-like structure and the accompanying visualization helped illustrate how HTML works.  
> **username_0**: @username_2 I didn't think about showing it like that. Thanks  
> **username_3**: Explain the structure: opening and closing tags; nesting (Russian dolls). Then use an editor that automatically adds closing tags, and indentation.  
> **username_0**: @richard Oh, the Russian dolls analogy is one that I have never thought of. Thanks! And if you think that you or fellow educators will find this question useful I suggest adding your own answer, as we need a critical mass of answers on this site.  

---

## 7 answers

### Answer by username_5 on 2017-05-24. Score: 9 | Accepted answer

How did you begin to teach Java to your students? I bet you didn't start by showing them the Backus-Naur form that the Java parser follows. Instead, you probably introduced a simple "Hello, world" program, and slowly built on that with assignments and projects for the students to work on.
I'm sure you can see the parallel here—teaching XML as a prerequisite for HTML is not, in my opinion, a productive or helpful exercise. XML is a rather boring language; it doesn't do anything, so you don't get that instant feedback when you write some code, unlike in HTML, where you can see the webpage unfold as you add elements.
HTML is also simple enough that you can generally pick it up as you go along; explaining that you start an element with  and end with  should be simple enough, and any mistakes in the markup will be visible when you load the page.
As a general rule, if you want to teach [insert language here], you probably don't need to teach a different language first; teaching XML to make HTML easier probably won't give you the benefits you're expecting.
I'm rather partial to the typical "Hello, world" for HTML. Almost certainly, your students will spot that the title is "My First Webpage", and I imagine that they'll be able to guess  with some guidance.

    
        My First Webpage
    
    
        Hello, world!
    


The general structure should be obvious, and you can reinforce it with some tasks, such as:


Add a paragraph () after the heading.
Add this image: [insert image link here] using 


I would expect that  would need some explanation, because it will be the first element with attributes, and it's self-closing, which is different to all the others.

> **Comments:**
> **username_4**: If "*any mistakes in the markup will be visible when you load the page*" then you must be using a custom browser, because most of them go out of their way not to cover up mistakes in the markup.  

---

### Answer by username_1 on 2017-05-24. Score: 7

I would avoid starting with something this abstract if the aren't used to it. Doing so might, in my experience, turn away students, especially since the beginning is usually the easiest. If the beginning is hard, they might not understand it.

I would start by explaining the basics like , , , and also images, links, etc. Basically what you need to make a functioning, but not very special site. Then, if you have enough examples of structures like you describe in the question and the students already know these examples, you can show them the general, abstract form. Doing so avoids that they have to learn the examples and the abstract form at the same time.

> **Comments:**
> **username_0**: So effectively, going in reverse: teaching `html` structure and then showing that it is actually a particular case of a more abstract structure, which is `xml`? *This suggestion actually makes the lesson plan flow better, so thanks for that*  
> **username_1**: @ItamarGreen Yes, that is what I suggest. In fact, I think that this is important in most CS: use examples as much as possible, and if possible, use examples students are already familiar with.  
> **username_3**: I think html, head, body are abstract, they don't appear to do anything. Start with the tags that produce, obvious, output.  
> **username_6**: Technically, html is an irregular subset case of sgml, while xml is a compliant subset of sgml. Xhtml is a subset of sgml that is fully compliant with the xml  that implements the html concepts. Html is irregular to reduce bandwidth usage on slow acoustic modems, and to minimize typing when web pages were all hand built  

---

### Answer by username_7 on 2017-05-30. Score: 4

I think that it's relevant to mention the ADEPT method of teaching here...

[![ADEPT Methodology](https://i.sstatic.net/C8KIk.png)](https://i.sstatic.net/C8KIk.png)

Perhaps one of the best ways I've found to explain these concepts to students is that of human anatomy... head, body, feet (foot).

> **Comments:**
> **username_9**: Welcome to cseducators. We're glad to have you here! This may be good advice generally, but it isn't really an answer to OP's question, which was asking about advice specific to explaining HTML.  
> **username_3**: @austin good to see some teaching theory, in an answer.  
> **username_8**: I use this system when teaching html to young pupils  

---

### Answer by username_2 on 2017-05-28. Score: 4

To elaborate on my comment, I suggest approaching both (but HTML first) by way of the DOM. W3 Schools has a tutorial on both [HTML](https://www.w3schools.com/js/js_htmldom.asp) and [XML](https://www.w3schools.com/xml/dom_intro.asp) using this model for conceptualizing the structure of HTML/XML documents. The XML tutorial stresses the importance of knowing this structure:

> Understanding the DOM is a must for anyone working with HTML or XML.

Here is a screenshot of a slide I used when introducing the structure of HTML (thanks to CS50 AP):

[![HTML DOM Screenshot](https://i.sstatic.net/ZDFhz.png)](https://i.sstatic.net/ZDFhz.png)

It's elementary, but with this basic structure it is easy to visualize nesting, siblings, and paths of traversal. Also, from a stylistic perspective vis-a-vis indentation, each child equals one further tab in, so this structure also makes it possible to address code style.

As a result I wouldn't say one needs to know XML before HTML. Instead, one should know the structure common to both to be effective with either.

> **Comments:**
> **username_0**: I see. I'll definitely use that slide. Thanks!  
> **username_10**: I agree: start students with a minimal skeleton of working HTML. They can load the local file in their browser and see the effect of saved changes by refreshing the browser. But I precede the skeleton with an overview of server/client and HTML/CSS/JS. I immediately follow the skeleton by adding an `<h1>`  element and then modify the start tag with `style="color: #ff00ff;"` and teach inline CSS, reinforcing hex RGB which I taught earlier in a different context.  

---

### Answer by username_3 on 2017-05-28. Score: 3

## Use Russian dolls

Russian dolls nest inside each other, much line block of code in almost all modern programming language (maybe all post “goto considered harmful” languages).

Russian dolls nest like this `[({<>})]`, in programming we can also nest like this `[][]` *no nesting*, this`[()()]` or this`[()({}{})({<><>})]`

I have used Russian dolls to **help** to explain the idea of nesting.

[![Russian dolls, open showing the smallest in the middle ](https://i.sstatic.net/ZOnRW.jpg)](https://i.sstatic.net/ZOnRW.jpg) From <http://maxpixel.freegreatpicture.com/Traditional-Russian-Toy-Russian-Doll-Russian-1090697> CC0 Public Domain

> **Comments:**
> **username_11**: ... or next to another doll? How does this relate to using XML to teach HTML?  
> **username_9**: This isn't an answer to the question as posed. Can you flesh this out?  
> **username_0**: @username_11 it relates to a comment on the question itself. I suggested adding an answer that explains what he meant, but I wasn't expecting this kind of answer o.o  

---

### Answer by username_12 on 2017-06-18. Score: 2

My students are already familiar with Word documents by the time I get them (Grade 6 is when I start them on HTML) so those are the most common analogy that I use in my classes. I explain that HTML was invented as a way to share documents over the internet. I review document parts and compare examples in Word and HTML.

I typically start students with a Hello World example as several other answers have mentioned. Let students have that quick feedback from their browsers and get into the habit of making stuff. When it comes to anything more than a simple paragraph or two - especially the potentially messy nested elements like lists and tables - I fall back on that Word analogy. I consistently refer to HTML files as documents and reinforce the names of document parts that Word and HTML have in common (like headings, paragraphs, images, tables, lists, etc.). I demonstrate making a table in Word first and introduce the "row", "header", and "data" vocabulary to motivate the tr, th, and td abbreviations and give them meaning.

I also use spatial metaphors (for example, I tell students to make sure their head is "above" their body) and enforce fairly strict indentation rules so that students can see which elements are "inside" each other. I make sure students open and close tags and elements, and I frequently reinforce "element" and "tag" and related vocabulary words. I introduce parent/child/sibling a little later and tree diagrams a little later, with the family tree being the most obvious analogy there.

I give students lists of things to check for - for example, are all of their tags closed? All of their elements? Are all of their element names spelled correctly?

I basically build up from the practical and familiar towards the abstract and unfamiliar - and over time and practice that structure becomes much more obvious and familiar.


---

### Answer by username_3 on 2017-05-28. Score: 1

## Use Snap to model it.

[![Use Snap to model any language](https://i.sstatic.net/x4Z5M.png)](https://i.sstatic.net/x4Z5M.png) — see this code here <http://snap.berkeley.edu/snapsource/snap.html#present:Username=rdelorenzi&ProjectName=html>

> **Comments:**
> **username_0**: Use a third language to explain one of the other two? Can see why ...  
> **username_4**: There is an editor called [Pollo](http://pollo.sourceforge.net/) which has a similar aesthetic but is actually designed to edit XML. In addition, you can give it a schema and it will enforce it, which makes it useful for teaching the structure of a real document. I have actually used this with a custom schema for a configuration file which was essentially a basic programming language to teach someone who knew nothing of programming how to create config files without having to worry about syntax errors.  
> **username_3**: @ItamarGreen what is the 2nd language? (I see html and snap).  
> **username_0**: @richard HTML and XML.  

---

