HTML Basic Tags and Elements

HTML Basic Tags and Elements

HTML Basic Tags and Elements: Welcome to InfinityGyan.in, Now we will discuss about HTML Basic Tags and Elements. All we know HTML is the most commonly used language for writing web pages. HTML is a hypertext markup language. Now In this article we will learn HTML Basic Tags and Elements.

Read: Introduction to HTML

HTML – Basic Tags

Heading Tag

Any document begins with the title. HTML also has six levels of headings, which use elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. You can use different sizes for your titles. When displaying any title, the browser first adds a line and then a title.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Heading Example</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>
   </body>
	
</html>

This will produce the following result:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

Paragraph Tag

Each paragraph of text should go between the <p> and closing </p> tags, plus the <p> tag provides a way to make your text into different paragraphs.

India's Cheapest Digital Services Provider skrcreations

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Paragraph Example</title>
   </head>
	
   <body>
      <p>Here is a first paragraph of text.</p>
      <p>Here is a second paragraph of text.</p>
      <p>Here is a third paragraph of text.</p>
   </body>
	
</html>

This will produce the following result:

Here is a first paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

Line break tag

This tag is an example of an empty element, where you do not need to open and close the tag, because there is nothing to go between them. Whenever you use the <br /> element, anything starts from the next line.

<br /> The tag has a space between the letter br and the forward slash. If you omit this space, older browsers will have trouble giving line breaks, while this is not valid in XHTML if you miss the forward slash character and only use <br>.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Line Break  Example</title>
   </head>
	
   <body>
      <p>Hello<br />
         You delivered your assignment ontime.<br />
         Thanks<br />
         Mahnaz</p>
   </body>
	
</html>

This will produce the following result:

Hello
You delivered your assignment on time.
Thanks
Mahnaz

Centering Content

You can use the <center> tag to place any content in the center of a page or table cell.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Centring Content Example</title>
   </head>
	
   <body>
      <p>This text is not in the center.</p>
      
      <center>
         <p>This text is in the center.</p>
      </center>
   </body>
	
</html>

This will give the following result:

This text is not in the center.

 

This text is in the center.

 

Horizontal lines

Horizontal lines are used for the break-up sections of a document. The <hr> tag creates a line from the current position in the document to the correct margin and breaks the line accordingly.

For example, you might want to give a line between two paragraphs in the example below:

<!DOCTYPE html>
<html>

   <head>
      <title>Horizontal Line Example</title>
   </head>
	
   <body>
      <p>This is paragraph one and should be on top</p>
      <hr />
      <p>This is paragraph two and should be at bottom</p>
   </body>
	
</html>

This will produce the following result:

This is paragraph one and should be on top


This is paragraph two and should be at bottom

Again the <hr /> tag is an example of an empty element, where you do not need to open and close the tag, as there is nothing to move between them.

If you omit this space, older browsers will have problems rendering the horizontal line, whereas if you miss the forward slash character and just use <hr>, it is not valid in XHTML. The <hr /> element has a space between the description hour and the forward slash.

Preserve formatting

Sometimes, you want your text to follow the exact format written in the HTML document. In these cases, you can use the tag already tagged <pre>.

Any text between the initial <Tag> and the Completion </Ex> tag will preserve the formatting of the source document.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Preserve Formatting Example</title>
   </head>
	
   <body>
      <pre>
         function testFunction( strText ){
            alert (strText)
         }
      </pre>
   </body>
	
</html>

This will produce the following result:

function testFunction( strText ){ 
   alert (strText) 
}

Try to do this without using the same code inside the <pre> …….. </pre> tag.

Non-breaking space

Suppose you want to use the phrase “12 angry men”. Here, you will not want to split a browser into two lines “12, Angry” and “Main” –

An example of this technique appears in the movie "12 Angry Men."

In cases where you do not want the client browser to break the text, you should use a nonbreaking space unit instead of the normal space.

For example, when coding “12 Angry Men” in a paragraph, you should use something similar to the following code:

<!DOCTYPE html>
<html>

   <head>
      <title>Nonbreaking Spaces Example</title>
   </head>
	
   <body>
      <p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
   </body>
	
</html>

This will produce the following result:

An example of this technique appears in the movie “12 Angry Men.”

Html – Elements

An HTML element is defined by an opening tag. If the element has other content, it ends with a closing tag.

Where the element name precedes the forward slash, as shown below with some names –

Start Tag Content End Tag
<p> This is paragraph content. </p>
<h1> This is heading content. </h1>
<div> This is division content. </div>
<br />

There are some HTML elements that do not need to be closed, such as <img … />, <hr /> and <br /> elements. These are known as zero elements.

So here <p> …. </p> is one HTML element, <h1> … </h1> is another HTML element.

HTML documents have a tree of these elements and they specify how HTML documents should be created, and which part of the HTML document should contain what type of content.

HTML Tag vs Elements

An HTML element is defined by an opening tag. If the element has other content, it ends with a closing tag.

For example, <p> is starting the tag of a paragraph and </p> is closing the tag of the same paragraph but <p> is the paragraph </p> is a paragraph element.

Nested HTML elements

This allows many HTML elements to be placed inside another HTML element:

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Nested Elements Example</title>
   </head>
	
   <body>
      <h1>This is <i>italic</i> heading</h1>
      <p>This is <u>underlined</u> paragraph</p>
   </body>
	
</html>

This will display the following result:

This is italic heading

This is underlined paragraph

Learn More about HTML:

Read More:

 

Share This Article:

Leave a Reply