Creating ids (bookmarks) for content like sections within a blog post (internal links), and hyperlinks to it, in blogger

By -

Last updated on 3rd April 2024

This post is mainly a reference post for myself so that I can easily look up how to create id bookmarks in blogger and create hyperlinks to it. I decided to make it a public post as I felt it may be useful to some others. [3rd April 2024: I thought of adding the term 'internal links' to this post as I was searching for this post in Blogger dashboard with that term but could not find it.]

I believe that the id creation part has to be done using HTML mode in blogger. So this whole post explains both the id creation part and creation of link to that id (bookmark), in HTML mode.

Using an id (bookmark) with an HTML element

An associated reference page is: HTML Bookmarks with ID and Links,  https://www.w3schools.com/html/html_id.asp .

HTML code below is an example where I am using the bold tag instead of a header tag. I try to keep my blog posts simple and so for most posts where I need sections I simply use bold for the section header. 

<b id="Sect1">Section 1</b>

Above HTML used below:

Section 1

Dummy section text ...

========

Creating a hyperlink that goes to the bookmark (id element) within the post

Associated reference pages are: HTML <a> Tag, https://www.w3schools.com/tags/tag_a.asp and above reference page of HTML Bookmarks with ID and Links.

HTML code below is an example. 

<a href="#Sect1">(Go To) Section 1</a>

Above HTML used below:

(Go To) Section 1

Above link creation can also be done in Compose mode of blogger. In the link field enter "#Sect1".


HTML code for a list of links to sections within a post with each section having a bookmark id

<p><b>Sections in this post</b></p>

<li><a href="#Sect1">Section 1</a></li>

<li><a href="#Sect2">Section 2</a></li>

<li><a href="#Sect3">Section 3</a></li>

<p>========================================================</p> 

Above HTML used below:

Sections in this post

  • Section 1
  • Section 2
  • Section 3

    • Note that such a list of links should be possible to do in Compose mode. Each list entry would have to be made a link (using the toolbar command icon) and the associated bookmark specified as link address (with preceding # character).

    ========================================================


    <b id="Sect2">Section 2</b>

    Above HTML used below:

    Section 2

    Dummy section text ...

    =======

    <b id="Sect3">Section 3</b>

    Above HTML used below:

    Section 3

    Dummy section text ...

    =======

    Comments

    Post a Comment