html HTML Document / Rootlang is recommended,
with value the ISO code for the language of the page content.
When writing XHTML, requires xlmns
linking to the namespace .
CSS :root of HTML documents,
including within math,
svg and svg foreignObject.
body Document Bodymeta,
noscript,
link,
script,
style,
template,
whitespace, or a comment.
In all those cases the misplacement of the opening tag
will not change the page behaviour
(as long as the misplaced elements are not displayed,
which they are not by default), thus for all intents and purposes body
can be considered optional.
Including it explicitely however helps the parsing / processing,
and attributing body has it use-cases.
meta
with name="generator"
can reference the originating script.
This can be some identifier for the script or directly the URL.
Typically the content
is not suitable to host URL values,
but this rule is not strictly enforced and routinely ignored,
e.g. twitter:image,
in any case this metadata neither explicitely used by the browsers
nor the crawlers. It can be used for organisational / informational purposes.
title Document Title
Only non-Void element that exclusively belongs
in head.
One of only two Escaped Raw Text element
(the other being textarea),
ignoring nested HTML tags.
Specifies the title of the page. Important accessibility role.
Important search engine indicator. Name in the tab for web-browsers.
By default not displayed onto the page.
Only global attrs.
style Style Information
Specifies a portion of CSS that applies in this page only.
May attribute blocking for critical resource
@import.
May attribute a cryptographic nonce
to allow inline styles in Content-Security-Policy: style-src.
May attribute a media query to toggle
the element, useful to toggle it generically, by attributing
an impossible query such as (width < 0)
May attribute a title, providing a name for an alternate stylesheet
(in additional to its global attribute role).
Other attributes deprecated.
base Document Base URL
Void element.
It must come before other Link elements,
e.g. a,
link,
area.
It may specify href
then prefixing all URL in the page, in other words,
redefining the top location of the page.
It may also/instead specify target
which becomes the default values for Links in the page.
See Links for more information.
meta Metadata element
Void element.
Defines metadata about an HTML document.
Meta is any key-value pairs encoded as
name or
http-equiv
with the associated
content,
or the charset.
The content
is parsed and used by user-agents to
configure the page and also by search engines and crawlers,
to understand the nature of the document.
Social media overviews leverage this data.
Metacheck is a tool
to simulate results on the major platforms, from the site URL.
See
Meta Extensions WhatWG registry , and
GitHub @whitingx meta / link compilation .
| As "Key" | As "Value" |
|---|---|
itemprop | Any, user-defined |
charset[1] | Typically utf-8 |
| name="viewport" | content |
http-equiv=X-UA-Compatible[2] | content |
http-equiv=Content-Security-Policy | content |
http-equiv=refresh | content |
name=description/keywords/... | content |
name=og:site_name/... - Open Graph | content |
name=twitter:image/... [3] - Twitter | content |
| [1] quasi-required due to potential display issues if omitted | |
[2] content="IE=edge" however IE support stopped 2022 | |
| [3] for image, URL to target, un-orthodox for meta. | |
link External Resource Link
Void element, represents a relationship from the Document subject,
of the predicate rel nature,
with another href object, the linked resource.
As such it provides metadata like meta,
but exclusively for URL values.
Some rel have active effects,
see the Links dedicated page.
The rel='icon' links an icon used
by the user-agent.
The rel='stylesheet' provides CSS stylesheets.
A non-empty title makes the sheet Preferred,
otherwise being Persistent.
Links with rel='alternate stylesheet' are Alternate sheets.
The user may swap on firefox: View > Page Styles, however other browsers do not support this.
Stylesheet Links attributing a media query get disabled when it evaluates false.
Those won't block the render, improving the
critical rendering path.
head Document Metadata / Header
The order matters for some elements.
metacharset
should appear before the title, because it may contain unicode.
basehref
should appear before any referential / hyperlinking elements
for them to resolve correctly.
The blocking
style and
script i.e. not async,
defer, type='module',
should appear at the end in absence of specific reason.
The link
marked preload/as
should logically appear earlier to hint the
user-agent should fetch them early.
<html lang="...">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1"/>
<title> ... >/title>
<base href="..." />
<link rel="icon" href="..." />
<meta name="twitter:image" content="..." />
<meta name="keywords" content="..." />
<meta name="description" content="..." />
<link rel="index" href="..." />
<link rel="next" href="..." />
<link rel="stylesheet" href="..." />
<script async src="..."></script>
<script defer src="..."></script>
<script src="..."></script>
<script>...</script>
</head>
Displaying linked resources is a mechanism described in the HTML Living Standard . It is up to the user-agent or site. The former is rarely implemented, to implement it on a site, there are different options.
a instead. Common and accepts rellink to a insertslink to a insertshead and the inert href of linklink
onclick visit href
Doing this via CSS is uncommon, but works.
body shown display: contents,
while setting the page layout on html
makes a uniform head content section.
The children have different needs for display.
title can be
styled as any element with text content.
style shown
display: contents
displays itself as standard text, or can
be displayed block and styled as a code block, etc.
For the void elements, the styling
has to select specific scenarios and
assign pseudo-elements accordingly.
Some layouts that are possible to style the head:
display: contents
slotting pseudo-elements in grid. Title spanning all columns.display: list-item
which provides a third pseudo-element, ::marker