The Head tag and the DOM

Developed with
QA

Contents

keyboard_tab
HTML

The course is part of this learning path

Developing Web Applications with HTML and CSS
course-steps
7
certification
1
lab-steps
2
description
1
play-arrow
The head tag and the DOM
Overview
DifficultyBeginner
Duration3m
Students30
Ratings
5/5
starstarstarstarstar

Description

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.

Transcript

- 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
Students3590
Labs8
Courses29
Learning paths6

An outstanding trainer in software development with more than 15 years experience as a Corporate and Apprentice Trainer, ICT Teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript, HTML, CSS and SQL but also OOP (Java), programming foundations (Using Python), DevOps (Git, CI/CD, etc) and Agile/Scrum. Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes.

Covered Topics