HTML – BASIC TAGS
Heading Tags
That's correct! HTML provides six levels of headings, ranging from <h1> to <h6>.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.
Example of Using the <H1> To <H6> Tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heading Example</title>
</head>
<body>
<h1>This is an H1 Heading H1</h1>
<h2>This is an H2 Heading H2</h2>
<h3>This is an H3 Heading H3</h3>
<h4>This is an H4 Heading H4</h4>
<h5>This is an H5 Heading H5</h5>
<h6>This is an H6 Heading H6</h6>
</body>
</html>
This will produce the following result:
Paragraph Tag
That's right! The <p> tag is used in HTML to define and structure text into paragraphs. Each paragraph starts with an opening <p> tag and ends with a closing </p> tag. This helps organize content and improve readability.
Example of Using the <p> Tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paragraph Example</title>
</head>
<body>
<p>This is the first paragraph. It introduces the topic and provides some initial information.</p>
<p>This is the second paragraph. It adds more details or expands on the topic discussed in the first paragraph.</p>
<p>This is the third paragraph. It might conclude the discussion or offer additional resources.</p>
</body>
</html>
This will produce the following result:
Line Break Tag
The line break tag <br> is used in HTML to insert a single line break within text. Unlike the <p> tag, it does not create a new paragraph but simply moves the content following the <br> tag to the next line.
Example of Using the <br> Tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Break Example</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a sentence with a line break here.<br>Now this text appears on the next line.</p>
</body>
</html>
This will produce the following result:
Centering Conten Tag
Yes, the <center> tag was historically used to center content, including text, images, and tables, in older versions of HTML. However, it is now deprecated in HTML5 and should no longer be used for centering content. Modern web development favors using CSS for this purpose.
The <center> Tag
The <center> tag wraps content and aligns it horizontally to the center of its container (page or table cell).
Example of Deprecated <center> Usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Tag Example</title>
</head>
<body>
<center>
<h1>This is centered using the deprecated <center> tag.</h1>
<p>It works but is no longer recommended.</p>
</center>
</body>
</html>
This will produce the following result:
Horizontal Lines Tag
Horizontal lines in HTML are created using the <hr> tag. These lines are often used to separate sections of content, providing a visual divider. The <hr> tag is a self-closing tag, meaning it does not require a closing tag (</hr>).
By default, the <hr> tag creates a horizontal line across the width of its container, with a gray color and some default styling.
Example of Deprecated <hr> Usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Default Horizontal Line</title>
</head>
<body>
<p>This is some text above the line.</p>
<hr>
<p>This is some text below the line.</p>
</body>
</html>
This will produce the following result:
Preserve Formatting
In HTML, preserving the formatting of text (including whitespace, line breaks, and indentation) can be achieved using various methods, depending on the desired result. Here are some techniques to preserve text formatting:
Using the <pre> Tag
The <pre> (preformatted text) tag preserves all whitespace, including spaces, tabs, and line breaks, exactly as written in the HTML file.
Example of Deprecated <pre> Usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preformatted Text</title>
</head>
<body>
<p>This is normal text formatting:</p>
<p>Line 1
Line 2
Line 3</p>
<p>This is preserved formatting using the <code><pre></code> tag:</p>
<pre>
Line 1
Line 2
Line 3 (indented)
</pre>
</body>
</html>
This will produce the following result:
Nonbreaking Spaces
A nonbreaking space in HTML is represented by the entity . It is used to create spaces that the browser will not collapse or break across lines, ensuring the spacing is preserved exactly as intended.
Example of Deprecated Usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nonbreaking Spaces</title>
</head>
<body>
<p>Without nonbreaking spaces:</p>
<p>This is some text with multiple spaces.</p>
<p>With nonbreaking spaces:</p>
<p>This is some text with multiple spaces.</p>
</body>
</html>
This will produce the following result:
