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.
