Paragraphs, Headings, Line Breaks, and Dividers
Article ID: KB101444
Before you start thinking about the look of your web page, it's
important to first think about the content. What is the
information that you're trying to convey? It will probably be useful to begin
putting your content on your page using headings, subheadings, and paragraphs.
Here's a brief sample document that we put together, with our headings,
subheadings, and paragraphs labeled:
HEADING: PixelMill helps you to build quality web sites and
presentations.
SUB-HEADING 1: Web Sites
PARAGRAPH: PixelMill offers a large variety of web site
templates to help you build a professional web site. For beginners and
experts alike, a web site template gives you a place to start, with all the
hard design work already done!
Go see PixelMill's web site templates...
PARAGRAPH: PixelMill also has a great support area, with
tutorials on how to use FrontPage and web templates as well as helpful
articles for improving your web site. In the PixelMill newsletter and
articles area, members can read about how to improve their search engine
rankings, how to make their site accessible, or how to use images to their
advantage.
Go see PixelMill's support area...
SUB-HEADING 2: Presentations
PARAGRAPH: Besides web templates, PixelMill also has a
large selection of quality PowerPoint templates. Templates can be found in
almost any color, style, or topic!
Go see PixelMill's presentation templates...
Now let's look at how HTML tags can help lay out this page...
back to top
H1, H2, H3, H4, H5, H6
H1, H2, H3, H4, H5, and H6 are "Heading"
elements. The H1 element is the most important heading. H2, H3,
... H6 can then be used to show subheadings.
Most web browsers display headings in bold text, and display H1 at a
large text size, H2 at a slightly smaller text size, and so on. They also
put "blank lines" before and after the heading, so that it is separate from the
rest of the content. However, the size, color, and other visual display options
can be controlled with style sheets. Each heading element does have the ALIGN
attribute described below.
P
Use the <P>...</P> tags to show that a section of text is a
paragraph. Most web browsers will put an extra "blank line" before and after
the paragraph to separate it from other paragraphs. This can be controlled with
style sheets as well. Similar to headings, the P element also accepts the
ALIGN attribute, although this is also deprecated.
| H1, H2, H3, H4, H5, H6, P -
attributes |
align*
="left"
="right"
="center"
="justify" |
The align attribute can have
four different possible values. These values determine the horizontal
alignment of the element. For example, you can have a heading centered
on the page, or aligned on the right side of the page. The default
alignment is "left."
*This attribute is deprecated. It is encouraged that
you use style sheets to define the alignment of a heading. |
| Example (deprecated) |
<h1>This is a default heading.</h1>
<h2 align="center">This heading is centered.</h2>
<h3 align="right">This heading is aligned to the right.</h3>
<p align="center">This paragraph is also centered.</p>
(Note - we are not going to include the HTML, HEAD,
TITLE, and BODY tags in our examples from now on.)
See live example! |
back to top
BR
If the Paragraph element usually has white space around it, how do you
"carriage return" only one line? The BR element inserts a "line break"
in the text.
<p>This is the first line.<br> This is a new line from the line above, but
is not a new paragraph.</p>
Looks like:
This is the first line.
This is a new line from the line above, but is not a new paragraph.
Note that the BR element is an empty element - that is,
there is no closing tag needed.
HR
The HR element inserts a "horizontal rule" on your page to help
separate content. Most web browsers also put space before and after the rule. A
basic horizontal rule looks like this:
The HR element has several deprecated attributes that change the
width, height, color, or look of the horizontal rule. These can also be set by
using style sheets.
* Attributes that are marked with "*" mean that the attribute is
"deprecated." This means that while it will still work, you're encouraged not to
use it.
| HR - attributes |
align*
="left"
="center"
="right" |
This allows you specify the
horizontal alignment of the rule. The default alignment is "center."
This attribute is deprecated. You are recommended to get the same effect
using style sheets. |
| noshade* |
This attribute does not have
any values. If you put this into the HR tag, the horizontal rule will
look "flat" instead of "grooved." This attribute is deprecated. You are
recommended to get the same effect using style sheets. |
size*
="[pixels]" |
This allows you to set the
height of the rule in pixels. This attribute is deprecated. You are
recommended to get the same effect using style sheets. |
width*
="xx%"
="[pixels]" |
This allows you to set width
of the rule. You can specify a percentage amount (for example, 50% of
the browser window) or a set pixel amount. The default value is 100%.
This attribute is deprecated. You are recommended to get the same effect
using style sheets. |
| Example (deprecated) |
<hr width="50%" align="right">
<hr width="200" size="5" noshade>
See live example! |
back to top
Putting it all together...
We're going to lay out our PixelMill sample page using this code below:
<h1 align="center">PixelMill helps you to build quality web sites and
presentations.</h1>
<hr>
<h2>Web Sites</h2>
<p>PixelMill offers a large variety of web site templates to help you
build a professional web site. For beginners and experts alike, a web site
template gives you a place to start, with all the hard design work already
done!<br>
Go see PixelMill's web site templates...</p>
<p>PixelMill also has a great support area, with tutorials on how to use
FrontPage and web templates as well as helpful articles for improving your web
site. In the PixelMill newsletter and articles area, members can read about how
to improve their search engine rankings, how to make their site accessible, or
how to use images to their advantage.<br>
Go see PixelMill's support area...</p>
<hr>
<h2>Presentations</h2>
<p>Besides web templates, PixelMill also has a large selection of quality
PowerPoint templates. Templates can be found in almost any color, style, or
topic!<br>
Go see PixelMill's presentation templates...</p>
And we'll get something like this:
See live example!
Learn...
Why bother with headings and paragraphs?
Remember that "markup" is not just to make your text look different, but
it also adds meaning to your content. If a line of text is marked as a
"Heading" instead of a "Paragraph," then the web browser can make it "more
important" visually or some other way. For example, let's say that there is a
text-to-speech web browser that allows blind people to listen to the content of
a web page read aloud. It's possible that the browser could read the headings in
a louder tone, or show some other way that this is a heading. Later in this
series we'll talk more about "layout" verses "meaning."
HTML text lines fit the browser window.
If you click on the example link above and make the window bigger or
smaller, you'll see that the text "wraps" to fit the screen. You should never
try to format the text by adding extra spaces or line breaks, because you cannot
control what the user does with their window.
Multiple spaces in HTML code don't matter.
In your HTML code, spaces don't matter. For example, you could have code
that looks like this:
<p>I am trying to insert more spaces here.</p>
In the web browser, the extra spaces between "spaces" and "here" will only
count as one space.
Also, web browsers look at the TAGS, not the new lines or spaces. So, you
could have code that looks like this:
<p>This is one paragraph.</p><p>This is a new paragraph.</p><p>This is a
third paragraph.</p>
And in the web browser, you'd see three separate paragraphs of text.
What if you want to have extra spacing? In the next tutorial, we'll
look at adding special characters like an extra space, "<", "&," and more to
your web page.
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al1065/kb101444.htm
permalink to this article:
http://www.pixelmill.com/support/kb101444.htm
Back to top