This style guide contains many details that are initially
hidden from view. They are marked by the triangle icon, which you
see here on your left. Click it now.
You should see “Hooray” appear below.

Hooray! Now you know you can expand points to get more
details. Alternatively, there’s a “toggle all” at the
top of this document.

This document defines formatting and style rules for HTML and
CSS. It aims at improving collaboration, code quality, and
enabling supporting infrastructure. It applies to raw,
working files that use HTML and CSS, including GSS
files. Tools are free to obfuscate, minify, and compile as
long as the general code quality is maintained.

Omit the protocol from embedded resources.

Omit the protocol portion (http:,
https:) from URLs pointing to images and other
media files, style sheets, and scripts unless the respective
files are not available over both protocols.

Using valid HTML is a measurable baseline quality attribute
that contributes to learning about technical requirements
and constraints, and that ensures proper HTML usage.

<!-- Not recommended -->
<title>Test</title>
<article>This is only a test.
<!-- Recommended -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>
Use HTML according to its purpose.

Use elements (sometimes incorrectly called “tags”) for what
they have been created for. For example, use heading
elements for headings, p elements for
paragraphs, a elements for anchors, etc.

Using HTML according to its purpose is important for
accessibility, reuse, and code efficiency reasons.

For multimedia, such as images, videos, animated objects via
canvas, make sure to offer alternative
access. For images that means use of meaningful alternative
text (alt) and for video and audio transcripts
and captions, if available.

Providing alternative contents is important for
accessibility reasons: A blind user has few cues to tell
what an image is about without @alt, and other
users may have no way of understanding what video or audio
contents are about either.

(For images whose alt attributes would
introduce redundancy, and for images whose purpose is purely
decorative which you cannot immediately use CSS for, use no
alternative text, as in alt="".)

Strictly keep structure (markup), presentation (styling),
and behavior (scripting) apart, and try to keep the
interaction between the three to an absolute minimum.

That is, make sure documents and templates contain only HTML
and HTML that is solely serving structural purposes. Move
everything presentational into style sheets, and everything
behavioral into scripts.

In addition, keep the contact area as small as possible by
linking as few style sheets and scripts as possible from
documents and templates.

Separating structure from presentation from behavior is
important for maintenance reasons. It is always more
expensive to change HTML documents and templates than it is
to update style sheets and scripts.

<!-- Not recommended -->
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML sucks</h1>
<p>I’ve read about this on a few sites but now I’m sure:
<u>HTML is stupid!!1</u>
<center>I can’t believe there’s no way to control the styling of
my website without doing everything all over again!</center>
<!-- Recommended -->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
<p>I’ve read about this on a few sites but today I’m actually
doing it: separating concerns and avoiding anything in the HTML of
my website that is presentational.
<p>It’s awesome!
Do not use entity references.

There is no need to use entity references like
&mdash;, &rdquo;, or
&#x263a;, assuming the same encoding
(UTF-8) is used for files and editors as well as among
teams.

The only exceptions apply to characters with special meaning
in HTML (like < and &) as
well as control or “invisible” characters (like no-break
spaces).

<!-- Not recommended -->
The currency symbol for the Euro is &ldquo;&eur;&rdquo;.
<!-- Recommended -->
The currency symbol for the Euro is “€”.
Omit optional tags (optional).

For file size optimization and scannability purposes,
consider omitting optional tags.
The HTML5
specification defines what tags can be omitted.

(This approach may require a grace period to be established
as a wider guideline as it’s significantly different
from what web developers are typically taught. For
consistency and simplicity reasons it’s best served
omitting all optional tags, not just a selection.)

It’s tempting to address styling differences over user
agent detection or special CSS filters, workarounds, and
hacks. Both approaches should be considered last resort in
order to achieve and maintain an efficient and manageable
code base. Put another way, giving detection and hacks a
free pass will hurt projects in the long run as projects
tend to take the way of least resistance. That is, allowing
and making it easy to use detection and hacks means using
detection and hacks more frequently—and more frequently
is too frequently.

Alphabetize declarations.

Put declarations in alphabetical order in order to achieve
consistent code in a way that is easy to remember and
maintain.

If you’re editing code, take a few minutes to look at the code
around you and determine its style. If they use spaces around
all their arithmetic operators, you should too. If their
comments have little boxes of hash marks around them, make your
comments have little boxes of hash marks around them too.

The point of having style guidelines is to have a common vocabulary
of coding so people can concentrate on what you’re saying rather
than on how you’re saying it. We present global style rules here so
people know the vocabulary, but local style is also important. If
code you add to a file looks drastically different from the existing
code around it, it throws readers out of their rhythm when they go to
read it. Avoid this.