HTML Tags
HTML is a markup language and makes use of various tags to format the content. These tags are enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their corresponding closing tags. For example, <html> has its closing tag </html> and <body> tag has its closing tag </body> tag etc.
For example:
<!DOCTYPE html>
<html>
<head>
<title>Here, Document title is mentioned</title>
</head>
<body>
<h1>This is a random heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
Becomes:
This is a random heading
Document content goes here.....
The basic tags (with their description) of HTML used in the above example are as follows −
| TAG | DESCRIPTION |
|---|---|
| <!DOCTYPE...> |
This tag defines the document type and HTML version. |
| <html> |
This tag encloses the complete HTML document and mainly comprises of <head>...</head> and <body>...</body> tags. |
| <head> |
This tag represents the document's header which can keep other HTML tags like <title>, <link> etc. |
| <title> |
The <title> tag is used inside the <head> tag to mention the document title. |
| <body> |
This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc. |
| <h1> |
This tag represents the heading. |
| <p> |
This tag represents a paragraph. |
Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading.
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>
Becomes:
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
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below in the example −
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>
Becomes:
Here is a first paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text.
Line Break Tag
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.
The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <br> it is not valid in XHTML.
For example:
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
Becomes:
Hello
You delivered your assignment on time.
Thanks
Mahnaz
Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.
For example:
<!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>
Becomes:
This is paragraph one and should be on top
This is paragraph two and should be at bottom
Preserve Formatting
Sometimes, you want your text to follow the exact format of how it is written in the HTML document. In these cases, you can use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> 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>
Becomes:
function testFunction( strText ){
alert (strText)
}