liveBook · Manning

Head element

As explained in Web Design Playground, Second Edition

The HTML head element contains document metadata, the page title, and resource declarations rather than the page's main rendered content.

The <head> element holds behind-the-scenes page information: character encoding, the title, and CSS. Unlike the <body>, it is not where visible page content belongs. section 2.5 section 2.16

A page’s backstage area

<head>\n <meta charset="utf-8">\n <title>My First Page</title>\n <style>/* page styles go here */</style>\n</head>\n\nThe browser uses this information while the visible text and tags belong in <body>. section 2.5

<!DOCTYPE html>                   #1
<html lang="en">                  #2
    <head>                        #3
        <meta charset="utf-8">    #4
        <title></title>           #5
        <style></style>           #6
    </head>                       #3
    <body>                        #7
    </body>                       #7
</html>                           #2

Use the complete skeleton to see how <head> fits between <html> and <body>. section 2.5

How Web Design Playground, Second Edition covers it

How deep it goes
Defines the head’s role and names common child elements, without descending into browser internals.
Examples
Uses a complete page skeleton containing doctype, html, head, meta, title, style, and body elements.
What it assumes
Teaches the head and body split while introducing HTML tags and closing tags within the basic page structure.
What you can do after
Understand how to place metadata, a page title, and CSS in a basic HTML document.
How it connects
Connects the head element to HTML, the body element, CSS, the meta element, and the title element.

Also explained in

Compare how 2 books explain head element →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground, Second Edition. The section links point to the parts of the book it draws on.