Skill Level: 
Beginner

Web browsers provide default styles for HTML elements. Some elements in the framework retain those browser defaults, but most have a minimal amount of opinionated styling applied to them.

Browser Defaults

Use the <del> tag for text that is meant to be treated as deleted text.

Use the <s> tag for text that is meant to be treated as no longer accurate or no longer relevant.

Use the <ins> tag for text that is meant to be treated as an addition to the document.

Use the <u> tag for underlined text.

Use the <strong> tag for text with strong importance.

Use the <b> tag or the .dcf-bold class for bold text without conveying any extra importance.

Use the <em> tag to stress text of linguistic import, the way you would emphasize pronunciation if the same text was spoken.

Use the <i> tag or the .dcf-italic class to italicize text without conveying any extra importance.

Use the <time> tag along with the datetime content attribute to display dates and time:

<time datetime="2018-07-01">July 1</time> – <time datetime="2018-07-02">2</time>

Abbreviations

<abbr>
Abbreviations should be spelled out on first occurrence, then abbreviated using the <abbr> element on subsequent occurrences.

VHS is an abbreviation for Video Home System.

This example uses the .dcf-txt-sm class to slightly reduce the font-size.

Addresses

<address>
The address element should be used for physical or digital contact information for a person, people or an organization.
University of Digital Campus
1234 Main Street
Anytown, NE 65432

Anchors

<a>
Use to link to other content.

This is an anchor link. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Blockquotes

<blockquote>
The blockquote element mostly retains browser default styling, but its measure is restricted to prevent unnecessarily long lines, aiding readability.
Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue.

Related: Quotes (Elements), Blockquotes (Components)

Buttons

<button>
<input type="button">
<input type="submit">
Baseline button styles to reset display, padding, font-size, line-height, and text alignment.

Related: Button Groups (Components), Buttons (Components), Forms (Components), Input Groups With Buttons (Components)

Code

<code>
Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.
<pre>
Wrap multiple lines of code with <pre>. Use the .dcf-pre component class to retain code styling.
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Nulla vitae elit libero, a pharetra augue.</p>
<var>
These are variables:
y = mx + b
<kbd>
This is user input:
To switch directories, type cd followed by the name of the directory. To edit settings, press ctrl + ,
<samp>
This is sample output:
This text is meant to be treated as sample output from a computer program.

Related: Code (Components)

Details & Summary

<summary>
Combine these elements to build a native accordion (i.e., content that can be expanded and contracted).
Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Figures

<figure>
The browser default margins have been removed from the figures.
Placeholder image.
A <figure> with one image and a <figcaption>.
Placeholder image. Placeholder image. Placeholder image.
A <figure> with multiple images and a <figcaption>.

Related: Figures (Components)

Forms

<form>
<fieldset>
<legend>
<label>
<input>
<select>
<option>
<textarea>
Styles applied directly to form elements are intentionally kept to a minimum.
Sample Form Content
Checkboxes
Radio buttons

Related: Buttons (Elements), Buttons (Components), Forms (Components), Input Groups (Components)

Headings

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
Headings should be selected to accurately convey content hierarchy, not to resize text for the aesthetic needs of the page layout. Instead, use utility classes to increase or decrease a heading's font-size.

h1. Heading 2.37em

h2. Heading 2em

h3. Heading 1.77em

h4. Heading 1.5em

h5. Heading 1.33em
h6. Heading 1.13em

Related: Headings (Components), Font Size (Utilities)

Images

<img>
Ensure that accurate descriptions of the image content are included in the alt attribute of each image for accessibility.
Placeholder image.
A placeholder image with a 16:9 aspect ratio.
Placeholder image.
A placeholder image with a 4:3 aspect ratio
Placeholder image.
A placeholder image with a 1:1 aspect ratio

Related: Aspect Ratios (Utilities), Object-Fit (Utilities)

Lists

Description Lists

<dl>
<dt>
<dd>
The description list (once known as the definition list) is used to mark up groups of terms and descriptions.
Term 1
Description 1
Term 2
Description 1 for Term 2
Description 2 for Term 2
Term 3
Term 4
Term 5
Description for Terms 3, 4 and 5

Ordered Lists

<ol>
<li>
The ordered list prepends each list item with a sequential number.
  1. This is the most important thing.
  2. This is the second most important thing.
  3. This is the third most important thing.
  4. This is the fourth most important thing.
  5. This is the least important thing.

Unordered Lists

<ul>
<li>
The unordered list prepends each list item with a bullet.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
  • Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod.
  • Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
  • Maecenas faucibus mollis interdum.
  • Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Related: Lists (Components), Pagination (Components)

Marks

<mark>
Use the mark element to highlight text.

Paragraphs

<p>
Use the paragraph element to mark up—you guessed it—paragraphs:

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.

Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.

Quotes

<q>
Smart or curly quotes are applied to inline quotes—no need to add your own.

Related: Blockquotes (Elements), Blockquotes (Components)

Small

<small>
The small element is intended for inline text meant to be treated as fine print. It does not change the font-size. Add a font-size utility class (like .dcf-txt-xs) to the small element to reduce its font-size.

Related: Font Size (Utilities)

Subscripts & Superscripts

<sub>
Subscripts reduce the font-size and place copy slightly below the baseline, like H2O.
<sup>
Superscripts reduce the font-size and elevate the copy slightly above the cap line, like 22 = 4.

Tables

<table>
<caption>
<thead>
<tbody>
<tfoot>
<tr>
<th>
<td>
Table borders are collapsed and the background is made transparent.
This is a table caption.
Table heading Table heading Table heading Table heading
Table cell 16 Nullam quis risus eget urna mollis ornare vel eu leo Ornare Porta Vulputate
Table cell 387 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus Inceptos Ullamcorper Etiam
Table cell 9 Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Bibendum Sit Lorem

Related: Tables (Components)

Contributed By: 
IIM