Since both HTML and JavaScript have some essential ambiguity,
we needed to handle that before we could move farther with our web browser.
But now that we know a bit more about grammars and ambiguity,
we can actually move onto making grammars for HTML and JavaScript.
Just to remind you, here's an example HTML utterance,
"Welcome to my webpage!"
Here I've drawn a relatively simple grammar
for a surprisingly large subset of HTML.
One of the first challenges that we'll have to deal with
is that a webpage can have a list of words, like "welcome to my webpage."
Our starting nonterminal, HTML, has a recursive structure.
Using this rule, HTML goes to element HTML, we can apply rule one
over and over again to get as many elements as we need.
Maybe one, two, three, four for welcome to my webpage.
Then eventually when we're done replace with epsilon or the empty set.
Element can either be a word, like "welcome to my webpage,"
or the beginning of a nested tag.
Here tag-open and tag-close are a lot like open parenthesis and close parenthesis.
Whenever we make one, we're going to make the other.
Then in here tag_open is and tag_close is .
For example, this part matches a tag_open, and this text matches a tax_closed.
Actually, as it stands, I'm only allowing a single word to be inside any tag.
Inside these bold tags, we've got quite a lot of stuff going on.
I'll show you the power of a recursive grammar. Watch this trick.
Now at the top level, an HTML document is a list of elements, as many as you like.
Each one of those elements may themselves be a tag,
and inside tags we have another list of elements--another, in essence, entire webpage.
Here at the top level, we just have one--tag_open for bold.
But inside it there are four elements--the word welcome, the word to,
the tag_open for my, and the word for webpage.
I'm going to draw the parse tree for this utterance using our grammar.
I'm going to use "elt" to abbreviate for element.
I'm going to use "to" for tag_open and "tc" for tag_close.
Now, I've only drawn or sketched out a small portion, maybe about half, of this parse tree,
but we're still going to be able to see things match up by comparing the leaves--
remember a leaf is an node without any children--
to what we saw in the original string.
Here my first leaf, working my way down and to the left,
is this open left angle bracket, and that matches up here.
My next is this b, which matches up here--match up there.
Then after that tag_open, there is an HTML, which is an element list,
and the first one is the word "welcome." The next one is the word "to."
Now, although this tree structure is cumbersome for us,
it's very convenient for computers, because it tells us exactly which part of the tree
to draw or to apply in a certain manner.
It might not be obvious which word should be bolded or which word should be italicized,
but if I have a tag_open and a tag_close, this entire subtree is influenced by this tag.
How much of the webpage is bolded? Exactly this part over here.
The bold's great, great uncle or something like that.
Go up a few, over one to the right, and then back down.
We're going to use this special structuring to help write our web browser.