About anchor semantics which can be required, necessary and useful

The basic idea comes from changes from older websites towards the increasing number of Gutenberg Blocks.

So what is worked out for long times and combine anything feasible, should now be discovered again, reinterpreted and compared with the latest Gutenberg technologies.

We initiated a text structure semantic block and call it ‘Hyperlink Group Block‘ which should simply use the given HTML anchor possibilities and much more besides.

Very basic structures are used without losing the structures and semantic out of sights:

  • As the name suggests, text is supposed to get references. Of course, the rules for HTML don‘t specify how much text such a link should enclose.
  • A href attribute could be added to all HTML elements rather than restricting nested HTML elements for an anchor element.

We think that is old school and would rather call to mind the possibilities, opportunities and why’s:

  • Same links don’t have to be set multiple times for some elements, but can enclose that multi HTML elements.
  • Links can be used for non-search engine readable elements, like images.
  • For the user, a summarized structure may be easy to recognize as many small elements that point to the same link targets.
  • User clicks to unwanted references should be kept as low as possible.

However, the semantic structure of the HTML would be optimal, when it would be taken directly from the necessary sentences and images. Search engines and screen readers are becoming more and more popular and only deliver desired results.
Unfortunately that sounds like future music and so we try to describe the added-value of HTML (Hypertext Markup Language).

The conceptual considerations of Gutenberg have inspired us to create a roadmap in the form of further issues at GitHub. Everyone is welcome to contribute their own experiences via comments, their own issues or pull requests.

Have same links grouped together
For a good UX: Open a link for some wrapped elements.

Blocks transform and wrapped with a Hyperlink Group Block

After the theoretical requirements and a desired, possible outlook, the implementation with a primary feature list from the Hyperlink Group Block.

Gutenberg transform Block and autocomplete input
If the <a> element has an href attribute, then it represents a hyperlink (a hypertext anchor).

Add new Blocks inside the Hyperlink Group Block or wrap existing Bocks with the transform feature from Gutenberg into a group wrapped with a hypertext anchor. Set the href attribute with the known Gutenberg’s autocomplete input. To open the target Url in the same or a new browser tab a toggle option can be set.

Additional set the rel attribute

A rel attribute can be set for SEO. Not every link needs a precisely set rel attribute. It is more likely that if a link is very important or should reflect other existing attributes, it makes sense to use the rel attribute.

Transform Blocks

For the writing of texts, Gutenberg supports the transform feature between blocks, which is not only due to the semantics of the text, but also the layout and machine readability are improved.

Gutenberg Blocks transform to hyperlink groups

Select the Blocks which should be grouped with a Hyperlink. The Block Toolbar will appear. Click on the Block icon and select the Hyperlink Block to transform the selected Blocks to a Hyperlink Block with some InnerBlocks.

The many theories can easily be implemented with a little trial and error.

Leave a Reply

Your email address will not be published. Required fields are marked *