The main feature:
- Headings could have an auto-generated id that could be used to constract a webpage link to an exact location of a lengthy Q/A.
- Such anchors could also be used to navigate within an Q/A itself to its other parts.
Additionally:
- Support for id attribute
<p id="my-id">lorem ipsum</p>
to allow creating arbitrary anchors not bound to headings. The above currently renders as" lorem ipsum"<p></p>
- other tags, e.g.:
<hr id="one"/>
,<br id="two"/>
For discussion:
Who is responsible for uniqueness of the anchor ids?
- author should make unique headings if they want to use anchor jumps
- duplicate headings could have an automatic number increment appended
note: If the anchor id ceases to exist (ie by editing the answer), it will still be possible to navigate to the original Q/A as it is still present in the link (some-question/<answer-id>#nonexistent-anchor
)
Below this line I present you a mock Answer interlaid with my commentary using quotes and code.
Hopefully it should convey the idea.
Imagine a friend sending you a solution to some issue:
" Here is the solution that worked for me. Try this:
https://meta.stackoverflow.com/questions/392111/make-headings-anchor-jumpable#solution-a
"
~ some friendNotice the anchor part in the link. (
#solution-a
)
Solution A
A very lengthy solution with some more text. blahblah
The heading above would be rendered with an auto-generated id
<h1 id='solution-a'>Solution A</h1>
and the link from the friend above would make the page scroll to this exact heading directly.
step A1 (renderes as <h3 id='step-a1'>step A1</h3>
)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
step A2 (renderes as <h3 id='step-a2'>step A2</h3>
)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Solution B
Another very lengthy solution. Such length. wow
The heading above would be rendered with an auto-generated id
<h1 id='solution-b'>Solution B</h1>
Follows example inter-document navigation. Useful to link from within an answer to another bit of text already mentioned somewhere else in the answer. It uses the classic link syntax
[link text][1]
, however, in the url, you won't place a full address, but just the hash part.
Lorem ipsum, See the previous solution [step 2 of solution A][1]
but this time, replace something with some other thing.
[1]: #step-a2 <- notice just the hash part
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Solution C
Yet another solution
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
lorem ipsumBelow I attempt to use
id
attribute<p id="my-id">lorem ipsum</p> <p>lorem ipsum</p>
which renders just this
" lorem ipsum" (<- this actually looks like an error?) <p></p> <p>lorem ipsum</p>
See for yourself with devtols / Inspect.
lorem ipsum