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.
Here's where the body content goes, the material that your readers see in their browser windows.
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?
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:
- The default is left. If you don't use the align attribute the text automatically aligns to the left margin.
align=rightsends the text to the right margin.align=centercenters 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 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 LevelsThere 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
The heading tag has one commonly-used attribute, align. Like the paragraph tag, you can align headings in three ways:
- The default is left. If you don't use the align switch, the text automatically aligns to the left margin.
align=rightsends the text to the right margin.align=centercenters 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 center. Each line is centered and touches neither margin. |
Text Tags
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. - Font ()
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.
WidthYou 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 ProblemsWhen 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 DelimiterOoops! 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 MarkAre 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 TagSuddenly 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 TyposThe 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
