Wednesday 29 March 2023

HTML hr and br tags



The <hr> and <br> tags are HTML tags used to add horizontal lines and line break, respectively.

The <hr> tag is a self-closing tag that creates a horizontal line, which can be used to visually separate content on a webpage. 

Here's an example of how to use the <hr> tag:

 
<h1>Welcome to my blog</h1>
<hr>

In this example, a horizontal line is inserted between the two paragraphs.

The <br> tag is an HTML tag used to create a line break, which inserts a new line without starting a new paragraph. 

Here's an example of how to use the <br> tag:



<p>This blog is about <br>web development language <br> HTML</p>


In this example, a line break is inserted between the first and second lines, causing them to appear on separate lines. 

The <br> tag is useful for adding short breaks in text, such as between lines of an address or between items in a list. However, it's generally considered better practice to use CSS to control spacing between elements on a webpage, rather than relying on the <br> tag.

It's also important to note that the <br> tag should not be used to separate paragraphs or sections of text, as this can make the content harder to read and less accessible. For that purpose, the <p> tag should be used to create new paragraphs, and CSS can be used to control the spacing between them.



<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>Welcome to my blog</h1>
<hr>
<h2>About me</h2>
<p>This blog is about <br>web development language <br> HTML</p>
<hr>
<p>Please <br>Follow</p>
</body>
</html>


output


Practice Time!

  1. Create a simple webpage with a heading, some text, and a horizontal line using the <hr> tag.
  2. Create a webpage with a list of items in paragraph, and use the <br> tag to add line breaks between each item.
  3. Create a webpage with a heading and two sections, separated by a horizontal line. Each section should have some text, and you can use the <br> tag to add line breaks within each section.
  4. Create a webpage with a heading, some text, and multiple horizontal lines.
  5. Create a webpage with a heading, some text, and a line break. Then, use the <hr> tag to add a horizontal line, followed by more text and another line break. Repeat this pattern several times to create a series of sections with horizontal lines separating them.
  6. Create a webpage for a fictional travel agency that includes a header with the agency's name and a navigation menu with links to different destinations. Include a section for each destination with a heading, a paragraph describing the destination, and an image. Use the <hr> tag to separate the sections.
  7. Create a webpage for a blog that includes a header with the blog's name and a navigation menu with links to different categories. Include a section for each category with a heading, a list of blog posts with short descriptions, and an image for each post. Use the <br> tag to separate the posts within each category.
  8. Create a webpage for a fictional online store that includes a header with the store's name and a navigation menu with links to different product categories. Include a section for each category with a heading, a list of products with prices and descriptions, and an image for each product. Use the <hr> tag to separate the sections.
Happy Coding!

No comments:

Post a Comment

HTML Text Formatting

<i> - This tag is used to italicize text, meaning the text enclosed within <i> tags will be rendered in italic font style. How...