Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-22T10:13:20.330Z
Answers.Text: 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.
Answers.UserDisplayName: Peter Taylor
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-22T17:26:28.617Z
Answers.Text: @ItamarGreen what is the 2nd language? (I see html and snap).
Answers.UserDisplayName: ctrl-alt-delor
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-22T17:27:48.627Z
Answers.Text: @richard HTML and XML.
Answers.UserDisplayName: ItamarG3
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-28T12:53:17.927Z
Answers.Text: Use a third language to explain one of the other two? Can see why ...
Answers.UserDisplayName: ItamarG3
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-28T12:51:44.987Z
Answers.LastActivityDate: 2017-05-28T12:51:44.987Z
Answers.UserDisplayName: ctrl-alt-delor
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-22T10:08:59.383Z
Answers.Text: 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.
Answers.UserDisplayName: Peter Taylor
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2017-05-24T12:30:51.973Z
Answers.LastActivityDate: 2018-10-11T19:33:27.793Z
Answers.LastEditDate: 2018-10-11T19:33:27.793Z
Answers.UserDisplayName: Aurora0001
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-24T07:05:20.457Z
Answers.Text: 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*
Answers.UserDisplayName: ItamarG3
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-24T07:10:02.453Z
Answers.Text: @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.
Answers.UserDisplayName: wythagoras
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-28T11:59:09.177Z
Answers.Text: I think html, head, body are abstract, they don't appear to do anything. Start with the tags that produce, obvious, output.
Answers.UserDisplayName: ctrl-alt-delor
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-10-16T02:43:50.653Z
Answers.Text: 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
Answers.UserDisplayName: pojo-guy
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-24T07:03:16.130Z
Answers.LastActivityDate: 2017-05-24T07:03:16.130Z
Answers.UserDisplayName: wythagoras
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-22T17:28:13.763Z
Answers.Text: @austin good to see some teaching theory, in an answer.
Answers.UserDisplayName: ctrl-alt-delor
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-07-21T12:48:14.547Z
Answers.Text: I use this system when teaching html to young pupils
Answers.UserDisplayName: Harry
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-30T04:18:55.300Z
Answers.Text: 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.
Answers.UserDisplayName: Ben I.
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-30T02:31:25.610Z
Answers.LastActivityDate: 2017-10-30T01:17:11.537Z
Answers.LastEditDate: 2017-10-30T01:17:11.537Z
Answers.UserDisplayName: 1234567
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-07-03T02:38:19.230Z
Answers.Text: 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.
Answers.UserDisplayName: Bennett Brown
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-28T16:34:00.657Z
Answers.Text: I see. I'll definitely use that slide. Thanks!
Answers.UserDisplayName: ItamarG3
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-28T16:07:30.360Z
Answers.LastActivityDate: 2017-05-28T16:07:30.360Z
Answers.UserDisplayName: Peter
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-28T12:17:11.570Z
Answers.Text: ... or next to another doll? How does this relate to using XML to teach HTML?
Answers.UserDisplayName: thesecretmaster
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-28T12:46:57.420Z
Answers.Text: This isn't an answer to the question as posed. Can you flesh this out?
Answers.UserDisplayName: Ben I.
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-28T12:52:43.923Z
Answers.Text: @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
Answers.UserDisplayName: ItamarG3
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-28T12:16:19.317Z
Answers.LastActivityDate: 2017-05-28T12:56:46.253Z
Answers.LastEditDate: 2017-05-28T12:56:46.253Z
Answers.UserDisplayName: ctrl-alt-delor
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-18T10:15:36.130Z
Answers.LastActivityDate: 2017-06-18T10:15:36.130Z
Answers.UserDisplayName: Neal Zupancic
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-05-24T06:53:11.873Z
Comments.Text: What level is this? Are the students familiar with more abstract structures?
Comments.UserDisplayName: wythagoras
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-05-24T06:54:19.963Z
Comments.Text: @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.
Comments.UserDisplayName: ItamarG3
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-05-26T00:52:56.230Z
Comments.Text: Do you teach the DOM? I found that the tree-like structure and the accompanying visualization helped illustrate how HTML works.
Comments.UserDisplayName: Peter
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-05-26T11:08:29.487Z
Comments.Text: @Peter I didn't think about showing it like that. Thanks
Comments.UserDisplayName: ItamarG3
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-05-28T12:01:09.353Z
Comments.Text: Explain the structure: opening and closing tags; nesting (Russian dolls). Then use an editor that automatically adds closing tags, and indentation.
Comments.UserDisplayName: ctrl-alt-delor
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-05-28T12:01:51.797Z
Comments.Text: @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.
Comments.UserDisplayName: ItamarG3
Tags: <lesson-ideas><introductory-lesson><html><xml>
Title: Explaining basic html structure
ThreadText: # 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:
  
  ```
  <rootElement>
      <element withAttribute="that we can set" scndAttr="there can be more than 1 attribute">
          <subElement otherAttr="these can also have attributes" />
      </element>
  </rootElement>
  
  ```
  
  and then use this basic block to get into the subject, after which we veer off to `html` specific `xml`s.
  
  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](https://users-cs.au.dk/amoeller/dRegAut/JavaBNF.html) 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 `<tag>` and end with `</tag>` 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 `<h1>` with some guidance.
  
  ```
  <html>
      <head>
          <title>My First Webpage</title>
      </head>
      <body>
          <h1>Hello, world!</h1>
      </body>
  </html>
  
  ```
  
  The general structure should be obvious, and you can reinforce it with some tasks, such as:
  
  > * Add a paragraph (`<p>`) after the heading.
  > * Add this image: [insert image link here] using `<img>`
  
  I would expect that `<img>` 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 `<html>`, `<body>`, `<head>`, 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.  
  
  ---
  
  