HTML Notes #2 – Headings and Paragraphs
Summary
The content within your “body” tags of your html page will start to get very “cramped” for space with just a couple of additions. Enter the paragraph element. Its usage is described below and pretty much what you’d think. It separates a paragraph from other items on your page.
Here is a second paragraph under the “h1” tag starting with HTML Notes2 on the page you’re reading. With headings, paragraphs, bold and italic tags, you can create some very meaningful, very readable, text-based HTML pages right away. Below is an example.
Example:
<html>
<head>
<title>Headings, Paragraphs, Breaks, Bold and Italic</title>
</head>
<body>
<h1>Heading 1 Will Be The Largest Heading</h1>
<p>You would then have some content, hopefully relating to <i>heading 1</i>.
I would recommend NOT having carriage returns in your HTML source.
For one, it is misleading to think the page will look like this,
as white space is ignored in HTML. One sentence will follow the other,
more than one space will be reduced to one space,
and the text will automatically be wrapped by the web browser.</p>
<h2>Heading 2 Will Usually Be Smaller than H1</h2>
<p>Some people say you should <b>never</b> skip headings,
going from h1 to h3, for example. I won't tell on you if you do,
but know there is a better way to adjust sizes of text called CSS.
That is a complete tutorial on its own...</p>
<h3>Heading 3: A Note on Breaks</h3>
<p>Here is some of the text using the "break" tag,<br>
which acts like a carriage return. In general, it's better<br />
to leave the returns up to the web browser, as everyone<br>
has different size font, screens, etc. If you find yourself<br />
using a lot of "break" tags, there is probably a better way<br>
to write your HTML.</p>
</body>
</html>Go to the first HTML page if you are not sure how to test the example.
Remarks
The break tag has no beginning or ending, it is called an “empty element”. There is nothing “in” it, the tag only forces a return. You can write the break tag two different ways and I don’t know of any web browsers that will complain about either one (I used both above so you can test and see). If you want the more “modern” one that will be compatible with XHTML, then use the one with the space-plus-slash, “<br />”
b is for bold – Makes the text between the tags bold.
br is for break – Forces a carriage return in the text. Use sparringly.
h1, h2, …, h6 – Heading tags similar to those used in a word processor program.
i is for italic – Makes the text between the tags italic.
p Paragraph tag – In web pages, paragraphs are separated by space. There is no need to try and add indentation to the start of a paragraph in order to make it stand out.
