html anchor name example

In HTML anchor name is a attribute of the <a> tag. It's bookmark of the same page or the other page and particular area.

If you want to create a bookmark when you can see this example:

<a href="#bookMark">Book mark name</a>

when we will click on the "Bookmark name" button then will go to the particular area as:
<div><a name="bookMark" id="bookMark">&nbsp;</a> Some content as you want write here.</div>


If you want to go to another page then you can use your URL and then id name as:
<a href="test.html#bookMark">Book mark name</a>
<div><a name="bookMark" id="bookMark">&nbsp;</a> Some content as you want write here.</div>

It's simple but if your required is using there any fixed area as like your header section is fixed as in this example. Please follow this example for the fixed header, there we will use the name anchor code as defined below:

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            margin: 0;
            padding: 0;
        }
        header {
            background: #eee;
            height: 100px;
            padding: 10px;
            position: fixed;
            width: 100%;
        }
        .textClass {
            background: #eee;
            padding: 20px;
            border: 1px solid #ddd;
            margin: 20px;
        }
        h1 {
            text-align: center;
            line-height: 100px;
        }
        a {
            font-size: 24px;
            color: #0bf
        }
        a:hover {
            font-size: 24px;
            color: #0b6
        }
        main {
            padding-top: 150px;
        }
        a[name] {
            padding-top: 150px;
        }
    </style>
</head>

