- The Document Object Model or DOM is a key part of how HTML works. Part of this model is the head tag, which you need to know about. So in this video, I'll explain what the DOM is and how the head tag fits into it. Whenever you create an HTML page, you need to use the DOM as your guide to make sure that the page is semantically right, to help create a basic structure or template if you like, for how all HTML pages should work, the DOM gives us a kind of org chart or family tree. This tree tells us which elements are in the HTML page and how they need to be organized from a hierarchy perspective. When you code in HTML, you are setting up the core structure and the content of how you want the website to function. To manipulate it further, you'll need to use CSS to style it and JavaScript to change the way it actually works. Let's have a look at what the DOM basically looks like. As you can see, the top parent of the tree is HTML. Every other element is contained within it. A common term to describe this relationship is that elements which are contained within other elements are called children and the containing element is called a parent. So, the head element is a parent to the title and script elements, but is itself a child of the HTML elements, simple enough thing. The DOM contains either nodes or text, nodes are always objects. For instance, tags are element nodes within a node, we can also have plain text, which looks like this. One of the nodes in the DOM is the head element. This element of a page is important because it contains all of the metadata for the page. Metadata is just data about data. So the metadata of a page would probably include the following. A title element, which gives the document a title for browser tabs favorites and search results. The style element defines the style of the document that will be fleshed out with CSS. The link element defines where external style sheets should be linked from, which is great if you have the same style sheet that you want to apply to multiple pages. The meta element contains the pages, character set, description, keywords and author information. The script element defines the client side JavaScript. Although this is often just included as a last element of the body elements. Last up, the base element defines the base URL and target for all relative URLs in a page. That's it for this video. The DOM is great because it helps us keep our markup in a templated, but also flexible framework. This means that browsers can always deal with what we want, but we still have the freedom to make interesting and unique websites. The head element is important because it keeps all the sites metadata, which impacts usability and search engine optimization. So always make sure you take the time to flesh it out properly.