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.
Header 1 Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna.
Header 2 Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna.
Header 3 Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna.
Header 4 Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna.
Header 5 Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna.
Header 6 Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna.
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
___ _ / _ __ _ _ _ __ __ _| | // This is preformated text / / / '__| | | | '_ / _` | | / /_//| | | |_| | |_) | (_| | | /___,' |_| __,_| .__/ __,_|_| |_|
Phrase elements
em
Element used to put emphasis on certain information. Most browsers display emphasized text in italics by default.
Sample: This is emphasized text.
strong
This element stands for “stronger emphasis” and is used for marking more important text.
Sample: This is text with stronger emphasis
code
This element informs the browser that it contains a computer code, such as XHTML markup.
Sample: document.write("Hello world");
q
Inline quotation
Sample: This is sample quotation
Lists
Unordered List
- Apple
- Golden Delicious
- Granny Smith Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- Idared Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- McIntosh
- Pear
- Banana
- Orange
- Carrot
Unordered List with Links
- Apple Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- Golden Delicious
- Granny Smith
- Idared
- McIntosh
- Pear
Ordered List
- First
- Second
- Third
- Fourth
Nested lists
- 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…
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.
In (X)HTML, the p element marks a block of text as a paragraph – the opening tag <p> marks the beginning of a paragraph, and the closing tag </p> marks the end of a paragraph. The end tag is optional for legacy HTML as the browser automatically starts another paragraph at the next <p> tag, or the nextblock element.
Tables
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
Presentational elements
Bold text
Italic text
Typewriter text
Big
Small
Horizontal rule: