Suggestion to allow HTML anchor names/ids in Steemit posts

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com
·@snug·
0.000 HBD
Suggestion to allow HTML anchor names/ids in Steemit posts
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](https://steemit.com/steemit/@snug/steemit-s-html-whitelist) for posts.
Among the list of allowed tags, the `a` tag is supported.
On Steemit, all attributes are ignored except `href`and `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](https://stackoverflow.com/questions/484719/html-anchors-with-name-or-id#484781).

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
<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>

<hr/>

<p>
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.
</p>

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