HTML Basic : Headings, Lines, Comments
In HTML, you can use headings, horizontal lines, and comments to structure and annotate your web page content. Here's how to use each of these elements:
1. HTML Headings
HTML provides six levels of headings, from <h1> (the highest level) to <h6> (the lowest level). Headings are used to define the structure of your content, with <h1> being the main title of the page and <h6> representing subheadings. Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a Heading Level 1</h1>
<h2>This is a Heading Level 2</h2>
<h3>This is a Heading Level 3</h3>
<h4>This is a Heading Level 2</h4>
<h5>This is a Heading Level 3</h5>
<h6>This is a Heading Level 2</h6>
</body>
</html>
2. Horizontal Lines
You can use the <hr> element to insert a horizontal line to separate content on a web page. The <hr> element is self-closing and doesn't require a closing tag. Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a Heading Level 1</h1>
<h2>This is a Heading Level 2</h2>
<h3>This is a Heading Level 3</h3>
<h4>This is a Heading Level 2</h4>
<h5>This is a Heading Level 3</h5>
<h6>This is a Heading Level 2</h6>
<p>This is some text above the line.</p>
<hr>
<p>This is some text below the line.</p>
</body>
</html>
3. Comments
You can add comments to your HTML code using the <!-- --> syntax. Comments are not visible on the web page and are typically used to provide notes or explanations within the code. Here's how you can add comments:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a Heading Level 1</h1>
<h2>This is a Heading Level 2</h2>
<h3>This is a Heading Level 3</h3>
<h4>This is a Heading Level 2</h4>
<h5>This is a Heading Level 3</h5>
<h6>This is a Heading Level 2</h6>
<p>This is some text above the line.</p>
<hr>
<p>This is some text below the line.</p>
<p>This is some content.</p>
</body>
</html>
Comments are useful for documenting your code or temporarily removing elements without deleting them.
This is a basic example of how you can use headings, horizontal lines, and comments in an HTML document to structure and annotate your web page.
0 Comments