Headings

First Header h1

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.

Second header h2

"What's happened to me?" he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer.

Third header h3

Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad. "How about if I sleep a little bit longer and forget all this nonsense", he thought, but that was something he was unable to do because he was used to sleeping on his right, and in his present state couldn't get into that position. However hard he threw himself onto his right, he always rolled back to where he was. He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the floundering legs, and only stopped when he began to feel a mild, dull pain there that he had never felt before.

Fourth header h4

"Oh, God", he thought, "what a strenuous career it is that I've chosen! Travelling day in and day out. Doing business like this takes much more effort than doing your own business at home, and on top of that there's the curse of travelling, worries about making train connections, bad and irregular food, contact with different people all the time so that you can never get to know anyone or become friendly with them. It can all go to Hell!" He felt a slight itch up on his belly; pushed himself slowly up on his back towards the headboard so that he could lift his head better; found where the itch was, and saw that it was covered with lots of little white spots which he didn't know what to make of; and when he tried to feel the place with one of his legs he drew it quickly back because as soon as he touched it he was overcome by a cold shudder.

Fifth header h5

He slid back into his former position. "Getting up early all the time", he thought, "it makes you stupid. You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance, whenever I go back to the guest house during the morning to copy out the contract, these gentlemen are always still sitting there eating their breakfasts. I ought to just try that with my boss; I'd get kicked out on the spot. But who knows, maybe that would be the best thing for me.

Sixth header h6

If I didn't have my parents to think about I'd have given in my notice a long time ago, I'd have gone up to the boss and told him just what I think, tell him everything I would, let him know just what I feel. He'd fall right off his desk! And it's a funny sort of business to be sitting up there at your desk, talking down at your subordinates from up there, especially when you have to go right up close because the boss is hard of hearing. Well, there's still some hope; once I've got the money together to pay off my parents' debt to him - another five or six years I suppose - that's definitely what I'll do. That's when I'll make the big change. First of all though, I've got to get up, my train leaves at five."

Subtitles

Title
Subtitle

Title

Subtitle

Notes:

Ensure that headings create a logical order. Apply CSS classes to control visual presentation (e.g. <h2 class="type-size-medium color-blue-dark">Our services</h2> ).


Text-level

Content

And he looked over at the alarm clock, ticking on the chest of drawers. "God in Heaven!" he thought. It was half past six and the hands were quietly moving forwards, it was even later than half past, more like quarter to seven. Had the alarm clock not rung? He see from the bed that it had been set for four o'clock as it should have been; it certainly must have rung.

"Yes, mother, yes, thank-you, I'm getting up now."

Gregor Samsa

Yes, but was it possible to quietly sleep through that furniture-rattling noise? True, he had not slept peacefully, but probably all the more deeply because of that. What should he do now? The next train went at seven; if he were to catch that he would have to rush like mad and the collection of samples was still not packed, and he did not at all feel particularly fresh and lively.

The French phrase, C'est le ton qui fait la chanson, might apply here.

Notes:

Lists

Unordered List

  • Apple
  • Apricot
  • Avocado
    • Fuerte
    • Gwen
    • Hass
    • Pinkerton
    • Reed
  • Banana
    1. Cavendish
    2. Red Dacca
    3. Gros Michel
    4. East African Highland
    5. Bodles Altafort
  • Bilberry
  • Blackberry
  • Blackcurrant
Notes:

VoiceOver will not announce unordered lists properly when either the list-style-type is set to none or display is set to inline.

Ordered List

  1. Alabama
  2. Alaska
  3. Arizona
    • Phoenix
    • Tucson
    • Mesa
    • Chandler
    • Glendale
  4. Arkansas
  5. California
  6. Colorado
  7. Connecticut
    1. Bridgeport
    2. New Haven
    3. Hartford
    4. Stamford
    5. Waterbury
  8. Delaware
  9. Florida
  10. Georgia

Definition List

Alternate Character/Glyph
A non-standard (sometimes decorative) variation of a character that comes as an extra option with a font file.
Baseline
The imaginary line on which most letters and other characters sit.
Character
An individual symbol of the full character set that makes up a typeface; may take the form of a letter, number, punctuation mark, etc.
Serif
A short line or stroke attached to or extending from the open ends of a letterform; also refers to the general category of typefaces that have been designed with this feature.
Sans-Serif
Literally “without line”; the general category of typefaces (or an individual typeface) designed without serifs.

Code

sudo ipfw pipe 1 config bw 256KByte/s
sudo ipfw add 1 pipe 1 src-port 3000
      
~/Sites/boilerplate
❦ ☢ ☭ ☂ ♞

$ ls -gto

