Creating Text Elements in HTML

  Creating Text Elements

Introduction To begin a new paragraph in your Web page, you use the <p> tag. Each paragraph of text should be 

enclosed in a two-sided <p>. The <p> tag sets apart a text block from other elements, including other <p> 

tags. A paragraph tag can have one or more sentences.

Example:

<p>Some Text Here</p>

When you hit the enter key in a word processor or your text editor, the application breaks the text you write 

after it, into a new paragraph, but when you press enter key in an HTML document, the browser ignores it. If 

you want to show your two sentences in two separate paragraphs, you have to clearly tell the browser to do it. 

You do this with paragraph tags.

Example:

<p>First paragraph.</p>

<p> Second paragraph </p>

Line Break

To create a line break without officially starting a new paragraph, use the line break tag: <br>. This is a onesided tag placed within a paragraph, at the end of each line, like this:

Example:

<p>First line<br>

Second line </p>

 Creating Headings

Headings in webpages work the same manner as they do in printed documents - they separate text into 

sections. The HTML standard defines six levels of headings, <h1> through <h6>, each one gradually smaller 

in font size. The heading levels indicate relative sizes; the higher the heading number, the smaller the size. 

<h1> has the large font size and <h6> has the smaller font size.

Example:

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3> This is heading 3</h3>

<h4> This is heading 4</h4>

<h5> This is heading 5</h5>

<h6> This is heading 6</h6>

Applying Bold and Italic Formatting

Making use of bold and italic styles are two ways of making text stand out and draw in attention. For simple 

boldface and italics, use the <b> tag or the <i> tag, correspondingly. Both are two-sided tags that enclose the 

text to be formatted.

Example:

<p><b>John Smith</b><i>Welcome</i>to our site</p>

 Superscript and Subscript

Superscript formatting makes text smaller and raises it off the baseline. You’d typically use superscript <sup> 

to format exponents in arithmetic equations (for example, the 2 shown in X2+1). You can also use 

superscript to format ordinal numbers (such as 1st, 2nd, and 3rd) to make your page look more refined. 

Subscript <sub> makes text smaller and moves it below the baseline. The most common use for subscripts is

in chemical formulas (for example, H2SO4).

Example:

<p>1^st</p>

<p>H₂SO₄</p>

 Block Quotation

The <blockquote> tag specifies a section that is quoted from another source. Browsers usually indent 

<blockquote> elements.

Example:

<blockquote>Our greastsst weakness lies in giving up. The most certain way to succeed is always to try just 

one more time. </blockquote>

 Preformatted Text

The <pre> tag describes preformatted text. Text in a <pre> element is shown in a fixed-width font (usually 

Courier), and it maintains both spaces and line breaks.

Example:

<pre>

Text in a pre element

is displayed in a fixed-width

font, and it preserves

both spaces and line breaks

<pre>

Unordered, Ordered and Definition Lists

HTML supports three types of lists: 1) ordered lists, 2) unordered lists, and 3) definition lists.

 Ordered Lists

Ordered lists are designed for items that follow some defined sequential order, such as items organized 

alphabetically or numerically. An ordered list is marked using the ol (ordered list) element with each list item 

marked using the li element. The standard layout is

Example:

<ol>

<li>Paris</li>

<li>London</li>

<li>New York</li>

</ol>

</ol>

Output:

1. Paris

2. London

3. New York

Note that because both the ol and li elements are considered grouping elements, each list item will appear, by 

default, on a new line in the document unless a different style is applied to those elements.

 Unordered ListsUnordered lists are used for lists in which the items have no sequential order. The layout for an unordered list 

is similar to that used with ordered lists apart from that the list items are grouped within the following ul 

(unordered list) element and get bullet points instead of numbers.

Example:

<ul>

<li>Paris</li>

<li>London</li>

<li>New York</li>

</ul>

Output:

1. Paris

2. London

3. New York

 Nesting Lists

You can nest lists within one another. In the next example, we have a bulleted list embedded within a 

numbered list. Notice how this nested list was built. The bulleted sublist (the <ul> tag) is put within one of 

the <li> tags within the numbered <ol> list.

Example:

<ol>

<li>France</li>

<li>England:

<ul>

<li>London</li>

<li>Birmingham</li>

<li>Leeds</li>

<li> Glasgow</li>

</ul>

</li>

<li>USA</li>

</ol>Output:

1. France

2. England

• London

• Birmingham

• Leeds

• Glasgow

3. USA

 Definition Lists

A third type of list is the definition list made up of a list of terms and matching definitions. The definition list 

is grouped by the dl (definition list) element, the terms are noted with the dt (definition term) element, and 

the definition (s) associated with each term is noted by the dd element. The standard structure is

Example:

<dl>

<dt>HTML</dt>

<dd>Hypertext Markup Language</dd>

<dt>CSS</dt>

<dd>Cascading Style Sheet</dd>

</dl>

Using Links & Creating Navigation

Links are one of the most significant elements in HTML. Without the ability to link from one document to 

another, the Web wouldn't be the Web. The “H” in “HTML,” hypertext, becomes meaningless without the 

concept of linked documents. Linking the Web begins with the <a>, or anchor element, one of the oldest 

elements.

Hypertext is designed by enclosing content within a set of opening and closing <a> tags in the following 

structure:Example:

<a href=”http://google.com”>Google</a>

 Using Relative and Absolute Paths

Paths that include a complete address that everyone can use to get to that page are called absolute paths. 

Absolute paths are very reliable, but they are also long and awkward to type. 

Example:

<a href=”http://www.example.com/index.html”>Example Site</a>

When you are linking to files in the same website as the link itself, you do not need to include the full path to 

the file; you can simply provide its name. When the file is in the same folder, you need only supply the file 

name. For example, if the index.html and about.html pages of the web site are in the same folder, in the 

index.html file, you can refer to about.html like this:

Example:

<a href=”about.html”>About Us</a>

This is called a relative path, because the destination file is relative to the current file’s location. Relative paths

make it easier to develop and test your website in a different file location than the one where it will eventually 

be stored.

You can link to the file inside subfolder as below:

Example:

<a href=”about/history.html”>History</a>

You can also create a link to a file that is up one level (a parent folder) with a relative reference as below:

Example:

<a href=”../contact.html”>Contact</a>

Setting Link Target:

By default, a hyperlink opens the linked page in the same browser tab. Which means the new page replaces 

the previous page. Generally this is fine, but in some instances you might want the hyperlink to open in a new 

tab. For example, maybe you want to endorse that visitors check out a page on another site, but you don’t 

want them to leave your site. To direct the hyperlink to open a page in a new tab, add the attribute 

target=“_blank” to the <a> tag.

Example:

<a href=”http://www.example.com/about.html” target=”_blank”>About</a>