HTML: Headings and Paragraphs Now that you know how to create a basic web page you'll begin to work with some common elements such as headings and paragraphs.
Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the largest heading. <h6> defines the smallest heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Line Breaks
Use the <br /> tag if you want a line break (a new line) without starting a new paragraph.
<p>This is on one line <br />
and this is on another.</p>
Horizontal Rules
Use the <hr /> tag if you want to separate content on a page with a horizontal rule
<p>This is above the rule
<hr />
and this is below it.</p>
HTML Formatting Tags
HTML uses tags like <b> and <i> for formatting output, like bold or italic text. These HTML tags are called formatting tags.
| <strong> |
Defines strong text |
This text is strong |
| <em> |
Defines emphasized text |
This text is emphasized |
| <sub> |
Defines subscripted text |
This text is subscript |
| <sup> |
Defines superscripted text |
This text is superscript |
| <blockquote> |
Defines a long quotation |
This text is a long quotation note: will ident the text on both the left-hand and right-hand margins |
| <cite> |
Defines a citation |
This text is a citation - note: used properly around bibliographic citations |
Examples
Here is an example of three sections of text. Top and bottom are both paragraphs while the center is a blockquote.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software including versions of Lorem Ipsum. Here is an example:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia elit eu tortor. Cras tellus eros, blandit ut, facilisis eu, sollicitudin et, risus. Quisque porta, nisi id sodales scelerisque, libero dui adipiscing massa, non condimentum tellus nisl vel justo. Integer convallis nunc blandit libero. Suspendisse a lacus sit amet ante tristique gravida.
Why Do We Use Lorem Ipsum? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
created: 2009-04-07 |