Basic HTML Tags

7 years ago

HTML

In this tutorial, we are going to learn about some basic tags of HTML; their usage and importance.

TITLE:

As the name suggests it gives a title to your web page. It goes inside the head section of the html code. Thus it is not visible on the page but we can see it in the title bar of the browser window. Your page is recognized by this title.

HEADINGS:

The heading element is used; well as ‘heading’ i.e. to give an introduction to the topic. In HTML there are in total 6 levels in the heading elements from h1 to h6 and each having an importance in descending order. These elements take all the global attributes.

Examples:

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Here is the result of this code:

html_output

Now let’s take a look on how to use these tags in a web page with content under them.

<h1>Heading elements</h1>
<h2>Summary</h2>
<p>we are learning headings ...</p>

<h2>Examples</h2>
<h3>Example 1</h3>
<p>Like this is an example...</p>

<h3>Example 2</h3>
<p>This is another example...</p>

<h2>See also</h2>
<p>In this way we can use all the six levels...</p>

Here is the result of this code:

Please Note:

Do not use lower levels to decrease heading font size: use the CSS font-size property instead.
Avoid skipping heading levels: always start from <h1>, next use <h2> and so on.
With the <section> element, you should consider avoiding using <h1> more than once on a page; by convention, it’s used for the page’s displayed title, with all headings below starting with <h2>. When using sections, you should use one <h1> per section.

PARAGRAPHS

The <p> element in HTML represents the paragraph text.

To understand the need of paragraphs let’s writes this small code:

<!doctype html>
<html>
<head>
<title>Paragraphs</title>
</head>
<body>
<h1>Paragraphs</h1>
I am not yet using the paragraph element.
Let’s see how it looks in the browser.
<body>
</html>

Now let’s run this in the browser.

In order to make the text appear on two different lines, we use paragraph tags <p> and </p>. Different paragraphs are recognized as different blocks of text by the browser when we use the p tag. Now let’s add it and run the program.

<!doctype html>
<html>
<head>
<title>Paragraphs</title>
</head>
<body>
<h1>Paragraphs</h1>
<p>I am not yet using the paragraph element. </p>
<p>Let’s see how it looks in the browser. </p>
<body>
</html>

Now we have two different lines…..

PRE

But what if you want your text to follow the exact format of how it is written in the HTML document. In those cases, you can use the preformatted tag <pre>.

The text inside a <pre> element is displayed in a fixed-width font as that of the source document, and it preserves both spaces and line breaks.

For example:

<!doctype html>
<html>
<head>
<title>Learning Html</title>
</head>
<body>
<h1>Preformatted Text</h1>
<pre>
Twinkle twinkle, little star,
How I wonder what you are.
Up above the world so high,
Like a diamond in the sky.
Twinkle twinkle, little star,
How I wonder what you are.
</pre>
<body>
</html>

This gives the following result:

BR

Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

For Example:

<!doctype html>
<html>
<head>
<title>BR tags</title>
</head>
<body>
<h1>This is an example of BR tag</h1>
<p>
Hello, </br> I received your message. </br> Thanks
</p>
<body>
</html>

This is how we get the final result.

HR

The HTML <hr> tag creates a horizontal line to separate different topics within the same sections. This is also called Horizontal Rule in HTML. But elements like <section> already indicate this intrinsically so <hr> is more for thematic breaks, such as separating different topics within a section of prose, or between scenes in a novel. However, you can use it anywhere you wish.

It supports all the global attributes and a few more like

Align : You can align it to left right or center
Width: If you think the line going all the way across the page is a bit much then adjust the width using pixel or percentage value
Size: Specifies the height of the horizontal rule. Again the values can be in percentage or pixels.
No shade: Removes the usual shading effect that most browsers display.
Color: you can change the color according to your wish.

Let’s see an example

<!doctype html>
<html>
<head>
<title>HTML hr Tag</title>
</head>
<body>
<p>
This text will be followed by a horizontal line <hr>
</p>
<body>

Result: This text will be followed by a horizontal line

If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML.