example input:
<html>
<head>
<title>the title</title>
<link href='css/app.css' type='text/css' rel='stylesheet'>
<script src='js/app.js'></script>
</head>
<body>
<h1>header</h1>
<div>
<p>hello!</p>
</div>
</body>
</html>
------------
| document | <--- DOM root object.
------------
|
|
------------
| html | <--- document.documentElement
------------
______________|______________
| |
------------ ------------
| head | | body |
------------ ------------
______________|______________ |______________
| | | | |
------------ ------------ ------------ ------------ ------------
| title | | link | | script | | h1 | | div |
------------ ------------ ------------ ------------ ------------
|
|
------------
| p |
------------
All the above elements inherit from HTMLElement interface and get customized depending on specific tag