(Progress persistence is disabled until Phase 9)
DOCTYPE, Head and Body
A deep dive into the mandatory sections of an HTML document.
Learning Objectives
- Understand why the DOCTYPE declaration is required
- Learn how to configure the document language
- Understand metadata, character sets, and titles in the head tag
A Closer Look at the Skeleton
In a previous lesson, we looked at the basic HTML document structure. Now, let’s look deeper into the specific purpose of the <!DOCTYPE>, <head>, and <body> elements.
The DOCTYPE Declaration
<!DOCTYPE html>The DOCTYPE declaration is not actually an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
In the early days of the web, there were many confusing versions of HTML. Today, we use HTML5. The incredibly simple <!DOCTYPE html> declaration tells the browser, “This is a modern HTML5 document. Please render it using modern standards.”
If you forget the DOCTYPE, older browsers might switch into “Quirks Mode,” meaning they will try to render your page using rules from the 1990s, which can break your layout!
The HTML Tag and Language Attribute
<html lang="en">The <html> tag is the “root” of your document.
The lang="en" part is an attribute. Attributes provide extra information about an HTML element. In this case, lang stands for language, and en stands for English.
Setting the language is critical for accessibility. Screen readers (software used by visually impaired users) rely on this attribute to know which pronunciation rules to use when reading the page out loud.
The Head Tag
<head>
<meta charset="UTF-8">
<title>Document Title</title>
</head>The <head> element is the brain of your webpage. It contains metadata—data that describes the HTML document itself.
<meta charset="UTF-8">: This tells the browser to use the UTF-8 character encoding. UTF-8 includes almost all characters and symbols in the world, ensuring that special characters (like emojis 🚀 or accented letters like é) display correctly instead of showing up as broken symbols.<title>: This defines the title of the webpage. This title does not appear on the page itself; it appears in the browser tab at the top of your screen. It is also the title used by Google when your page appears in search results.
The Body Tag
<body>
<p>Hello world!</p>
</body>The <body> element is the physical body of your webpage. Everything that the user actually sees and interacts with—text, images, videos, and buttons—must be placed inside the <body> tag.
Try It Yourself
Try changing the <title> text and observe what happens. (Note: In some playgrounds, the browser tab title cannot be overridden, but in real development, this changes the tab name!)
Key Takeaways
<!DOCTYPE html>ensures the browser uses modern HTML5 standards.- The
langattribute on the<html>tag is crucial for accessibility. - The
<head>contains invisible metadata, character encodings, and the page title. - The
<body>contains all the visible content on the webpage.