What kind of code defines where text breaks to a new paragraph?

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Contents

  • 1 Lines and Paragraphs
  • 2 The
    Element
    • 2.1 The ALIGN Attribute
  • 3 The Paragraph Element
    • 3.1 The ALIGN Attribute
    • 3.2 The CLEAR Attribute
    • 3.3 Is the P Endtag Required?
  • 4 Text Alignment
  • 5 Justification
  • 6 Indenting
    • 6.1 Indenting a Paragraph
    • 6.2 Indenting a Section of a Page
    • 6.3 Indenting the Whole Page
    • 6.4 Indenting the First Line of Each Paragraph
  • 7 The
    Element
    • 7.1 The CLEAR Attribute
  • 8 The CENTER Element
  • 9 The
    Element
    • 9.1 The NOSHADE Attribute
    • 9.2 The SIZE Attribute
    • 9.3 The WIDTH Attribute
    • 9.4 The ALIGN Attribute
  • 10 The
     Element
  • 11 The “ Element
  • 12 The “ Element

Lines and Paragraphs

This section describes HTML associated with lines and paragraphs. We begin with the basic

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

8 and

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

9 tags.

Please note: This tutorial includes deprecated tags and attributes.
This tutorial is provided for historical value. Some of the tags and attributes presented in this tutorial have been deprecated and should not be used. Browser support for deprecated elements and attributes may be limited and using them may produce unexpected results.

For a detailed look at modern html refer to our tutorials on semantic markup, HTML document structure, and fonts and web typography.

The

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

8 Element

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

8, a block-level element, simply defines a block of content in the page. Beyond defining a block,

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

8 itself doesn’t do anything. For example, the following code creates a

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

8 element with two paragraphs inside of it. Notice that you can put

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

9 elements inside a

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

8.

This is stuff before the 
.
This is stuff inside the
.

This is more stuff inside the

.

This is stuff after the
.

Which gives us:

This is stuff before the

before the table

Dawn1-2028
Mary K1-4952
after the table
6.

This is stuff inside the

before the table

Dawn1-2028
Mary K1-4952
after the table
6.This is more stuff inside the

before the table

Dawn1-2028
Mary K1-4952
after the table
6.

This is stuff after the

before the table

Dawn1-2028
Mary K1-4952
after the table
6.

The 0 Attribute


0 sets the alignment of the contents of the

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

8 element. All four values,

3,

4,

5, and

6, are all well supported.

3 is the default value.
This code shows the default:

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!

Which gives us:

This would be a great time for a cup of coffee, don’t you think? How about that! Let’s drink coffee all day!

The Paragraph Element

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

9 indicates the start of a new paragraph. This is usually rendered with two carriage returns, producing a single blank line in between the two paragraphs:

This is the first paragraph. 

And this is the second paragraph.

Which produces this:

This is the first paragraph.And this is the second paragraph.

The 0 Attribute


0 indicates the alignment of the paragraph.

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

Which produces this:

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

The

Get Centered

1 Attribute

Get Centered

1 is recognized by some browsers and works very much like

Get Centered

3. However, it is not standard HTML and is still widely unsupported, so use

Get Centered

3 instead.

Is the P Endtag Required?

The W3C says of

Get Centered

5: “The end tag is optional as it can always be inferred by the parser.” This means that a new

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

9 implies the end of the previous

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

9 (and any alignment set by the previous

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

9).

Any other block level element, such as

Get Centered

9 or
This is a center aligned bunch of text

It stays center aligned because it is within a DIV which has a center aligned style.

Each element within the center aligned DIV inherits the center aligned style.

0 should also end the paragraph. However, it doesn’t always work out that way. Some browsers, for example, will right-align the text even after a table. In the following example, MSIE renders the “after the table” part as right aligned, while Netscape renders it as left aligned:

before the table

Dawn1-2028
Mary K1-4952
after the table

What kind of code defines where text breaks to a new paragraph?

What kind of code defines where text breaks to a new paragraph?

MSIE’s renderingNetscape’s rendering

If you set the alignment or other style property for a paragraph element it’s best to use

Get Centered

5. If you never use set any styles then you can generally ignore

Get Centered

5.

See W3C’s specs for paragraphs for more information on this topic.

Text Alignment

You can set the alignment of any HTML element using the

This is a center aligned bunch of text

It stays center aligned because it is within a DIV which has a center aligned style.

Each element within the center aligned DIV inherits the center aligned style.

