HTML Text Elements
This document highlights our meticulous approach to styling standard HTML text elements in zenCSS.
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 copyline of lead copy
Blockquote
Description of image
Line of supporting copyLists
Ordered and unordered lists:
Unordered List (ul)
- List item one
- List item two
- List item three
Ordered List (ol)
- First item
- Second item
- 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".
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:
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.