Technically, address and h1 — h6 are content sectioning elements, like header, section, etc. But mCSS approach is to prioritize intuitiveness and ease of use rather than technical correctness, so they’re included here with the rest of the text elements.

Headings

Heading One

A small paragraphe of text to show the heading in context.

Heading Two

A small paragraphe of text to show the heading in context.

Heading Three

A small paragraphe of text to show the heading in context.

Heading Four

A small paragraphe of text to show the heading in context.

Heading Five

A small paragraphe of text to show the heading in context.

Heading Six

A small paragraphe of text to show the heading in context.

Consecutive headings get less margin

This is a H1

H2 right aftert a H1

H3 right aftert a H2

H4 right aftert a H3

Inline Elements

Paragraphs

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences.

Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Definition list

Definition List description term

This is a definition list description details

Another description

With the related description details

Ordered List

1. List Item
2. List Item
   1. List Item
   2. List Item
      1. List Item
      2. List Item
   3. List Item
   4. List Item
3. List Item
4. List Item

Unordered List

• List Item
• List Item
  • List Item
  • List Item
    • List Item
    • List Item
  • List Item
  • List Item
• List Item
• List Item

Blockquotes

It would be going too far to call our modern offices sensory-deprivation chambers, but they are most certainly sensory-reduction chambers. They may not brainwash, but the elimination of sensory stimuli definitely increases focus on the task at hand, the work to be done, to the exclusion of all else. Modern offices were designed for that very purpose by people who knew what they were doing.

—Jerry Mander, Four arguments for the elimination of television

Horizontal Rule

The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane.

You have power over your mind — not outside events. Realize this, and you will find strength.

code

Keyboard input: Cmd

Inline code: <div>code</div>

Sample output: This is sample output from a computer program.

Pre-formatted text

P R E F O R M A T T E D T E X T !
” # $ % & ’ ( ) * + , - . / 0 1 2
3 4 5 6 7 8 9 : ; < = > ? @ A B C
D E F G H I J K L M N O P Q R S T
U V W X Y Z [ \ ] ^ _ ` a b c d e
f g h i j k l m n o p q r s t u v
w x y z ~

See How to structure a web form on MDN.

This is just the bare minimum default styles to make any form look consistent out of the box. See the form component for more.

The legend HTML element is notoriously impractical to style. The example below uses the following workaround:

<legend>Example of custom fieldset legend</legend>
<div aria-hidden="true">Example of a fieldset legend</div>

fieldset {
  > [aria-hidden] {
    /* [styling goes her…] */
  }
}

legend {
  /*  Visually hidden  */
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

• Plain <img> element

  

• <figure> element with <img> element

  

• <figure> element with <img> and <figcaption> elements

  

• <figure> element with a <picture> element

  

Inline SVG

Details & Summary