Text Formatting Tags

Heading Tags (<h1> to <h6>)

Heading tags are used to define headings of different levels:

  <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>

Paragraph Tag (<p>)

The <p> tag is used for paragraphs of text:

  <p>This is a paragraph of text.</p>

Bold and Italic Tags (<strong> and <em>)

These tags are used to make text bold and italic, respectively:

  <p><strong>This text is bold.</strong></p>
<p><em>This text is italicized.</em></p>

Span Tag (<span>)

The <span> tag is used to group inline elements for styling purposes:

  <p>This is <span style="color: red;">highlighted text</span> using a span tag.</p>

Creating a Link

The <a> tag is used to create hyperlinks. It requires the href attribute to specify the destination URL:

  <a href="https://www.gazehub.com/">www.gazehub.com</a>

In this example:

  • <a> is the anchor tag used to create a hyperlink.
  • href="https://www.gazehub.com" specifies the destination URL that the link points to.
  • Visit www.gazehub.com is the visible text or content of the link that users click on.

Link Attributes

Additional attributes like target and rel can be used with the <a> tag:

  • target: Specifies where to open the linked document (_blank opens in a new window/tab).
  • rel: Specifies the relationship between the current document and the linked document (e.g., nofollow, noopener).

Example with attributes:

With noopener noreferrer

  <a href="https://www.gazehub.com/" target="_blank" rel="noopener noreferrer">Visit www.gazehub.com (Opens in a new tab)</a>

In this example:

  • target="_blank" opens the link in a new tab or window.
  • rel="noopener noreferrer" improves security by preventing the new tab from accessing the originating page’s window object (noopener) and ensures that the referrer information is not sent (noreferrer).

Without noopener noreferrer Without these attributes, the link behaves in a default manner. Here’s an example:

  <a href="https://www.gazehub.com/" target="_blank">Visit Example.com</a>
  • target="_blank": Opens the link in a new tab or window.
  • When clicked, the browser opens https://www.gazehub.com/ in a new tab. However, this can lead to a security risk known as “tabnapping” or “reverse tabnabbing.”

Comparison

  • Security: Without noopener, malicious websites can potentially manipulate the opening page using window.opener. With noopener, this risk is mitigated.
  • Privacy: noreferrer ensures that the referring URL (where the user came from) is not disclosed to the linked site, protecting user privacy.

Additional Knowledge

Tabnapping and reverse tabnapping are types of security exploits that take advantage of browser tabs and the way they handle links, particularly those opened in new tabs or windows.

  1. Tabnapping:

    • Definition: Tabnapping (or tabnabbing) is a technique where a malicious website changes its content after being opened in a background tab that was previously viewed and trusted by the user. This change often mimics a legitimate site or prompts the user to enter sensitive information.
    • How it works:
    • A user opens a trusted website in a browser tab.
    • Meanwhile, another tab or window with a malicious site (often in the background) prepares content that looks like the trusted site.
    • The malicious site may then use JavaScript to change its content and appearance to imitate the trusted site (phishing attack).
    • When the user returns to the previously trusted tab, they may be tricked into entering login credentials or other sensitive information, thinking they are still on the trusted site.

  2. Reverse Tabnapping:

    • Definition: Reverse tabnapping is a variation where a malicious site opened in a new tab or window attempts to modify the referring tab (the tab from which the user came) to redirect to a phishing or malicious site.
    • How it works:
      • A user opens a link that leads to a malicious site in a new tab (typically using target="_blank").
      • The malicious site uses JavaScript to modify the opener tab (the original tab from which the link was opened) to navigate to a phishing or malicious site.
      • This technique relies on the assumption that users trust the origin of the link they clicked, potentially leading them to enter sensitive information on the now-modified opener tab. Mitigation with noopener and noreferrer

To mitigate these risks, modern browsers support the noopener and noreferrer attributes for anchor () tags:

  • noopener: Prevents the newly opened tab from accessing the window.opener property, thus protecting against tabnapping and reverse tabnapping.
  • noreferrer: Ensures that no referrer information (such as the URL of the page that contains the link) is sent to the newly opened tab, enhancing user privacy.

Using noopener noreferrer in <a> tags when opening links in a new tab or window helps prevent these types of attacks by limiting the ability of the newly opened tab to interact with the original tab and by protecting user privacy.