Scribd
Upload
2 views

2--Text-Elements

Uploaded by

alrokhomer
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
2 views

2--Text-Elements

Uploaded by

alrokhomer
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 8

Text Elements

T. Samih Mohamed
E.mail [email protected]
XHTML Text Elements
An XHTML element is a component of an XHTML document. It is typically
comprised of a start tag, an end tag, and some web content in between the
start and end tag.
We've already learned about the <html>, <head>, <body>, <meta>, and
<title> elements. Now let's learn some elements that we'll use to present
actual text content on our web page:

<p> Paragraph
<br> Line Break
<hr> Horizontal Rule
<h1> - <h6> Headings
<ul> Unordered List
<ol> Ordered List
<li> List Item
The <p> Element
The standard way of presenting blocks of text in an XHTML document is to
use the <p> ("paragraph") element:
<body>
<p>This is a paragraph of text. We can make it as long as we
wish. The browser will automatically wrap the lines to accommodate the
size of the browser window.</p>
<p>This is the second paragraph of text.</p>
</body>

The paragraph element adds a blank


line above and below the text.

Text content can also exist in an XHTML


document all by itself. However, this is
not recommended, as it's easier to format
and style text inside a <p> element, as
we'll learn later in the course.
The <br> Element
The <br> ("break") element creates a line break without adding any blank
lines above or below:
<body>
<p>This is a paragraph of text. We can make it as long as we
wish. The browser will automatically wrap the lines to accommodate the
size of the browser window.</p>
<p>This is the second <br />paragraph of text.</p>
</body>

A handful of elements do not use a


separate closing tag. We already
saw the <meta> element from the
first lesson. <br> is another
example. In these cases, the
forward slash is placed at the end of
the opening tag itself, and these are
known as self-closing elements.
The <hr> Element
The <hr> ("horizontal rule") element draws a horizontal line across the screen:
<body>
<p>This is a paragraph of text. We can make it as long as we
wish. The browser will automatically wrap the lines to accommodate the
size of the browser window.</p>
<hr />
<p>This is the second paragraph of text.</p>
</body>

Note that the <hr> element is


another self-closing element and
includes the trailing slash.
The <h1> - <h6> Elements
Heading elements provide structure to a web page:
<body>
<h1>This is an h1 heading.</h1>
<h2>This is an h2 heading.</h2>
<h3>This is an h3 heading.</h3>
<h4>This is an h4 heading.</h4>
<h5>This is an h5 heading.</h5>
<h6>This is an h6 heading.</h6>
</body>

Heading elements add blank lines before and after the text, just like <p> does.

The <h1> element - often referred to as the main heading - indicates the most
important heading and should be used no more than once per page.
The role of XHTML is to define and organize content, not to format it. Heading elements
should not be used as a way to bold words on the page. Rather, they should be used to
define the relative importance of content. Thus, <h2> is more important than <h3>.

Lower elements (e.g. <h4>) can be used, even if higher ones (e.g. <h3>) haven't.
The <ul> Element
The <ul> element ("unordered list") creates an indented bullet point list of items:

<body>
<p>Fruit in Alphabetical Order:</p>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cantaloupes</li>
</ul>
</body>

The <li> element ("list item") is used for each individual item in a list. They are
all nested within the <ul> tags.

By default, the list items are shown with bullet points, but this can be changed to squares,
circles, or other graphics using CSS, which we will learn later in the course.
The <ol> Element
The <ol> element ("ordered list") creates an indented list of numbered items:

<body>
<p>Fruit in Alphabetical Order:</p>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Cantaloupes</li>
</ol>
</body>

The <ol> element works identically to the <ul> element. The only difference is
whether the listed items are shown with bullet points or numbers.

By default, the list items show with incrementing numbers. By using CSS, we can
change this to letters or Roman numerals.

You might also like