<body>
    <header>
        <h1>Header fixed</h1>
    </header>
    <main>
        <a href="#any1">Any Anchor First</a>
        <a href="#any2">Any Anchor Second</a>
        <div class="textClass">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius nulla sed lacus rhoncus interdum. Vivamus rutrum
            porta egestas. In ultrices semper dignissim. Morbi placerat ultrices ante, ac tincidunt sem scelerisque sit amet. Vivamus
            eget finibus ex, ac congue lacus. In quis nunc scelerisque, elementum magna id, pharetra nisl. Nunc posuere luctus ornare.
            Aliquam dolor urna, semper quis felis eget, mollis condimentum ex. Etiam condimentum, orci vitae rutrum volutpat, dolor
            elit venenatis ex, et hendrerit nibh tortor eget nisi. Nulla sit amet ex efficitur, malesuada nulla nec, lacinia urna.
            Duis ut dolor vehicula, blandit neque vel, imperdiet leo. Morbi nisi tellus, vehicula sed magna vitae, lobortis efficitur
            magna.<br></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius nulla sed lacus rhoncus
            interdum. Vivamus rutrum porta egestas. In ultrices semper dignissim. Morbi placerat ultrices ante, ac tincidunt sem scelerisque
            sit amet. Vivamus eget finibus ex, ac congue lacus. In quis nunc scelerisque, elementum magna id, pharetra nisl. Nunc
            posuere luctus ornare. Aliquam dolor urna, semper quis felis eget, mollis condimentum ex. Etiam condimentum, orci vitae
            rutrum volutpat, dolor elit venenatis ex, et hendrerit nibh tortor eget nisi. Nulla sit amet ex efficitur, malesuada nulla
            nec, lacinia urna. Duis ut dolor vehicula, blandit neque vel, imperdiet leo. Morbi nisi tellus, vehicula sed magna vitae,
            lobortis efficitur magna.
        </div>
        <div>
            <h2><a class="nameAnchor" name="any1" id="any1">&nbsp;</a>Any Anchor First</h2>Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Pellentesque varius nulla sed lacus rhoncus interdum. Vivamus rutrum porta egestas. In ultrices semper
            dignissim. Morbi placerat ultrices ante, ac tincidunt sem scelerisque sit amet. Vivamus eget finibus ex, ac congue lacus.
            In quis nunc scelerisque, elementum magna id, pharetra nisl. Nunc posuere luctus ornare. Aliquam dolor urna, semper quis
            felis eget, mollis condimentum ex. Etiam condimentum, orci vitae rutrum volutpat, dolor elit venenatis ex, et hendrerit
            nibh tortor eget nisi. Nulla sit amet ex efficitur, malesuada nulla nec, lacinia urna. Duis ut dolor vehicula, blandit
            neque vel, imperdiet leo. Morbi nisi tellus, vehicula sed magna vitae, lobortis efficitur magna.<br></br>Lorem ipsum dolor
            sit amet, consectetur adipiscing elit. Pellentesque varius nulla sed lacus rhoncus interdum. Vivamus rutrum porta egestas.
            In ultrices semper dignissim. Morbi placerat ultrices ante, ac tincidunt sem scelerisque sit amet. Vivamus eget finibus
            ex, ac congue lacus. In quis nunc scelerisque, elementum magna id, pharetra nisl. Nunc posuere luctus ornare. Aliquam
            dolor urna, semper quis felis eget, mollis condimentum ex. Etiam condimentum, orci vitae rutrum volutpat, dolor elit venenatis
            ex, et hendrerit nibh tortor eget nisi. Nulla sit amet ex efficitur, malesuada nulla nec, lacinia urna. Duis ut dolor
            vehicula, blandit neque vel, imperdiet leo. Morbi nisi tellus, vehicula sed magna vitae, lobortis efficitur magna.</div>
        <div>
            <div class="textClass">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius nulla sed lacus rhoncus interdum. Vivamus rutrum
                porta egestas. In ultrices semper dignissim. Morbi placerat ultrices ante, ac tincidunt sem scelerisque sit amet. Vivamus
                eget finibus ex, ac congue lacus. In quis nunc scelerisque, elementum magna id, pharetra nisl. Nunc posuere luctus ornare.
                Aliquam dolor urna, semper quis felis eget, mollis condimentum ex. Etiam condimentum, orci vitae rutrum volutpat, dolor
                elit venenatis ex, et hendrerit nibh tortor eget nisi. Nulla sit amet ex efficitur, malesuada nulla nec, lacinia urna.
                Duis ut dolor vehicula, blandit neque vel, imperdiet leo. Morbi nisi tellus, vehicula sed magna vitae, lobortis efficitur
                magna.<br></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius nulla sed lacus rhoncus
                interdum. Vivamus rutrum porta egestas. In ultrices semper dignissim. Morbi placerat ultrices ante, ac tincidunt sem
                scelerisque sit amet. Vivamus eget finibus ex, ac congue lacus. In quis nunc scelerisque, elementum magna id, pharetra
                nisl. Nunc posuere luctus ornare. Aliquam dolor urna, semper quis felis eget, mollis condimentum ex. Etiam condimentum,
                orci vitae rutrum volutpat, dolor elit venenatis ex, et hendrerit nibh tortor eget nisi. Nulla sit amet ex efficitur,
                malesuada nulla nec, lacinia urna. Duis ut dolor vehicula, blandit neque vel, imperdiet leo. Morbi nisi tellus, vehicula
                sed magna vitae, lobortis efficitur magna.
            </div>
            <div class="textClass">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius nulla sed lacus rhoncus interdum. Vivamus rutrum
                porta egestas. In ultrices semper dignissim. Morbi placerat ultrices ante, ac tincidunt sem scelerisque sit amet. Vivamus
                eget finibus ex, ac congue lacus. In quis nunc scelerisque, elementum magna id, pharetra nisl. Nunc posuere luctus ornare.
                Aliquam dolor urna, semper quis felis eget, mollis condimentum ex. Etiam condimentum, orci vitae rutrum volutpat, dolor
                elit venenatis ex, et hendrerit nibh tortor eget nisi. Nulla sit amet ex efficitur, malesuada nulla nec, lacinia urna.
                Duis ut dolor vehicula, blandit neque vel, imperdiet leo. Morbi nisi tellus, vehicula sed magna vitae, lobortis efficitur
                magna.<br></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius nulla sed lacus rhoncus
                interdum. Vivamus rutrum porta egestas. In ultrices semper dignissim. Morbi placerat ultrices ante, ac tincidunt sem
                scelerisque sit amet. Vivamus eget finibus ex, ac congue lacus. In quis nunc scelerisque, elementum magna id, pharetra
                nisl. Nunc posuere luctus ornare. Aliquam dolor urna, semper quis felis eget, mollis condimentum ex. Etiam condimentum,
                orci vitae rutrum volutpat, dolor elit venenatis ex, et hendrerit nibh tortor eget nisi. Nulla sit amet ex efficitur,
                malesuada nulla nec, lacinia urna. Duis ut dolor vehicula, blandit neque vel, imperdiet leo. Morbi nisi tellus, vehicula
                sed magna vitae, lobortis efficitur magna.
            </div>
            <h2><a class="nameAnchor" name="any2" id="any2">&nbsp;</a>Any Anchor Second</h2>Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Pellentesque varius nulla sed lacus rhoncus interdum. Vivamus rutrum porta egestas. In ultrices semper
            dignissim. Morbi placerat ultrices ante, ac tincidunt sem scelerisque sit amet. Vivamus eget finibus ex, ac congue lacus.
            In quis nunc scelerisque, elementum magna id, pharetra nisl. Nunc posuere luctus ornare. Aliquam dolor urna, semper quis
            felis eget, mollis condimentum ex. Etiam condimentum, orci vitae rutrum volutpat, dolor elit venenatis ex, et hendrerit
            nibh tortor eget nisi. Nulla sit amet ex efficitur, malesuada nulla nec, lacinia urna. Duis ut dolor vehicula, blandit
            neque vel, imperdiet leo. Morbi nisi tellus, vehicula sed magna vitae, lobortis efficitur magna.<br></br>Lorem ipsum dolor
            sit amet, consectetur adipiscing elit. Pellentesque varius nulla sed lacus rhoncus interdum. Vivamus rutrum porta egestas.
            In ultrices semper dignissim. Morbi placerat ultrices ante, ac tincidunt sem scelerisque sit amet. Vivamus eget finibus
            ex, ac congue lacus. In quis nunc scelerisque, elementum magna id, pharetra nisl. Nunc posuere luctus ornare. Aliquam
            dolor urna, semper quis felis eget, mollis condimentum ex. Etiam condimentum, orci vitae rutrum volutpat, dolor elit venenatis
            ex, et hendrerit nibh tortor eget nisi. Nulla sit amet ex efficitur, malesuada nulla nec, lacinia urna. Duis ut dolor
            vehicula, blandit neque vel, imperdiet leo. Morbi nisi tellus, vehicula sed magna vitae, lobortis efficitur magna.</div>
        <div class="textClass">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius nulla sed lacus rhoncus interdum. Vivamus rutrum
            porta egestas. In ultrices semper dignissim. Morbi placerat ultrices ante, ac tincidunt sem scelerisque sit amet. Vivamus
            eget finibus ex, ac congue lacus. In quis nunc scelerisque, elementum magna id, pharetra nisl. Nunc posuere luctus ornare.
            Aliquam dolor urna, semper quis felis eget, mollis condimentum ex. Etiam condimentum, orci vitae rutrum volutpat, dolor
            elit venenatis ex, et hendrerit nibh tortor eget nisi. Nulla sit amet ex efficitur, malesuada nulla nec, lacinia urna.
            Duis ut dolor vehicula, blandit neque vel, imperdiet leo. Morbi nisi tellus, vehicula sed magna vitae, lobortis efficitur
            magna.<br></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius nulla sed lacus rhoncus
            interdum. Vivamus rutrum porta egestas. In ultrices semper dignissim. Morbi placerat ultrices ante, ac tincidunt sem scelerisque
            sit amet. Vivamus eget finibus ex, ac congue lacus. In quis nunc scelerisque, elementum magna id, pharetra nisl. Nunc
            posuere luctus ornare. Aliquam dolor urna, semper quis felis eget, mollis condimentum ex. Etiam condimentum, orci vitae
            rutrum volutpat, dolor elit venenatis ex, et hendrerit nibh tortor eget nisi. Nulla sit amet ex efficitur, malesuada nulla
            nec, lacinia urna. Duis ut dolor vehicula, blandit neque vel, imperdiet leo. Morbi nisi tellus, vehicula sed magna vitae,
            lobortis efficitur magna.
        </div>
        <div class="textClass">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius nulla sed lacus rhoncus interdum. Vivamus rutrum
            porta egestas. In ultrices semper dignissim. Morbi placerat ultrices ante, ac tincidunt sem scelerisque sit amet. Vivamus
            eget finibus ex, ac congue lacus. In quis nunc scelerisque, elementum magna id, pharetra nisl. Nunc posuere luctus ornare.
            Aliquam dolor urna, semper quis felis eget, mollis condimentum ex. Etiam condimentum, orci vitae rutrum volutpat, dolor
            elit venenatis ex, et hendrerit nibh tortor eget nisi. Nulla sit amet ex efficitur, malesuada nulla nec, lacinia urna.
            Duis ut dolor vehicula, blandit neque vel, imperdiet leo. Morbi nisi tellus, vehicula sed magna vitae, lobortis efficitur
            magna.<br></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius nulla sed lacus rhoncus
            interdum. Vivamus rutrum porta egestas. In ultrices semper dignissim. Morbi placerat ultrices ante, ac tincidunt sem scelerisque
            sit amet. Vivamus eget finibus ex, ac congue lacus. In quis nunc scelerisque, elementum magna id, pharetra nisl. Nunc
            posuere luctus ornare. Aliquam dolor urna, semper quis felis eget, mollis condimentum ex. Etiam condimentum, orci vitae
            rutrum volutpat, dolor elit venenatis ex, et hendrerit nibh tortor eget nisi. Nulla sit amet ex efficitur, malesuada nulla
            nec, lacinia urna. Duis ut dolor vehicula, blandit neque vel, imperdiet leo. Morbi nisi tellus, vehicula sed magna vitae,
            lobortis efficitur magna.
        </div>
    </main>
</body>
</html>

No comments:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.