<p>To add a horizontal line in your HTML document, the &lt;hr&gt; tag comes in handy.</p>
<h3>How to use the &lt;hr&gt; tag?</h3>
<p>The syntax of the <code>hr</code> tag looks something like this.</p>
<pre class="language-markup"><code>  &lt;hr&gt;
</code></pre>
<p>The &lt;hr&gt; tag is an empty or self-closing tag, meaning it doesn't require a closing tag. It serves as a visual separator, dividing different sections of your document with a horizontal line.</p>
<p>Watch this quick demo video:</p>
<p><video style="width: 708px; height: 382px;" autoplay="autoplay" loop="loop" muted="" controls="controls" width="708" height="382"> <source src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/html-horizontal-line-tag/hr.mp4" type="video/mp4">Your browser does not support the video tag.</video></p>

Horizontal Line Tag

<p>Links are fundamental to navigating the web. In HTML, links are created using the&nbsp;<code>&lt;a&gt;</code> tag, also known as the Anchor tag.</p>
<h3>Key Characteristics of HTML Links</h3>
<ul>
<li>Specified by the <code>&lt;a&gt;</code> tag.</li>
<li>Also known as hyperlinks.</li>
<li>Used to link one document to another.</li>
<li>Includes a closing tag <code>&lt;/a&gt;</code>.</li>
</ul>
<h3>Syntax of HTML Links</h3>
<pre class="language-markup"><code>&lt;a href="Your specified path"&gt;
    content
&lt;/a&gt;</code></pre>
<h3>Essential Attributes of the Anchor Tag</h3>
<p>HTML links primarily use two attributes:</p>
<ul>
<li><strong>href attribute:</strong> Defines the URL the link points to.</li>
<li><strong>target attribute:</strong> Specifies where to open the linked document.</li>
</ul>
<h4>Target Attribute Values</h4>
<ul>
<li><strong>_blank:</strong> Opens the linked document in a new window or tab.</li>
<li><strong>_top:</strong> Opens document in the full body of the window.</li>
<li><strong>_self:</strong> Opens document in the same window or tab (default behavior).</li>
<li><strong>_parent:</strong> Opens the linked document in the parent frame.</li>
</ul>
<h3>Linking to Specific Page Sections</h3>
<p>To link to a specific section of a webpage, you can:</p>
<ul>
<li>Use the name or id attribute of the target section.</li>
<li>Use a hyperlink with a hash (#) followed by the target id or name.</li>
</ul>
<h4>Example</h4>
<p>Let's say you have a long webpage with multiple sections, and you want to create a link at the top that, when clicked, takes the user directly to a specific section further down the page. You can do this using HTML links that target specific sections.</p>
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;My Webpage&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

  &lt;!-- Link at the top --&gt;
  &lt;a href="#gardening-tips"&gt;Go to Gardening Tips&lt;/a&gt;

  &lt;!-- Some content --&gt;
  &lt;p&gt;Here is some other content...&lt;/p&gt;

  &lt;!-- Gardening Tips Section --&gt;
  &lt;h2 id="gardening-tips"&gt;Gardening Tips&lt;/h2&gt;
  &lt;p&gt;This section provides tips on how to garden...&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h3>Link Colors</h3>
<p>Links typically appear in different colors based on their state:</p>
<ul>
<li><strong>Active:</strong> <span style="color: red; text-decoration: underline;">Displayed in red and underlined like this sentence</span></li>
<li><strong>Visited:</strong> <span style="color: purple; text-decoration: underline;">Appears purple and underlined like this sentence</span></li>
<li><strong>Unvisited:</strong> <span style="color: blue; text-decoration: underline;">Shown as blue and underlined like this sentence</span></li>
</ul>
<p>You can customize these colors using CSS to better match the style of your website.</p>

Anchor Tag

<p>To insert a line break in your HTML document, you can utilize the &lt;br&gt; tag.</p>
<p>&lt;br&gt; tag is used to insert line breaks in text or paragraphs</p>
<p>The syntax for the &lt;br&gt; tag looks like this:</p>
<pre class="language-markup"><code>&lt;br&gt;
</code></pre>
<p>The &lt;br&gt; tag is commonly referred to as an empty or self-closing tag, meaning it doesn't require a closing tag. This tag is responsible for breaking text lines or separating paragraphs. When implemented, it automatically moves the text following the tag to the next line.</p>
<p>It's particularly useful in formatting textual content where line breaks are essential for readability or visual layout. For instance, it can be used in addresses, poems, or song lyrics to preserve the original line structure.</p>
<p><strong>Here is a quick video showing how to use br tag:</strong></p>
<p><img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/html-line-break-tag/breaklinetag.webp" alt="Video Tutorial on HTML Line Break Tag" width="917" height="515"></p>