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:

when we will click on the "Bookmark name" button then will go to the particular area as:

<div><a name="bookMark" id="bookMark"> </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:

<div><a name="bookMark" id="bookMark"> </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:

Code Demo

<!DOCTYPE html>

<head>

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

<h1>Header fixed</h1>

</header>

<main>

<a href="#any1">Any Anchor First</a>

<a href="#any2">Any Anchor Second</a>

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

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.