Typography

Headers

Headers are used to describe such elements as website name, slogan, section titles. HTML and XHTML specifications define 6 levels of headers, where h1 is the most important and h6 is the least important.

h1 or .h1 : Header 1
Header second line

h2 or .h2 : Header 2
Header second line

h4 or .h3 : Header 3
Header second line

h4 or .h4 : Header 4
Header second line

h5 or .h5 : Header 5
Header second line
h6 or .h6 : Header 6
Header second line

Block elements

Block quote

The blockquote element is used to indicate the quotation of a bigger section of text from another source. Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form.Wikipedia, The Free Encyclopedia

Preformated text

 ______     __    __     ______     ______     ______     ______
/\  __ \   /\ "-./  \   /\  __ \   /\  == \   /\  ___\   /\  ___\
\ \  __ \  \ \ \-./\ \  \ \ \/\ \  \ \  __<   \ \ \____  \ \  __\
 \ \_\ \_\  \ \_\ \ \_\  \ \_____\  \ \_\ \_\  \ \_____\  \ \_____\
  \/_/\/_/   \/_/  \/_/   \/_____/   \/_/ /_/   \/_____/   \/_____/

Phrase elements

em

Element used to put emphasis on certain information. Most browsers display emphased text in italics by default.

Sample: This is emphasied text.

strong

This element stands for "stronger emphasis" and is used for marking more important text.

Sample: This is text with stronger emphasis

cite

According to W3C specification, we use cite element to define source of a quotation or reference.

Sample: This is quotation source

dfn

Element used to markup inline definition of a single term.

Sample: This is definition

code

This element informs the browser that it contains a computer code, such as XHTML markup.

Sample: document.write("Hello world");

samp

Defines computer output data, for example we can use it to markup error messages

Sample: Error: no such file or directory

kbd

Means information that should be entered by the user.

Sample: press Alt + F4 to close this window. ESC

var

Means variables used in computer programs or scripts.

Sample: counter

abbr

Abbreviation / a shortened form of a word or phrase

Sample: dr

acronym

Acronym / a word formed from the initial letters of other words

Sample acronyms: XHTML

q

Inline quotation

Sample: This is sample quotation

Lists

Unordered List

  • Apple
  • Pear
  • Banana
  • Orange
  • Carrot

Ordered List

  1. First
  2. Second
  3. Third
  4. Fourth

Definition List

Definition List Title
This is a definition list division.
Inkscape
Open Source vector graphics editor
SVG
Scalable Vector Graphics
W3C standard
GIMP
GNU Image Manipulation Program
Drupal
Content Management System

Nested lists

  1. one, two
    1. buckle my shoe
  2. three, four
    1. knock at the door
  3. Five, six
    1. pick up sticks
  4. Seven, eight, lay them straight
    1. Nine, ten, a big fat hen
    2. Eleven, twelve, dig and delve
    3. Thirteen, fourteen, maids a’courting
    4. Fifteen, sixteen, maids in the kitchen
    5. Seventeen, eighteen, maids a’waiting
    6. Nineteen, twenty, my platter’s empty …

Nested lists 2

  • one, two
    • buckle my shoe
  • three, four
    • knock at the door
  • Five, six
    • pick up sticks
  • Seven, eight, lay them straight
    • Nine, ten, a big fat hen
    • Eleven, twelve, dig and delve
    • Thirteen, fourteen, maids a’courting
    • Fifteen, sixteen, maids in the kitchen
    • Seventeen, eighteen, maids a’waiting
    • Nineteen, twenty, my platter’s empty …

p or .p : Paragraphs

According to Wikipedia: a paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. The start of a paragraph is indicated by beginning on a new line. Sometimes the first line is indented; sometimes it is indented without beginning a new line.

A paragraph typically consists of a unifying main point, thought, or idea accompanied by supporting details. The non-fiction paragraph usually begins with the general and moves towards the more specific so as to advance an argument or point of view. Each paragraph builds on what came before and lays the ground or run the length of multiple pages, and may consist of one or many sentences. When dialogue is being quoted in fiction, a new paragraph is used each time the person being quoted changed.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. SNCF par senticad.

Tables

Table title goes here
Mauris Tempor Praesent lacus nulla Quis
Mauris 23.000 Suspendisse viverra Yes
Trupis 1.000 Placerat tortor aesent semper No
Sagittis 122.000 Neque vel condimentum No
Libero 500 Hendrerit, lectus elit pretium Yes
Tristique 100.000 Ligula nec consequat Yes
Id Neque 600.000 Etiam sodales orci nec No

Other elements

Subscript and superscript samples

H2O,

E = mc2,

The 14th of September

Insertion and deletion samples

This information was just added.
While this information is no longer valid.

Presentational elements

Bold text
Italic text
Typewriter text
Big
Small

Horizontal rule:

UTF-8 test

Ä, ä, Ö, ö, Ü, ü, ß

Š Ť Ž Ľ Č Ě Ď Ň Ř Ů Ĺ

ХЦЧШЩЬЫЪЭЮЯ