The Head tag and the DOM



The course is part of this learning path

The head tag and the DOM

In this short module you’ll learn about the head tag and what it’s used for, as well as the Document Object Model, which is a core part of how HTML has been designed.


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

About the Author
Learning Paths

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.

Covered Topics