total 88
-rw-r--r-- 1 eric staff  6148 Mar 24 11:50 .DS_Store
drwxr-xr-x 9 eric staff   306 Mar 24 13:36 .git/
-rw-rw-r-- 1 eric staff   862 Oct 13 14:38 .gitignore
-rw-r--r-- 1 eric staff   472 Feb 22 20:58 .htmlhintrc
-rw-r--r-- 1 eric staff  1068 Mar 24 10:57 LICENSE
-rw-r--r-- 1 eric staff  4865 Mar 24 13:34 README.md
-rw-r--r-- 1 eric staff 58601 Mar 24 11:50 index.html
      

Notes:

Apply translate="no" to markup that contains code examples to prevent keywords from being automatically translated.

Symbols

  • +
  • ±
  • ÷
  • ×
  • <
  • >
  • =

Notes:

Certain screen readers will not read certain symbols out loud. Use role="definition" in conjunction with aria-label to ensure the symbol is read. Use this technique with caution and discretion, as it will affect how the symbol is rendered by things like Braille readers.

Emoji

  • 🍑
  • 😺
  • 🎩
  • ⛄️
  • 🍺

Notes:

Certain screen readers will not read certain symbols out loud. Use role="definition" in conjunction with aria-label to ensure the symbol is read. Use this technique with caution and discretion, as it will affect how the symbol is rendered by things like Braille readers.


Tables

Academy Awards for Best Picture Descriptions of the film title, production company(s), and producers for the years 1980-1989.
Film Year Production Company(s) Producer(s)
Ordinary People 1980 Paramount Ronald L. Schwary
Chariots of Fire 1981 Enigma Film Productions David Puttnam
Gandhi 1982 Columbia Richard Attenborough
Terms of Endearment 1983 Paramount James L. Brooks
Amadeus 1984 Orion Saul Zaentz
Out of Africa 1985 Universal, Mirage Enterprises Sydney Pollack
Platoon 1986 Orion, Hemdale Arnold Kopelson
The Last Emperor 1987 Recorded Picture Company, Yanco Films, TAO Films, AAA, Soprofilms Jeremy Thomas
Rain Man 1988 United Artists Mark Johnson
Driving Miss Daisy 1989 Warner Bros. Richard D. Zanuck, Lili Fini Zanuck
For the first six ceremonies, the eligibility period spanned two calendar years.

Notes:

Use id and header attributes for tables with complicated markup (colspans, row headers, etc.).


Interactive

Details

What payment options do you accept?

We accept cash, Visa, American Express, money orders, and personal checks.

Notes:

The details element is currently not supported by Microsoft Edge or Internet Explorer. These browsers will display the content in an opened state, as if the open attribute was applied.

Dialog

This is a dialog title

This is dialog content.

Notes:

The dialog's interactivity needs to be controlled with JavaScript.


Embedded

Image

Image Example

Broken Image

Broken Image

Figure with Caption

Figure Example
An example figure caption.

Inline SVG

A crab A solid black illustration of a crab.
Crab by Hea Poh Lin from the Noun Project

Notes:

Picture

Picture Element

Image with Srcset and Sizes

Image with Srcset and Sizes Example

Iframe

Audio

Video

Notes:

Accessibility errors concerning the video's missing audio description should go away once the <track>'s source is linked to a valid caption file.

Object

Your browser does not support the <object> element. Please consider upgrading your browser or view the video on YouTube.

Canvas

Your browser does not support the <canvas> element. Please consider upgrading your browser.

Notes:

Add role="presentation" to <track> to mute epeated announcement of graphic role by some screen readers.


Forms

Text Input

Non-text Input

Notes:

Some pointers on styling the range input.

Select

Checkboxes and Radio Buttons

Pizza Toppings
Beverage Size

Buttons

Text Button

Notes:

  • Add type="button" to <button> elements placed outside of forms to prevent some browsers from attempting to submit form data.
  • Add pointer-events: none; to inline SVG icons placed in buttons.
  • Add focusable="false" to SVG inside of a focusable element (links, buttons, etc.) to prevent a bug with Internet Explorer.
  • Use tabindex="0" in conjunction with role="button" to ensure that the text button is focusable. Use cursor: pointer; in the CSS to communicate that it is interactable. Learn more about When To Use The Button Element.

Output

Output 350 degrees

Lockup

Can we send you periodic messages about your account?

Notes:

Place messaging above the input field so as to not be lost when magnification or focus on mobile occurs.

States and Validation

Input

Buttons

Notes:

Use :hover, :focus, and :active selectors to control the other button states. Learn more about semantically managing state and using Buttons in Design Systems.

Autocomplete

Notes:

Be sure to reference the Falsehoods Programmers Believe collection for creating bulletproof inputs.