Paragraphs and Headings in HTML
Posted The: 17/03/2008 At: 5:57
Last Edited: 21/07/2009 At: 2:18
Contents:
A Paragraph is a section of text, generally same rules apply as in books. However line breaks seam to occur more frequently in text on webpages, which seams to increase readability when done right.
Paragraphs
Tags are what defines the content of the website. In theory you could just write plain text to the browser, but in practice you may want to apply styles to your text, or even divide your page in sections, using div elements.
This is where tags come in, elements generally consist of a start tag, and a closing tag. The p tag for instance, stands for paragraph, and is used to markup text in in your page. Browsers generally render most elements with a default style, this can be changed through CSS.
<p>This is a Paragraph</p>
To force a line break, we use the br tag, see below.
<p>This is a Paragraph<br>With a single line-break</p>
Headings
Like we have headlines in books, newspapers, and magazines. Etc. We also got headlines in on web pages, these are defined using the headline tags. Again its easy to remember, as headlines are defined to the h1-h6 tags, they also have their own default style, which can be changed with CSS, See also: Styling Paragraphs and Headings using CSS
<h1>h1 - Headline1</h1> <h2>h2 - Headline2</h2> <h3>h3 - Headline3</h3> <h4>h4 - Headline4</h4> <h5>h5 - Headline5</h5> <h6>h6 - Headline6</h6>
The above would result in something like:
Normally we have one main headline (The h1), used for the main topic of the page or article, followed by subsections, indicated by lower headings (h2-h6). The correct usage, would be to use h1 first, and h2 for subsections of h1, h3 for subsections of h2, and so forth.
It can be considered valid to have multiple h1s on a page, an example would be to include a h1 above your navigation, since your navigation most likely isn't a part of the main article.
Note. Both Paragraphs and Headlines, are Block-Level elements.
The next Tutorial is: Images and Links
Comments: [0]
