Anchor Link

    0
    <span class=Anchor Link" title="Anchor Link" />

    Copy the following HTML iframe code to your website:

    « Back to Glossary Index
    0
    (0)

    An anchor link is a specific kind of HTML link that links to a specific place in a document.

    Anchor links are very useful to help your website visitor navigate through a long post, or can help you refer to a specific place on another page.

    You can create anchor links one of several ways: using namespace in HTML, linking to the name of a CSS class, or designating an anchor link for a heading block in the WordPress Heading Block. The links in this paragraph are all linked to anchors so you can jump to the section you want. Convenient!

    Using the HTML Name attribute

    To create an anchor link this way:

    1. Create the Anchor

    Choose the text that you wish to link to and wrap it with the <a name=” attribute, choosing a word that will be the link.

    For example, if I want to link THIS TEXT IN ALL CAPS HERE to some text at the bottom of the page I would structure the anchor link like this:
    <a name="bottom">Here's the text that expample #1 links to</a>

    Where bottom is the word I’ve chosen to use for the link. Make sure to close your html with </a>

    2. Create the Link

    Create the link around the text you want to link from the same way you create any other HTML link, using a hashtag in front of the word you used in your anchor link.

    For instance, this is what I used in the example here.

    <a href="#bottom">THIS TEXT IN ALL CAPS HERE</a>

    Now if you click the text in all caps above, it will jump you forward in the document to the anchor link.

    Using CSS

    You can also use a CSS ID, like a div ID to create an anchor link, in a similar way to what we did with the name attribute in the example above.

    1. Create a section with a CSS ID

    For instance, In this example, I’ve created a section like this later in this document:

    <div id="example">This is the example section that I'm linking to in Example #2.</div>

    2. Create the link.

    Now, I want to LINK THIS TEXT IN ALL CAPS HERE to the section I just created.

    I do it just like in the example above using <a href=” and so forth but I use the name I’ve given the div id along with the hashtag like this:

    Now, I want to <a href="#example">LINK THIS TEXT IN ALL CAPS HERE</a> to the section I just created.

    The Easy Way to Create Anchors in WordPress

    The WordPress block editor offers an easy way to create anchor links.

    Heading block settings

    In the Heading Block settings in the post editor, you’ll see an area under Advanced to insert an HTML anchor.

    Insert the word you want to link to here, and then create a link the way you usually would anywhere else in your wordpress document and make that work with a hashtag in front of it your link URL.

    For instance, if I enter the word test as the HTML anchor for this section, I can create a link here using #test that would jump to it if it were not visible on the page already.

    Jumping to an anchor link on another page

    To jump to an anchor link on another page, just add the anchor with the hashtag, to your link. For instance, if I wanted to link to the point on the post here about “Things to Think About Before You Start Blogging,” I would add the anchor I assigned that section (#name) to tne end of the URL:

    <a href="https://www.lovecoffeewordpress.com/before-you-start-blogging/#name"</a>
    Here’s the text that expample #1 links to.
    This is the example section that I’m linking to in Example #2.
    [sharable-quote tweet=”Here are ways to create anchor links to link to other content in your document in WordPress.” user=”@lovecoffeewp” hashtags=”wordpress,blogging,html”]

    How much love or how many cups of hot coffee does this post deserve?

    Click to rate it!

    Average rating: 0 / 5. Vote count: 0

    No votes so far! Be the first to rate this post.

    As you gave this post a good rating:

    Follow us on social media!

    We're sorry you didn't like this post.

    Help us improve!

    Tell us how we can improve this post.

    Synonyms:
    anchor, anchor text
    Categories: HTML
    Anchor_text (Wikipedia)

    The anchor text, link label or link text is the visible, clickable text in an HTML hyperlink. The term "anchor" was used in older versions of the HTML specification for what is currently referred to as the "a element". The HTML specification does not have a specific term for anchor text, but refers to it as "text that the a element wraps around". In XML terms (since HTML is XML), the anchor text is the content of the element, provided that the content is text.

    Usually, web search engines analyze anchor text from hyperlinks on web pages. The words contained in the anchor text can determine the ranking that the page will receive by search engines. Other services apply the basic principles of anchor text analysis as well. For instance, academic search engines may use citation context to classify academic articles, and anchor text from documents linked in mind maps may be used too.

    « Back to Glossary Index
    Subscribe to Comment Notifications
    Notify of
    guest
    0 Comments
    Inline Feedbacks
    View all comments
    0
    Psst! Hey you! Yeah, you. Want to leave a comment?x
    ()
    x