HTML Text Elements

This document highlights our meticulous approach to styling standard HTML text elements in zenCSS.


label
Eyebrow

Headline

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph copy. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci distinctio eius quaerat voluptatum omnis animi culpa nesciunt iste eveniet rerum! Ea eligendi eveniet explicabo saepe officiis laudantium quam temporibus quos. Ex veritatis, corporis veniam autem non sequi quis iste eligendi, repudiandae laboriosam labore voluptas laudantium reprehenderit officia facere odit error fuga tenetur!

line of small copy

line of lead copy

Blockquote
image of person

Description of image

Line of supporting copy

Lists

Ordered and unordered lists:

Unordered List (ul)

  • List item one
  • List item two
  • List item three

Ordered List (ol)

  1. First item
  2. Second item
  3. Third item

Text Formatting

Bold text is defined with the "strong" tag.

Italicized text is defined with the "em" tag.


Images with Descriptions

Images can be included using the "img" tag and can be described using "figcaption" within a "figure".

This is a description of the image.

Blockquotes

The blockquote tag is used to define a section that is quoted from another source:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

Inline Code

Use the code tag to denote inline code:

For example, let x = 10; is a JavaScript declaration.


Preformatted Text

The pre tag is used to display preformatted text, which preserves both spaces and line breaks:

        function greet(name) {
          console.log('Hello, ' + name + '!');
        }
        greet('World');
                    

Strong and Emphasized Text

The strong tag is used to indicate strong emphasis, and the em tag for emphasized text:

This is a strong element. This is an emphasized element.


Small Text

The small tag is used to create smaller text:

This is some text with a small element inside it.


Marked or Highlighted Text

The mark tag defines text that should be marked or highlighted:

Do not forget to buy milk today. Marks themed with any of our bg- color classes.


Deleted and Inserted Text

The del tag can be used to represent deleted text, and the ins tag for inserted text:

She bought two five apples.


Subscript and Superscript

Subscript text appears half a character below the normal line, and superscript text appears half a character above it:

This is subscript and superscript text.


Abbreviations and Acronyms

The abbr tag is used to define an abbreviation or an acronym:

The WHO was founded in 1948.


Citations

Use the cite tag to define the title of a work:

The Scream by Edvard Munch. Painted in 1893.


Address Element

The address tag is used to define contact information for the author/owner of a document or article:

Written by Jon Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA

Bidirectional Override

The bdo tag is used to override the current text direction:

This text is reversed: This example is reversed.


Variable Element

The var tag is used to denote a variable in programming or in a mathematical expression:

The variable x could be equal to y.


Keyboard Input

The kbd tag is used to define keyboard input:

To save the document, press Ctrl + S.


Sample Output from a Computer Program

The samp tag is used to define sample output from a computer program:

Error: File not found.


Definition Element

The dfn tag is used to specify a term that is being defined within the context of a definition phrase or sentence:

The HTML is the standard markup language for creating web pages.


Code Element

The code tag is used to define a piece of computer code:

console.log('Hello, world!');


The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.