3 style rule.
This is a center aligned bunch of text

It stays center aligned because it is within a DIV which has a center aligned style.

Each element within the center aligned DIV inherits the center aligned style.

3 can be used to set the alignment for a paragraph, a section of the document, or even the whole document.
This is a center aligned bunch of text

It stays center aligned because it is within a DIV which has a center aligned style.

Each element within the center aligned DIV inherits the center aligned style.

3 can be used to set alignment to left, right, center, or justified.

For example, suppose we want to center a paragraph. First, we’ll create a styles class called

This is a center aligned bunch of text

It stays center aligned because it is within a DIV which has a center aligned style.

Each element within the center aligned DIV inherits the center aligned style.

6 by putting the following code into the “ section of the document:


Now we can set any paragraph to centeralign class like this:

Get Centered

Which gives us this:

.centeralign{text-align: center;}

Get Centered

We can apply the same class to a

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

8 element to center a section of the page:

This is a center aligned bunch of text

It stays center aligned because it is within a DIV which has a center aligned style.

Each element within the center aligned DIV inherits the center aligned style.

Which gives us:

This is a center aligned bunch of textIt stays center aligned because it is within a DIV which has a center aligned style.

Each element within the center aligned DIV inherits the center aligned style.

Justification

By default, most browsers render text with a jagged right edge.

If you want all text rendered like in a book with an even right edge you can use a single style rule. To set all text to justified copy the following code into the “ section of your document.


The problem with justification is that many browsers get confused about where the last line of text is (which shouldn’t be justified). For example, MSIE 4.x is confused when a block of text is immediately followed by a table. Notice in this image that the last line of text stretches the words “one of our agents” across a full line:

What kind of code defines where text breaks to a new paragraph?

To remedy this situation surround all blocks of text with

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

9 and

Get Centered

5:

The special runs through August 16th, at which time we are required by federal law to revert to the old rates. Call one of our agents:

Hunter 1-2039
Garland 1-3593

Now our errant MSIE renders things more sanely:

What kind of code defines where text breaks to a new paragraph?

Indenting

There are several ways to indent paragraphs and entire sections of your web page. The next few sections describe the four main techniques for indentation:

  • Indenting a Paragraph
  • Indenting a Section of the Page
  • Indenting the Whole Page
  • Indenting the First Line of Each Paragraph

Before we begin, however, it’s worth saying a few words about

This is a center aligned bunch of text

It stays center aligned because it is within a DIV which has a center aligned style.

Each element within the center aligned DIV inherits the center aligned style.

0. There’s a popular misconception that
This is a center aligned bunch of text

It stays center aligned because it is within a DIV which has a center aligned style.

Each element within the center aligned DIV inherits the center aligned style.

0 should be used to indent sections of the page. This belief comes from the fact that most visual web browsers render quoted text as indented. Remember, however, that HTML is not a formatting language and gives unpredictable results when you attempt to use it as one. Use
This is a center aligned bunch of text

It stays center aligned because it is within a DIV which has a center aligned style.

Each element within the center aligned DIV inherits the center aligned style.

0 if you have a quoted block of text, otherwise use the techniques described in the next few paragraphs.

Indenting a Paragraph

You can indent a single paragraph using styles. For example, suppose we want to indent a paragraph 50 points. First, we create a class called indented with the following style rules. Put this code in the “ section of your document.

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
0

Now we set the class of the paragraph to indented by adding a CLASS attribute to the

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

9 tag:

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
1

Which gives us this indented paragraph:

.indented{padding-left: 50pt; padding-right: 50pt;}

You don’t know about me without you have read a book by the name of The Adventures of Tom Sawyer; but that ain’t no matter. That book was made by Mr. Mark Twain, and he told the truth, mainly. There was things which he stretched, but mainly he told the truth. That is nothing. I never seen anybody but lied one time or another, without it was Aunt Polly, or the widow, or maybe Mary. Aunt Polly — Tom’s Aunt Polly, she is — and Mary, and the Widow Douglas is all told about in that book, which is mostly a true book, with some stretchers, as I said before. – Opening to Huck Finn

Indenting a Section of a Page

To indent more than one paragraph we’ll use the same style as we set in the previous example. Put this code in the “ section of your page:

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
0

Then we’ll use the indented class in a

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

8 element:

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
3

Which gives us an indented section like this:

Household Hazardous Waste
These items can be brought to the recycling center for redistribution. This is much better than throwing them out.

  • Household cleaners
  • Computers and computer accessories
  • Clothes

