Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Styling for less common elements

abbr, b, strong, code

The name of the element abbr is an abbreviation on its own.

Each abbr-element has a title-attribute that shows when you hover on the element. Since mobile devices do not have a hover-option to show the contents of the title-attribute, we can make use of CSS function attr to refer to attribute title.

@media (hover: none) {
  abbr[title] {
    text-decoration: none;
  }
  abbr[title]::after {
    content: ' (' attr(title) ')';
  }
}

blockquote

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, ...

cite

A cite-element defines the title of a work.

Comb Hommes by Terluin Webdesign.

dd, dl, dt

dd

Element dd defines a definition description.

dl

Element dl defines a definition list.

dt

Element dt defines a definition term.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

del, s, ins

The del-element represents text that is deleted. This is often used to strike through the original price: €100 €75.

details, summary

The details-element has a summary-element that contains text that is shown. All text inside the details-element that comes after the summary-element can be shown when clicked.

Some details

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Read more

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

dfn

dfn is an HTML-element that specifies a term that is going to be defined within the content.

dialog

Open dialog

Field

Cancel

Confirm

em, i

HTML-element em is used to emphasize text, while HTML-element i defines a part of text in an alternate voice or mood. Both elements are displayed in italic.

fieldset, legend

Fieldset legend

Text input

Email input

figcaption, figure

hr

The hr-element defines a thematic change in the content. It is often displayed as a horizontal rule.

---

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

iframe

kbd

The kbd-element is an HTML-element that represents a key on your keyboard, for instance: Enter, Shift, Ctrl, Alt, and F4.

li, ul, ol, nav

Element li is a list item, ul is an unordered list, and ol is an ordered list.

• List item in unordered list
• List item in unordered list
• List item in unordered list

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

1. List item in ordered list
2. List item in ordered list
3. List item in ordered list

mark

The mark-element is used to mark specific parts of a text.

meter

The meter-element is used to display a gauge (a scalar value within a given range).

progress

The progress-element represents the completion progress of a task.

Downloading (99%): 99%

q

The q-element is used to mark up a short quotation like Lorem ipsum dolor sit amet, consectetuer adipiscing elit. and such short sentences.

samp

The samp-element defines text that is output from a computer program, for instance: Boot Device Not Found.

small

The small-element makes text smaller compared to the rest of the text.

sub, sup

The sub-element defines subscripted text, for instance the zero in H₂O. The sup-element defines superscripted text, for instance the two in x².

svg

The svg-element is a container for SVG graphics:

table, tbody, td, tfoot, th, thead, tr

Process	Time (ms)
Loading	19
Scripting	92.4
Rendering	114.2
Painting	14.6
System	51.8
Total (ms)	292

u

The u-element is used to mark up mispeld text.

var

The var-element is used to mark up a variable. The hypotenuse of a triangle where side A and side B are both 1 centimeter, is

1.4142

.

video

@media (hover: none) {
  abbr[title] {
    text-decoration: none;
  }
  abbr[title]::after {
    content: ' (' attr(title) ')';
  }
}