HTML Basics: Basic Text Tags

Basic Text Tags
ith only a small set of HTML tags you can create a functional page. The set of tags in this section let you set up an HTML file that has text in several variation, headlines, and rules.



<BR><body><BR><br /><BR></p> <p><BR><b>, <i>, <tt><BR><h1-6><BR><font><BR></p> <blockquote><p><BR></p> <hr> <p><BR></P><P class=copy><strong>Required Tags</strong><br />Each HTML file needs a certain set of tags to define it as an HTML page that the browser will display. </P><UL><LI>The file begins and ends with an HTML tag. <LI>The first portion of the file is a header, with information about the page. <LI>The second portion of the page is the body, with the content that appears in the reader's browser window. </LI></UL><P class=copy>This is what the basic page template looks like: </P><P class=code><a href="javascript: showSupportItem('listing1');"><html></a><BR></P><P class=code><a href="javascript: showSupportItem('listing2');"><head><BR><title>Title of the Page


Here's where the body content goes, the material that your readers see in their browser windows.


Line Break



In it's most simple form, an HTML file is text. This file:

Hello World!
How Are You?

displays like this in a Web browser:

Hello World! How Are You?

There are no tags to tell the browser to split the text. It just strings all the characters together in one long row.

The break tag inserts a return character, telling the browser to display the text that follows it on a separate line. This file:

Hello World!

How Are You?

displays like this in a Web browser:

Hello World!
How Are You?

Paragraph



In its simplest form, the paragraph tag tells the browser to display the text that follows it on a separate line, and to add extra space above it. So, this file:


Hello World!



How Are You?


displays like this in a web browser:

Hello World!

How Are You?

Make sure to end each paragraph with the end tag

. Everything between the start and end paragraph tags is the contents of that particular paragraph. Any attributes you specify in the paragraph apply to the entire paragraph between the open and close tags.

The most common paragraph attribute is align. You can align the paragraph in three ways:

  1. The default is left. If you don't use the align attribute the text automatically aligns to the left margin.
  2. align=right sends the text to the right margin.
  3. align=center centers the text across the page.
HTML Code Result

This paragraph uses the default alignment, left. Each line is flush to the left margin.

This paragraph is aligned left. Each line is flush to the left margin.

This paragraph is aligned right. Each line is flush to the right margin.

This paragraph is aligned right. Each line is flush to the right margin.

The paragraph is aligned center. Each line is centered and touches neither margin.

This paragraph is aligned center. Each line is centered and touches neither margin.

Headings



The heading tag tells the browser to display the text that follows it as the specified type of heading.

Heading Levels

There are six different levels of headings, from H1 to H6. In their default format, H1 is larger than H2; H2 is larger than H3, and so on. Some levels of heading are bold, some are not. The exact default size and attribute you see depends on your browser. In addition, people who use a feature called Cascading Style Sheets (CSS), a text attribute tag, or the font tag can change the way you see different levels of headings.

You'll always need to close the heading tag, with an end heading tag,

Here's an example of a heading tag in use. This is a heading level 4:

Hello World!



How Are You?


It displays like this in a web browser:

Hello World!

How Are You?

Here are samples of the six different level of headings. We have used CSS to define how some of the headings look. The way they actually appear may vary from browser to browser.

  • Head 1

  • Head 2

  • Head 3

  • Head 4

  • Head 5
  • Head 6

Align

The heading tag has one commonly-used attribute, align. Like the paragraph tag, you can align headings in three ways:

  1. The default is left. If you don't use the align switch, the text automatically aligns to the left margin.
  2. align=right sends the text to the right margin.
  3. align=center centers the text across the page.

HTML Code Result

Head Level 4, aligned left.

This heading is aligned to the left.

This paragraph is aligned right. Each line is flush to the right margin.

This paragraph is aligned right. Each line is flush to the right margin.

The paragraph is aligned center. Each line is centered and touches neither margin.

This paragraph is aligned center. Each line is centered and touches neither margin.

Text Tags

Some text
Some text
Some text
Some text

Some text.


Basic HTML provides some rudimentary ways of changes the appearance of your text. As HTML matures, some of these tags are used less and less often. New methods, such as Cascading Style Sheets are beginning to replace them. But as you are first learning HTML theses tags provide you with a simple way to make small stylistic changes.

There are three sets of tags that let you make these changes:

  • Text Style Tags (, , )
    Let you make a portion of the text appear in bold, italic, or teletype (monospaced) styles.
  • Font ()
    Lets you control the color, size, and type face of the text.
  • Blockquote (

    )
    Lets you indent your text on both margins.

Horizontal Rules



The horizontal rule tag lets you insert a horizontal rule into your page.

Hello World!


It's a beautiful day.

The birds are singing.

The flowers are blooming.

The sun is shining.


How Are You?

The Horizontal Rule Tag displays ahorizontal rule, or a line, in your Web page. It displays like this in your Web browser:

Hello World!


It's a beautiful day.
The birds are singing.
The flowers are blooming.
The sun is shining.


How Are You?

The default rule is two pixels thick, stretches across the entire page, and is an outlined light grey. You can change this by using the tag's attributes: width, size, and noshade.

Width

You can specify width of the page the line should fill, either in pixels or as a percentage of the page (it is usually best to use a percentage, unless you have a specific reason for measuring pixels).

  • The first example create a 100 pixel wide rule. It won't change size if you resize the browser window.
  • The second example create a 50 percent wide rule that is fluid and responds to changes in the browser window size:







Size

You can specify thickness of the rule in pixels with the size= attribute.

  • The first example create a 1 pixel thick rule.
  • The second example create a 15 pixel thick rule:







Noshade

You can specify that the rule be solid instead of having a grey outline by using the noshade attribute. This attribute doesn't have a value. If it is in, the rule is solid. If you leave it out, the rule is the default grey.




Remember, when you are using rules, don't go overboard. Use them in logical places to visually separate information. Don't let them overpower your page or use so many of them that your poor readers are left wondering if they're reading a zebra or a Web page.

Common Problems

When you're first learning HTML?heck, even after you've been doing it for a while?there are some easy-to-make mistakes.

Common Problem #1: Missing Delimiter

Ooops! That tag just isn't working. The first thing to check is: does it have both the opening (<) and closing (>) delimiter. It's easy to accidentally forget or delete one as you edit your page.

Common Problem #2: Missing Quotation Mark

Are things just disappearing from you page? Check to be sure that every place you've used an open quote in a tag, there is also a closing quote. If a browser doesn't find a close quote, it will think everything on the page is part of the tag attribute value rather than content to be displayed.

Common Problem #3: Missing End Tag

Suddenly you have some odd indents. Or all the text is bold. You probably entered an opening tag, but forgot to enter the ending tag.

Common Problem #4: Good Old Typos

The tag isn't working as you expected. Go back to your file and double check for old fashioned typos. It's almost embarrassing how often a
tag-typing finger can slip a little and create a tag instead. The browser just ignores that alien tag because it doesn't understand it.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Related Posts

DevX is the leading provider of technical information, tools, and services for professionals developing corporate applications.

Join Our Newsletter

Subscribe to receive our latest blog posts directly in your inbox!

© All Rights Reserved.