Raw User Agent Styles

This reference shows the default styles of the browser for HTML elements.

Text Content

<h1> to <h6>
Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6
<p> <br> <hr>
Paragraphs

This is a standard paragraph.

You can use a <br> to force a line break
right here without creating a new paragraph.

The thematic break (horizontal rule) is above.

<blockquote> <q> <cite>
Quotations

Someone famous once said:

"Design is not just what it looks like and feels like. Design is how it works."

Also, short inline quotes are supported.
Reference: Steve Jobs

<ul> <ol> <dl>
Lists

Unordered List:

  • Action items
  • Design concepts
    • Color theory

Ordered List:

  1. Discover
  2. Design

Description List:

HTML
HyperText Markup Language
CSS
Cascading Style Sheets

Menu (toolbar-style list):

  • Cut
  • Copy
  • Paste
    •
    <pre> <code> <samp>
    Preformatted & Code

    Inline code: npm install

    A preformatted block keeps every space and line break:

    function greet(name) {
    return "Hello, " + name;
}

    Program output: Done in 1.2s

    Inline Formatting & Data

    Semantic Texts
    Basic Formats

    Strong importance text.

    Emphasized text reading.

    Visually highlighted (marked) text.

    Deleted text and inserted text.

    Small side-comment text.

    Math equation: E = mc2 (superscript).

    Chemical: H2O (subscript).

    Press Cmd + S to save.

    Hyperlink to another resource.

    HTML abbreviation.

    The <code> tag formats inline code.

    <samp> <var> <time> <dfn>
    Technical & Document Semantics

    The solver returns Exit code 0 (sample output).

    Where x is the unknown variable.

    Published .

    A CSS definition term.

    Bring $40 $29. Strikethrough marks no-longer-accurate text.

    The bus leaves at 09:45 from Platform 3.

    A spelling mistake is underlined (non-semantic underline).

    Written by Grovider Agency
    [email protected]
    <bdo> <wbr> <data> <ruby> <span>
    Direction, Hints & Annotations

    Bidirectional override: this text is reversed

    Isolated bidi text: User إيان scored 3 points.

    Line-break opportunity hint: supercalifragilisticexpialidocious

    Machine-readable value: Cherry Tomatoes

    Ruby annotation: 漢(kan)字(ji)

    Generic inline container: <span> has no default styling.

    Sectioning & Structure

    <header> <nav> <article> <section> <aside> <footer>
    Page Structure Landmarks

    The page's primary content lives in one <main> per page. A typical structure:

    <header> with an <hgroup>

    Introductory content and grouped headings.

    <article>

    Self-contained content, such as a blog post.

    <section>

    A thematic grouping inside the article.

    <footer>: closing content for its section.

    Form Controls

    type="text" type="email" type="search" <textarea>
    Text Fields













    checkbox radio select
    Choices

    Checkboxes:




    Radios:




    Select Dropdown:



    Multi-select (hold Ctrl / Cmd):


    Pickers Buttons
    Interactive Inputs





















    Action Area
    type="number" <datalist> <output>
    Specialized Inputs
















    42
    disabled readonly required <button>
    Field States & Buttons









    Button variants:

    Interactive & Embedded

    <details> <dialog>
    Disclosure & Dialog
    Click to expand (<details> / <summary>)

    Hidden content revealed by toggling the summary.


    An open native <dialog>:

    I'm a <dialog> box.
    <canvas> <svg>
    Graphics

    Scripted <canvas> bitmap:

    Your browser doesn't support canvas.

    Vector <svg>:

    <iframe> <picture> <object> <embed> <map>
    Embedded Content

    <iframe> embeds another web page:



    <picture> serves responsive image sources:

    Responsive picture example

    <object> and <embed> embed external resources (with fallback):

    Fallback content for <object>.

    <img> with a clickable <map> / <area>:

    Image map demo Left region Right region

    Tabular Data & Media

    <thead> <tbody> <tfoot> colspan rowspan
    Table Default Layout
    Monthly fruit order
    Group Item Price
    Fruit 6 apples $1.20
    4 bananas $0.80
    Total $2.00 (10 items)
    progress meter details
    System Indicators

    65%


    90%

    Expandable Details

    This is hidden content toggled by clicking the summary.

    audio video figure
    Media Defaults

    Audio player (<audio> with <source> fallbacks):



    Image with caption (<figure> + <figcaption>):

    Placeholder image, 240 by 140 pixels
    Fig 1. An <img> wrapped in a <figure>.

    Video player (<video> with a poster & captions <track>):

    <template> <script> <meta> <noscript>
    Metadata & Scripting (no visible output)

    Some elements render nothing on their own. They belong in the document head or exist for scripting:

    • <head>, <title>, <base>, <link>, <meta>, <style> for document metadata
    • <script>, <noscript> for scripting and its no-JS fallback
    • <template> for inert markup, cloned by JavaScript

    The <template> above outputs nothing until it is cloned with JavaScript.