0

I have a header that is larger (visually) but is less important than a smaller header. Should the larger header have a lower tag hierarchy since it's less important?

For example:

Below, is it correct that "See Our Events" is an h3 tag and "Event 1, Event 2, Event 3" are h2 tags because the name of events are more important?

It doesn't make sense to me to make the "See Our Events" smaller visually, since it serves as the title of the section. However, even though it's a title, it conveys less important information than the actual event titles.

Is this good practice?

enter image description here

1

There are two things you need to consider when it comes to the visual presentation of hierarchy:

  1. Functional aspect - is the presentation of visual hierarchy consistent? If you can apply this in a consistent manner then it will create the effect required in the organization of content on your page. I imagine that if you had a lot of large h3 tags it might take up a lot of room compared to a large h1 tag.
  2. Non-functional aspect - is the design of the heading suitable for the purpose you want to achieve? As you mentioned, a large heading can draw attention away from the content you want to highlight. But you can also vary the weight of the font rather than just the size, or change the colour to a lighter shade. If you are only relying on size then there might not be a lot of options since you need to be able to show enough contrast.

However, you still need to keep the h1 > h2 > h3 tag hierarchy as it is one of the accessibility compliance requirements. So by all means vary the style for the tags but don't switch them around.

1

"So by all means vary the style for the tags but don't switch them around." <-- I totally agree. It's a visual style issue not an information hierarchy issue. The events are sub info chunks of the main info chunk "see our events", so they have to be of lower heading hierarchy. However, you might have the intention of pointing out the user i.e. to a specific event. Like event 1 is next week and the others still month to come. So event 1 will be larger/brighter/more colored... But logically, all three events are of the same (lower) hierarchy since the hierarchy is not being defined by schedule but by the type of information in general (here: events)

Consider the headings hierarchy as if it would be a table of content in a book. What is more logical, A or B?

ToC A:

  • 1.Our community
  • 1.1. Our events
  • 1.1.1 Event Alpha
  • 1.1.2 Event Bravo
  • 1.1.3 Event Charlie
  • ...

ToC B:

  • 1.Our community
  • 1.1. Event Alpha
  • 1.2. Event Bravo
  • 1.3. Event Charlie
  • 1.1.1. Our events
  • ...

EDIT: Btw, to directly answer your question: Considering my explanation, yes, visual hierarchy of headers may be a different then the actual (marked up) hierarchy depending on what you want to achieve. The visual layer gives you a complete new possibility to rearrange the hierarchy if it is appropreate without destroying the underlying hierarchy (i.e. next week event visually stronger than next month event).

0

Consider which is important, based on if the view is repetitive in nature.

There can be 2 cases for such representation of data.

  1. Repeating view with dynamic data (for smaller header)
  2. Limited view with static data.

For case 1 : Let's consider a case where user view this frequently, and as they keep repeating, larger header keep becoming less important. For such case larger header can be actually smaller.


enter image description here

enter image description here



For case 2 : Let's consider a case where user view this less frequently. For such case larger header should be kept as larger, it will function as a headline. enter image description here enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.