Suggestion to allow HTML anchor names/ids in Steemit postssteemCreated with Sketch.

in #utopian-io7 years ago (edited)

This is a suggestion to allow users to link to a subsection of an article as opposed to the entire article, which is currently the only option.

This feature would enable authors to create an index with links to individual sections (chapters, images, videos) for lengthy posts.

The problem

Currently, Steemit allows some limited HTML to be mixed into the Markdown syntax for posts.
Among the list of allowed tags, the a tag is supported.
On Steemit, all attributes are ignored except hrefand rel.

There are two common ways to define anchors, either by setting the name attribute or by setting the id attribute, while the second option is to be preferred.

Once such an anchor is created, it can be linked with <a href="#myanchor">Click here</a>, where myanchor is the key in id (or name).

Example

This following HTML example contains a simple index with links to individual paragraphs.

Markup

<ul>
<li><a href="#test1">Test1</a></li>
<li><a href="#test2">Test2</a></li>
<li><a href="#test3">Test3</a></li>
</ul>

<p>
<a id="test1"></a>
<h2>Test 1</h2>
Lorem ipsum dolor sit amet, consectetur adipisici elit,
sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquid ex ea commodi consequat.
Quis aute iure reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint obcaecat
cupiditat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>

<p>
<a id="test2"></a>
<h2>Test 2</h2>
Lorem ipsum dolor sit amet, consectetur adipisici elit,
sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquid ex ea commodi consequat.
Quis aute iure reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint obcaecat
cupiditat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>

<p>
<a id="test3"></a>
<h2>Test 3</h2>
Lorem ipsum dolor sit amet, consectetur adipisici elit,
sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquid ex ea commodi consequat.
Quis aute iure reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint obcaecat
cupiditat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>

Output

Test 1

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Test 2

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Test 3

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Apparently, Steemit displays this example correctly, but the links to the anchors are ignored, while this HTML example would work as expected in a web browser.

Suggestion

Allow the id attribute on a tags in post HTML, so users can make individual sections of a post linkable.

Sort:  

Thanks for your contribution. Accepted.

[utopian-moderator]

You create very useful content @snug !! It helps to rise the comfort. Greetings Silbart.

Thanks, @silbart. I hope it helps the platform.

Hey @snug I am @utopian-io. I have just upvoted you at 5% Power!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • Seems like you contribute quite often. AMAZING!

Suggestions

  • Contribute more often to get higher and higher rewards. I want to see you often!
  • Work on your followers to increase the votes/rewards. My vote is now primarily based on that, humans rule. Good luck!
  • Wondering why other contributions got more? I introduced a competition factor. My vote is also based on how competitive the category used is.

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Vote for my Witness. Lets GROW TOGETHER!

Screen Shot 2017-11-19 at 16.54.19.png

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Great suggestions, I was just about to propose the same thing. Did you ever see any developer contribution to fix this? Automatic anchors for headlines would be a great improvement to start with.

any news about this ? it still doesn't work for me so far

Coin Marketplace

STEEM 0.15
TRX 0.12
JST 0.025
BTC 56208.10
ETH 2476.58
USDT 1.00
SBD 2.26