Write HTML code to demonstrate the following anchor tag behaviors.

a. Create a hyperlink that opens a .pdf file in a new tab.
b. Create a hyperlink that opens a downloadable .docx file in the same window.
c. Jump from the top of the page to a specific section titled “Contact Us”.
d. Jump from “Contact Us” back to the top.

Solution

<!DOCTYPE html>
<html>
<head>
    <title>Anchor Tag Demonstration</title>
</head>
<body>

    <h2 id="top">Anchor Tag Examples</h2>

    <!-- a. Open PDF in new tab -->
    <p>
        <a href="sample.pdf" target="_blank">Open PDF in New Tab</a>
    </p>

    <!-- b. Download DOCX in same window -->
    <p>
        <a href="sample.docx" download>Download DOCX File</a>
    </p>

    <!-- Spacer for scrolling -->
    <p style="margin-top: 800px;">Scroll down...</p>

    <!-- c. Jump to Contact Us section -->
    <h2 id="contact">Contact Us</h2>
    <p>
        Email: example@example.com<br>
        Phone: 123-456-7890
    </p>

    <!-- d. Jump back to top -->
    <p>
        <a href="#top">Back to Top</a>
    </p>

</body>
</html>

Output

Programming Examples

Write HTML code to demonstrate the following anchor tag behaviors.