Menu
HTML

HTML Links and Anchors

4. Links and Anchors:

  • <a>: tag is used to create a hyperlink. In this example, it links to "https://www.codersmile.com" and opens it in a new tab (target="_blank").
  • <nav>: tag is used to define a navigation bar, and <ul> creates an unordered list of navigation items.
  • <li>: Each navigation item is a list item (<li>) containing an anchor tag (<a>) with a link to a specific section of the page (e.g., "#home").
  • <ol>: tag is used to create an ordered list with three list items.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Example</title>
</head>
<body>

    <!-- Navigation Bar -->
    <nav>
        <ul>
            <li><a href="https://www.codersmile.com" target="_blank">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
        </ul>
    </nav>

    <!-- Content Sections -->
    <section id="home">
        <h2>Home</h2>
        <p>Welcome to our website! This is the home section.</p>
    </section>

    <section id="about">
        <h2>About</h2>
        <p>Learn more about us and our mission in the about section.</p>
    </section>

    <section id="services">
        <h2>Services</h2>
        <p>Explore the services we offer to our users.</p>
    </section>

    <!-- Ordered List -->
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>

</body>
</html>
HTML