BASIC HTML TAGS
Prepared by Engr. Donn Lingo
BASIC HTML TAGS
• The most important tags in HTML are tags that
define headings, paragraphs and line breaks.
Headings
• Headings are defined with the <h1> to
<h6> tags. <h1> defines the largest
heading. <h6> defines the smallest
heading.
• HTML automatically adds an extra blank
line before and after a heading.
Paragraphs
• Paragraphs are defined with the <p> tag.
• HTML automatically adds an extra blank
line before and after a paragraph.
Line Breaks
• The <br> tag is used when you want to
end a line, but don't want to start a new
paragraph.
• The <br> tag forces a line break wherever
you place it.
• The <br> tag is an empty tag. It has no
closing tag.
COMMENTS IN HTML
• The comment tag is used to insert a comment
in the HTML source code.
• A comment will be ignored by the browser.
• You can use comments to explain your code,
which can help you when you edit the source
code at a later date.
• Note that you need an exclamation point
after the opening bracket, but not before
the closing bracket.
Basic Notes … Useful Tips
• When you write HTML text, you can never be
sure how the text is displayed in another
browser. Some people have large computer
displays, some have small. The text will be
reformatted every time the user resizes his
window. Never try to format the text in your
editor by adding empty lines and spaces to the
text.
• HTML will truncate the spaces in your text. Any
number of spaces count as one. Some extra
information: In HTML a new line counts as one
space.
• Using empty paragraphs <p> to insert
blank lines is a bad habit. Use the <br>
tag instead. (But don't use the <br> tag to
create lists. Wait until you have learned
about HTML lists.)
• You might have noticed that paragraphs
can be written without the closing tag
</p>. Don't rely on it. The next version of
HTML will not allow you to skip ANY
closing tags.
• HTML automatically adds an extra blank
line before and after some elements, like
before and after a paragraph, and before
and after a heading.
• We use a horizontal rule (the <hr> tag), to
separate the sections in our tutorials.
BASIC TAGS EXAMPLES
EXAMPLE 01. A very simple HTML Document
<html>
<head>
<title> a very simple HTML document</title>
<body>
The content of the body element is displayed in
your browser.
</body>
</head>
</html>
EXAMPLE 02.
How text inside paragraphs is displayed
<html>
<head>
<title> how text inside paragraph is displayed</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>Paragraph elements are defined by the p tag.</p>
</body>
</html>
EXAMPLE 03. More paragraphs
<html>
<head>
<title> More paragraphs </title>
</head>
<body>
<p>This paragraph contains a lot of lines in the source
code, but the browser ignores it.</p>
<p>This paragraph contains a lot of spaces in the source
code, but the browser ignores it.</p>
<p>The number of lines in a paragraph depends on the
size of your browser window. If you resize the browser
window, the number of lines in this paragraph will
change. </p>
</body>
</html>
EXAMPLE 04. The use of line breaks
<html>
<head>
<title>The use of line breaks</title>
</head>
<body>
<p>To break<br>lines<br>ina
<br>paragraph,
<br>use the br tag.</p>
</body>
</html>
EXAMPLE 05. Poem problems
(some problems with HTML formatting)
<html>
<head>
<title> poem problems </title>
</head>
<body>
<p>My Bonnie lies over the ocean. My Bonnie lies over
the sea. My Bonnie lies over the ocean. Oh, bring back
my Bonnie to me.</p>
<p>Note that your browser simply ignores your
formatting!</p>
</body>
</html>
EXAMPLE 06. Heading Tags
<html>
<head><title> heading tags </title></head>
<body>
<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>
<p>Use heading tags only for headings. Don't use them
just to make something bold. Use other tags for
that.</p>
</body>
</html>
EXAMPLE 07. Center aligned heading
<html>
<head>
<title> center aligned heading</title>
</head>
<body>
<h1 align="center">This is heading1</h1>
<p>The heading above is aligned to the center of
this page. The heading above is aligned to the
center of this page. The heading above is aligned
to the center of this page.</p>
</body>
</html>
EXAMPLE 08. Insert a horizontal rule
<html>
<head>
<title> insert a horizontal rule</title>
</head>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
</body>
</html>
EXAMPLE 09. Comments in the HTML source
<html>
<head>
<title> comments in the HTML source</title>
</head>
<body>
<!--This comment will not be displayed-->
<p>This is a regular paragraph</p>
</body>
</html>
EXAMPLE 10. Add a background color
<html>
<head>
<title> ad a background color
</title>
</head>
<body bgcolor="yellow">
<h2>Look: Colored Background!</h2>
</body>
</html>
EXAMPLE 11. Add a background image
<html>
<head>
<title> add a background image </title>
</head>
<body background="[Link]">
<h3>Look: A background image!</h3>
<p>Both gif and jpg files can be used as HTML
backgrounds.</p>
<p>If the image is smaller than the page, the image will
repeat itself.</p>
</body>
</html>