HTML markup is what is used to define the structure and content on a web page,
and this has a hierarchical structure, which can be set up as a parse tree.
So what exactly is HTML, and what does an HTML page look like?
HTML stands for Hypertext Markup Language.
It's the standard markup language for documents
designed to be displayed on a web browser.
Your web browser understands the structure of an HTML page
and knows how to render it to screen.
Let's take a look at a very simple HTML page.
Here is what HTML looks like without the addition of any styles to this page.
Styles are specified using CSS, or Cascading Style Sheets,
but that's beyond the scope of this particular discussion.
The HTML hierarchy at its very root has an HTML node.
This is also referred to as an HTML element.
Any node is specified using an opening tag and a closing tag.
The closing tag is preceded by a forward slash, as you see here at the bottom.
This HTML node is the root node of this document,
and root nodes can contain children nodes.
This root node has two child nodes, the head node and the body node.
You can see that head and body are both the immediate
children of the HTML root node.
The head node contains metadata information for a web page.
The content within a body node is what is rendered
within the viewport of the browser.
You can see that the head node has a single child,
which is the title of the web page.
The body node has two children, a header which is denoted using the h1 tag,
and an anchor link which is denoted using the a tag.
Anchor links are what you click on on a web page.
Href here is an attribute that specifies to what page
this particular anchor link points.
This HTML structure is essentially a tree,
and it's referred to as a parse tree in Beautiful Soup,
and here is what the HTML tree structure looks like.
This is the tree corresponding to the HTML markup that we just saw.
At the very top nodes is the HTML node, and above that is the document itself.
Think of the document as a root node for the entire HTML markup.
We then have the HTML node.
The HTML node has two children, the head element and the body element.
The head element contains metadata information,
the body element contains the content rendered within a browser.
The head node and the body node can be thought of as sibling nodes.
The head element has a single child, the title,
and within the title, we have the actual text of the title.
The body element contains two children, the anchor tag and the h1 header tag.
Just like the h1 header, you have h2, h3, and h4 headers in HTML.
Now both of these tags contain content, some link and page header,
and the anchor tag contains an attribute,
that is the href, which is the URL to which that link points.
Here is another visualization of the hierarchical
relationship that exists within HTML.
We have the HTML node at the very root.
It has two children, the first child is head, the last child is body.
For both of these child nodes, the parent node is this HTML root node.
The head node and the body node are siblings of one another.
Body is the next sibling after head; head is the previous sibling to body.
And this gives you a big picture understanding of how
the HTML parse tree is constructed.