Basic HTML Tags

September 20, 2016

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:

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.

Here is the result of this code:

2

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:

Now let’s run this in the browser.

3

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.

4

 

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:

This gives the following result:

5

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:

This is how we get the final result.

6

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

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.

Bold Text

Anything that appears within <b>…</b> element, is displayed in bold as shown below:

Example:

This will produce the following result:

The following word uses a bold typeface.

Italic Text

Anything that appears within <i>…</i> element is displayed in italicized as shown below:

Example:

This will produce the following result:

The following word uses a italicized typeface.

Underlined Text

Anything that appears within <u>…</u> element, is displayed with underlined as shown below:

Example:

This will produce the following result:

The following word uses a underlined typeface.

Strike Text

Anything that appears within <strike>…</strike> element is displayed with strikethrough, which is a thin line through the text as shown below:

Example:

This will produce the following result:

The following word uses a strikethrough typeface.

Monospaced Font:

The content of a <tt>…</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter ‘m’ is wider than the letter ‘i’). In a monospaced font, however, each letter has the same width.

Example:

This will produce the following result:

The following word uses a monospaced typeface.

Superscript Text

The content of a <sup>…</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character’s height above the other characters.

Example:

This will produce the following result:

The following word uses a superscript typeface.

Subscript Text

The content of a <sub>…</sub> element is written in subscript; the font size used is the same as the characters surrounding it but is displayed half a character’s height beneath the other characters.

Example:

This will produce the following result:

The following word uses a subscript typeface.

Inserted Text

Anything that appears within <ins>…</ins> element is displayed as inserted text.

Example:

This will produce the following result:

I want to drink  wine

Deleted Text

Anything that appears within <del>…</del> element, is displayed as deleted text.

Example:

This will produce the following result:

I want to drink cola.

Smaller Text

The content of the <small>…</small> element is displayed one font size smaller than the rest of the text surrounding it as shown below:

Example:

 

 

PS: For any questions, queries, and feedback, feel free to write us at amruta@qatechhub.com or support@qatechhub.com. Happy Learning ?

Amruta Somani

About the Author

Amruta Somani

Leave a Comment: