You will see how to make links to headers and images within your post using very little HTML code. Make an index for your post and let the reader navigate to these sections directly. This will allow your reader or visitor to easily navigate through your post.
- How to create a link to an element in a web page using HTML?
- Watch A YouTube video showing you these steps
- Create a Link to Headers in your post
- Create a link to an image in your post
How to create a link to an element in a web page using HTML?
In HTML, whatever you are displaying on your webpage as headings, paragraphs, images, etc. are called elements. Each element has a <tag> to denote its function as <h1> for header and <p> for paragraph. Elements are divided into 2 major categories:
Block Elements, which reserve a block of space for their content like headers and all structural elements as <div>, <figure>, <section>
Inline Elements, which go between opening and closing tags of a block element as <strong> and <br>
HTML gives you the option to give a unique ID or name to any block element you like to refer to specifically in the html code by using : id=”any-name” inside the opening tag of the block element as <h1 id=”header-1″>
Watch A YouTube video showing you these steps
Create a Link to Headers in your post
- While writing your post you add Titles and subtitles to you post sections using headers like the above one ” Create a Link to Headers in your post “
- if you click on this header 3 dots appear to the right of the top menu of the header block
- Click on these 3 dots (details in below imageX to the left) and select “Edit as HTML”
- The header will look like this: <h5>Create a Link to Headers in your post</h5>
- add: id=”links-to-headers” inside the opening tag
- It will look like: <h5 id=”links-to-headers” >Create a Link to Headers in your post</h5>
- Click on the 3 dots again and select edit visually as in image 2 to the right below
- It will return to the normal header block view
- Then got to the post index on the top and highlight the item in the index corresponding to the header you had just added an id to.
- Follow the steps in Image 3 below:
- Highlight the index item you want to link
- Click on the link icon
- Write the name of the id you used for the header preceded by # as “#links-to-headers”
- Click on the apply button
- You will find that the item list is converted to a link, save a draft then, test it using post preview.
Create a link to an image in your post
WordPress is not happy with adding ids to image, paragraph or quote blocks. After adding the id, it gives an alarm that there is an error. It allows 2 options: Convert to HTML or Convert to Block.
In case you select to convert to block, WordPress will delete the id from your code.
So, after adding and styling your image, quote, list or paragraph completely, convert the block to HTML add the id and view it from the preview icon in the block top menu as following steps:
- Convert the image to HTML from the block top menu 3 dots
- add the id in the <figure> opening tag as <figure class=”..” id=”imageX”>
- if you want to see the image back click on Preview
- Use this id as a link to any text in your post as “# imageX ”