Indenting the Whole Page

If you want the entire page indented, set a style rule which sets right and left padding for the “ element. For example, this style sets the right and left padding to 100 pixels:

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
4

What kind of code defines where text breaks to a new paragraph?
This technique is popular when used in combination with a background image. For example, suppose we want this image to run down the left side of the page.

This image is 56 pixels wide, so let’s set the padding to 60. The following style sets the background image, sets the repeat to repeat-y (only repeat vertically down the left side of the page) and sets the left padding to 60 (we won’t set the right padding).

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
5

Here’s how that might look:

.background-indent{background-image:url(“/wp-content/uploads/blue.edge_.gif”); background-repeat:repeat-y; padding-left:60px; width:100%; overflow: auto;} Household Hazardous Waste These items can be brought to the recycling center for redistribution. This is much better than throwing them out.

  • Household cleaners
  • Computers and computer accessories
  • Clothes

Indenting the First Line of Each Paragraph

To indent the first line of each paragraph set a style rule using text-indent. For example, the following code indents the first line of each paragraph 30 points. Copy this code into the “ section of your page:

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
6

This code indents the first line of each

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

9 element, but you’ll probably run into an annoying problem. If you’re like most designers you probably don’t put a P before the first paragraph or between a header like

6 and the text that follows it. Unfortunately, that’s exactly what you’ll need to do if you want the paragraph indented. The text in these situations is part of something called “anonymous blocks” and cannot be referred to directly. To indent it you must put the text in a

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

9 element.

So, for example, the following code does not have a

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

9 between the header and the text, so the text is not indented:

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
7

Which gives us:

My Story
This paragraph is not indented.

This code does have a

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

9 between the header and the text, so the text is indented:

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
8

.indented-p{text-indent: 30pt;}My Story

This paragraph is indented.

The

Get Centered

3 Element

Get Centered

3 inserts a single carriage return. Whereas

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

9 indicates the start of a new paragraph,

Get Centered

3 only implies a carriage return within the same paragraph.

Get Centered

3 is usually rendered with a single carriage return.

For example, this code:

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
9

Which produces this:

There once was a man from Nantucket
Who kept all his dough in a bucket
His daughter name Nan
Ran away with a man
And as for the bucket, Nantucket

Because

Get Centered

3 does not start a new paragraph, all the current paragraph attributes stay the same:

This is the first paragraph. 

And this is the second paragraph.

0

Which produces this:

There once was a man from Nantucket
Who kept all his dough in a bucket
His daughter name Nan
Ran away with a man
And as for the bucket, Nantucket

The

Get Centered

1 Attribute

Get Centered

1 says that in addition to inserting a line break, if there is a picture or other object to the right or left, go past that too. For example, this code says that the picture should be aligned on the left side of the page. Then there is some text, then

3. The text following that is past the picture:

This is the first paragraph. 

And this is the second paragraph.

1

Which produces this:

What kind of code defines where text breaks to a new paragraph?
Come on down to the Halloween party!You’ll have a great ol’ time.
8:00pm to midnight. Wear a costume or come as your own scary self!

The special runs through August 16th, at which time we are required by federal law to revert to the old rates. Call one of our agents:

Hunter 1-2039
Garland 1-3593
9 is the same as
This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
00, but is not supported on as many browsers, so use
This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
00 instead.

The 4 Element

Usage Recommendation: Use

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

8 instead.

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
04 is exactly equivalent to
This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
05. “ is being phased out. Use
This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
05 instead.

This is the first paragraph. 

And this is the second paragraph.

2

Which gives us:

Hi There! Let’s talk about stuff!

Which is the same as:

This is the first paragraph. 

And this is the second paragraph.

3

Which gives us:

Hi There! Let’s talk about stuff!

The

Get Centered

9 Element

Get Centered

9 draws a horizontal line (a “horizontal rule”) across the page. That’s it. For such a simple concept, horizontal rules are surprisingly popular. Let’s start with the basics.

Get Centered

9 has no end tag and requires no attributes:

This is the first paragraph. 

And this is the second paragraph.

4

Which creates this rule:

Some text up here


Some text down here

Get Centered

9 is usually indicates a division in the page. Stuff before the rule is in a different “section” from the stuff after. For that reason many designers consider

Get Centered

9 a logical tag, not a layout tag.

