HTML Basic Tags and Elements: Welcome to Ushanand Infotech Soluions, 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.
HTML Basic Tags and Elements
HTML – Basic Tags
Hire: Best SEO Expert in India
Read Also: HTML Tutorial Series
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.
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 Angry Men."</p>
</body>
</html>
This will produce the following result:
An example of this technique appears in the movie “12 Angry Men.”
Html – Elements
HTML Basic Tags and 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