Loading... Please Wait...
Loading... Please Wait...

Search Support

Search our knowledgebase? Enter keywords or article id:

> go to search support


Support Index


Help and Support

PixelMill Live Help

Search

Enter keyword or id#:




Browse


Promotions


Quick Links

Printable Article

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:

Not helpful Very helpful
1 2 3 4 5 6 7

Email address: (not required)

(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. Your 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://shop.pixelmill.com/support/al1065/kb101444.htm
permalink to this article: http://shop.pixelmill.com/support/kb101444.htm

Back to top



PixelMill EDU

Introducing...

PixelMill EDUâ„¢ is an innovative and proprietary online training series designed to aid the do-it-yourself Web builder in transitioning to new Web editors, coding standards, and Web technologies.

Webinars and Seminars:

FrontPage to SharePoint Designer Series
This is a 6-Week series designed to give you strong exposure to the new SharePoint Designer web editor and interface, along with examples of working with Windows SharePoint Services and tips for transitioning from FrontPage.
Register Now!

Tables to Tableless CSS Series
This is a 6-Week series designed to help you transition from building Tables-based Web site layouts to working with CSS to edit and build Tableless Web site layouts. For all Web builders using Dreamweaver, Expression Web, or any other web editor.
Register Now!

FrontPage to Expression Web Series
This is a 6-Week series designed to give you strong exposure to the new Expression Web software and interface, along with tips for transitioning from FrontPage.
Register Now!

Learn more and register!

ADVERTISEMENT
adventisement

Social


Contact Us

Phone: (866) PIXELMILL
(866) 749-3564
Int'l phone: 1 (530) 297-3662

105 E St, Suite 310
Davis, CA 95616 USA

Payment Methods

Visa Mastercard American Express Discover PayPal Personal check Purchase Order