The
This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
12 Attribute

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
12 indicates that the rule should be presented as flat instead of three dimensional. Compare this regular horizontal rule:


With a

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
12 rule:

This is the first paragraph. 

And this is the second paragraph.

5

Which gives us:


This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
12 is often used in conjunction with
This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
16:

This is the first paragraph. 

And this is the second paragraph.

6

Produces this rule:


This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
12 is popular because browsers usually don’t render three-dimensional rules very well. Indeed, in many circumstances the rule is presented in the same color as the background, rendering it almost invisible.

The
This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
16 Attribute

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
16 indicates the height of the rule. (I guess calling it “HEIGHT” would have just been too easy.) For horizontal width see
This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
20. Compare some of these sizes:

This is the first paragraph. 

And this is the second paragraph.

7

Which gives us these rules:





Browsers will generally not render an

Get Centered

9 any bigger than 100.

The
This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
20 Attribute

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
20 sets the horizontal width of the rule. You can express the size in pixels or as a percentage.

These

Get Centered

9‘s are set with pixel widths:

This is the first paragraph. 

And this is the second paragraph.

8

Which gives us these rules:




This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
20 is usually expressed as a percentage. If you use a percentage width, be sure to enclose the value in quotes.

This is the first paragraph. 

And this is the second paragraph.

9

Produces these rules:




The default is 100%. By default the rule is centered. To set a different alignment use


0.

Percentage widths use the percentage of the available width, not the full width of the page. For example, if the rule is in a table then the width is a percentage of the width of the table cell.

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

0

Which produces this table:

Hey, whatever dude!


A stitch in time saves nine

The 0 Attribute


0 sets the alignment of the rule. ALIGN is only useful if you also use
This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
20.

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

1

Give us this:




The
This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
30 Element

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
30 is one the handiest tags in the HTML toolbox.
This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
30 marks the text as “preformatted” — all the spaces and carriage returns are rendered exactly as you type them.

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

2

Which produces this:

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
30 text is rendered in a fixed width font, meaning that all characters and spaces are the same width. Fixed width makes it easy to lay out the text just the way you want it, so
This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
30 is great for creating “quick and dirty” tables like the one above.

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
30 does NOT cause the browser to ignore tags. You can still create links and other goodies:

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

3

Produces this:

When you start adding markup, it gets harder to see how the text turns out (spacing your tags out evenly like the table above helps).

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
30 is often used to quote large blocks of text that you don’t want to “HTMLize”, but a “ could mess up the text. For a table larger than a few lines, it is usually easier in the long run to use table code.

The “ Element

“ prevents a carriage return from occurring. For example, the following code produces a nonsense poem of one long line:

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

4

Which produces this:

Twisting and turning, spinning and shouting, hissing and roaring, fearing and jeering, stomping and yelling, running and jumping, peeling and dicing, cooking and weighing, costing and pricing, eating and drinking, all in a day’s work.

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
37:

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

5

Which produces this:

Twisting and turning,
spinning and shouting,
hissing and roaring,
fearing and jeering,
stomping and yelling,
running and jumping,
peeling and dicing,
cooking and weighing,
costing and pricing,
eating and drinking,
all in a day’s work.

The “ Element

This would be a great time for a cup of coffee, don't you think? How about that! Let's drink coffee all day!
38 to prevent line breaks in a section of text, and then you want to say “but you can break HERE if you want”. “ does not force a line break, it merely allows one:

This is aligned left. This is the default.

This is aligned center.

This is aligned right.

6

Produces:

Maybe it’s because every time I get to the last line I feel like I have so much left to say that I have to try to push and fit and cram as many words I can think of as I possibly can

What kind of technology can traffic engineers use to determine the best timing for red light cycles?

By receiving and processing data from strategically placed sensors, ASCT can determine which lights should be red and which should be green.

Which commonly used programming language is used to manage access and search for database content?

SQL (Structured Query Language) SQL is a database query language (not a development language) that allows for adding, accessing and managing content in a database. It is the language that allows programmers to perform the common acronym CRUD (Create; Read; Update; Delete) within a database.

What characteristics makes this password insecure?

7 Characteristics of Weak Passwords (Infographic).
Repeating previously used passwords..
Names of close family members or friends..
Your name..
Words in the dictionary..
Common names..
Repeating your login code..
Keyboard patterns and swipes (i.e., 123456 or QWERTY).

What type of data does a file of digital animation store quizlet?

Instead of storing moving images, a digital animation stores data about the color and brightness of each frame.