11
$\begingroup$

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 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?

Improve this question
$\endgroup$
6
  • $\begingroup$ What level is this? Are the students familiar with more abstract structures? $\endgroup$
    – wythagoras
    May 24, 2017 at 6:53
  • $\begingroup$ @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. $\endgroup$
    – ItamarG3
    May 24, 2017 at 6:54
  • 2
    $\begingroup$ Do you teach the DOM? I found that the tree-like structure and the accompanying visualization helped illustrate how HTML works. $\endgroup$
    – Peter
    May 26, 2017 at 0:52
  • $\begingroup$ @Peter I didn't think about showing it like that. Thanks $\endgroup$
    – ItamarG3
    May 26, 2017 at 11:08
  • $\begingroup$ Explain the structure: opening and closing tags; nesting (Russian dolls). Then use an editor that automatically adds closing tags, and indentation. $\endgroup$
    – ctrl-alt-delor
    May 28, 2017 at 12:01

8 Answers 8

Reset to default
9
$\begingroup$

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 <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.

Improve this answer
$\endgroup$
1
  • $\begingroup$ 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. $\endgroup$
    – Peter Taylor
    Jun 22, 2017 at 10:08
7
$\begingroup$

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.

Improve this answer
$\endgroup$
4
  • 2
    $\begingroup$ 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 $\endgroup$
    – ItamarG3
    May 24, 2017 at 7:05
  • 2
    $\begingroup$ @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. $\endgroup$
    – wythagoras
    May 24, 2017 at 7:10
  • 1
    $\begingroup$ I think html, head, body are abstract, they don't appear to do anything. Start with the tags that produce, obvious, output. $\endgroup$
    – ctrl-alt-delor
    May 28, 2017 at 11:59
  • $\begingroup$ 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 $\endgroup$
    – pojo-guy
    Oct 16, 2018 at 2:43
4
$\begingroup$

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 and XML 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

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.

Improve this answer
$\endgroup$
2
  • $\begingroup$ I see. I'll definitely use that slide. Thanks! $\endgroup$
    – ItamarG3
    May 28, 2017 at 16:34
  • $\begingroup$ 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. $\endgroup$
    – Bennett Brown
    Jul 3, 2017 at 2:38
4
$\begingroup$

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

ADEPT Methodology

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

Improve this answer
$\endgroup$
3
  • 1
    $\begingroup$ 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. $\endgroup$
    – Ben I. ♦
    May 30, 2017 at 4:18
  • $\begingroup$ @austin good to see some teaching theory, in an answer. $\endgroup$
    – ctrl-alt-delor
    Jun 22, 2017 at 17:28
  • $\begingroup$ I use this system when teaching html to young pupils $\endgroup$
    – Harry
    Jul 21, 2017 at 12:48
3
$\begingroup$

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 From http://maxpixel.freegreatpicture.com/Traditional-Russian-Toy-Russian-Doll-Russian-1090697 CC0 Public Domain

Improve this answer
$\endgroup$
3
  • 1
    $\begingroup$ ... or next to another doll? How does this relate to using XML to teach HTML? $\endgroup$
    – thesecretmaster ♦
    May 28, 2017 at 12:17
  • 1
    $\begingroup$ This isn't an answer to the question as posed. Can you flesh this out? $\endgroup$
    – Ben I. ♦
    May 28, 2017 at 12:46
  • $\begingroup$ @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 $\endgroup$
    – ItamarG3
    May 28, 2017 at 12:52
2
$\begingroup$

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.

Improve this answer
$\endgroup$
1
$\begingroup$

Use Snap to model it.

Use Snap to model any language — see this code here http://snap.berkeley.edu/snapsource/snap.html#present:Username=rdelorenzi&ProjectName=html

Improve this answer
$\endgroup$
4
  • 1
    $\begingroup$ Use a third language to explain one of the other two? Can see why ... $\endgroup$
    – ItamarG3
    May 28, 2017 at 12:53
  • $\begingroup$ There is an editor called Pollo 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. $\endgroup$
    – Peter Taylor
    Jun 22, 2017 at 10:13
  • $\begingroup$ @ItamarGreen what is the 2nd language? (I see html and snap). $\endgroup$
    – ctrl-alt-delor
    Jun 22, 2017 at 17:26
  • $\begingroup$ @richard HTML and XML. $\endgroup$
    – ItamarG3
    Jun 22, 2017 at 17:27
1
$\begingroup$

HTML is primarily a markup language, not a document structure. XHTML, which we use almost exclusively these days, is both.

But that means HTML is much easier to explain than XHTML. You can markup anything.

I can write something (and markup this bit:) with markup (:finished markup) without knowing or caring anything about document structure.

Once people are happy with markup, it's easier to introduce them to document structure - you're giving "the whole document" some markup.

N.B.: this is, of course, how most people learnt HTML back before XHTML existed; new students today possibly get forced through a harder route, going straight to XHTML, thanks to the predominance of XHTML in real-world use.

Improve this answer
$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.