heading icon identifier

At a glance

The community members discussed the idea of having the icon for a heading element visually represent the tag value selected (e.g., H1, H2). This would make it easier to quickly understand the structure of the content in the navigator panel. Some community members expressed support for this idea, and suggested additional features like color-coding different elements and binding the box element to the actual HTML tag used. There was no explicitly marked answer, but the discussion focused on improving the visual representation of the content structure.

JJeremy

It would be nice if the icon for the heading were bound to the tag value selected. For example, when I add a heading component, it defaults to an H1. I can change it to an H2 but I can't easily see that's what I did if I'm looking in the navigator panel.

At a glance of your navigator panel you could read your structure.

Attachment

8 comments

DDirky Dirk

I've been using brackets recently

AAlex

This is an awesome idea imo

JJeremy

Touche, I could manually change them.

DDirky Dirk

be nice to also have ability to color cordinate different elements

JJeremy

An addition to this suggestion would be to bind the box element to whatever tag it is. Eg, main, section, nav, aside, etc.

This would be really handy for a quick preview for both SEO and accessibility.

BBogdan

Do you mean this?

Attachment

BBogdan

heading icon identifier

JJeremy

Yes. I change those often for proper semantics. It would be cool if the block element in the navigator were bound to that select. So if I changed it to a <main> element, it would be visually represented.

In the attached image, I have named it a section manually, but I could name it that and the semantics would still be a <div> if I didn't change it. Just thought visual representation on the items changed would be helpful.

Attachment

Add a reply

Join the Webstudio community

heading icon identifier