HTML Heading IDs

Meta
1

HTML Heading IDs

Adding custom IDs allows you to link directly to headings, helping to create indexes and provide more organization in long threads. An example of this in action can be found here. To add a custom heading ID, create an HTML heading, and add the ID to the pair of carrots on the left.

The HTML looks like this:

<h3 id='heading--link-to-me-custom'>My Amazing Heading</h3>

Linking to Heading IDs

You can link to headings with custom IDs by creating a standard link with a pound sign ( # ) followed by the custom heading ID. Note that the custom part of the ID is the word custom in #headingā€“link-to-me-custom. The rest of the tag should remain the same.

Markdown HTML Result
[Heading IDs](#heading--link-to-me-custom) <a href="#heading--link-to-me-custom">Heading IDs</a> Heading IDs

Outside websites can also link to the heading by adding the custom heading ID to the full URL of the website address. This is especially helpful when directing someone to a specific part of your topic.

You may also simply right-click the heading and click ā€œCopy Linkā€.

Example:

[Runway Taxi-Holding Position (RTHP)](https://community.infiniteflight.com/t/taxiway-surface-markings-tutorial/448934#heading--link-to-me-rthp)

Result:

Runway Taxi-Holding Position (RTHP)

Images

This works both ways with images too! To make an image a link, simply include your image inside of the standard link brackets. To make your image a heading, as shown in my Taxiway Surface Markings Tutorial, all you have to do is include your image inside of the HTML heading brackets:

<h3 id='heading--link-to-me-custom'>image</h3>

Linking to Words Instead of Headings

To link to words instead of headings use this:

<a name="custom">My Amazing Words</a>

Standard Link

[Standard Link](webpage address)
17 Likes
2

woah, thatā€™s a neat tutorial! Iā€™ve been trying to find out how to put this in. Thank you!!!

Congrats on getting promoted to Regular too!

3

Thanks Luca, I was actually curious on how you did this with your KSFO guide, so thanks for explaining!!

4

Great Tutorial @lucaviness!

5

Hey Luca and thanks for this! I may be daft or no, but I donā€™t get it. So you make the standard link, but how to make it go to a certain bit? Thanks

6

Nice tutorial, I will use this is the future! Also well done on regular, very well deserved mate šŸ‘

7

You first make a heading with your custom ID.

And then you create your link using the same ID.

If youā€™d like to see the raw version of that:

<h4 id='heading--link-to-me-custom'>You first make a heading with your custom ID.</h3>

[And then you create your link with the same ID.](#heading--link-to-me-custom)
8

Like this.

long postā€¦

Then this?

9

Well, that linked to the heading in my last post, since Heading IDs link to the first heading on the page if there are two of the same ID present. Change the word custom to a new word. For example, #headingā€“link-to-me-luke.

Edit: It worked, congrats!

1 Like
10

I edited it, check now

Edit:

Perfect, thanks very much! Just needs a bit of practice, haha

1 Like
11

Interesting, Iā€™ve always used

<a name='name'>name an a better than this</a>
12

Looks like thereā€™s new programmer helping the IFC! Great job!

1 Like
13

Yeah, I believe there are a few different ways to do it. If anyone else knows of other methods, let me know and Iā€™ll add a section above explaining each one that works.

14

Great job! Well needed tutorial. Congrats on your promotion to regular as well :)

15

Sweet! Iā€™ve been looking everywhere for thisā€¦ thanks a lot!

16

I already really wondered how you did this for the SFO guide. Great #meta tutorial, thank you!

17

You always surprise me with your posts @lucaviness! Phenomenal job as always šŸ˜Š

18

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.