Add headings (h1, h2, h3 and other semantic headers)

[giggio]

Problem or enhancement idea

Right now the theme does not have semantic headers. It would be a good idea to add them to menus, articles etc. This will help blind people and on SEO.

Proposed solution

Update the theme to add semantic headers.

Alternatives

Not really any available.

Additional context

I'd also review the rest of the theme for semantic elements. There is a nav and other elements, but an overall check would be useful.

[markdumay]

Thanks for the suggestion @giggio. It's worth looking into. I made a list of things to check/revise, feel free to extend the list.

• Page header (single pages)
  

  hinode/layouts/header.html

  Line 24 in 0a6dbcc

  {{ with $title }}<p class="display-4 mt-5">{{ . }}</p>{{ end }}

  
  Consider enclosing the entire page header with <header>...</header>
• Section titles (as part of a bookshop component)
  

  hinode/layouts/_partials/assets/section-title.html

  Lines 38 to 53 in 0a6dbcc

  	{{ define "_partials/assets/section-title-header.html" }}
  	{{ $headingStyle := .headingStyle }}
  	{{ if (index . "use-title") }}
  	{{ $title := .title | page.RenderString }}
  	{{ $label := trim (replaceRE "\r\n?|\n" " " ($title | plainify)) " " }}
  	<h1 id="{{ anchorize .title }}" {{ if ne $title $label }}aria-label="{{ $label }}"{{ end -}}
  	class="{{ $headingStyle }}-{{ .size }}{{ with .color }} text-{{ . }}{{ end }} pt-1">
  	{{ .title | page.RenderString | safeHTML }}
  	</h1>
  	{{ else }}
  	<div id="{{ anchorize .title }}" class="{{ $headingStyle }}-{{ .size }}{{ with .color }} text-{{ . }}{{ end }} pt-1">
  	{{ .title | page.RenderString | safeHTML }}
  	</div>
  	{{ end }}
  	{{ end }}

• Nav items (replace ul/li with nav/a, see Bootstrap example
  

  hinode/layouts/_partials/assets/nav.html

  Lines 70 to 101 in 0a6dbcc

  	<div class="{{ if $args.responsive }}d-none d-{{ $breakpoint.current }}-block{{ end }}">
  	<ul
  	class="nav nav-panel{{ with $type }} nav-{{ . }}{{ end -}}{{ with $args.class }} {{ . }}{{ end }}{{ if $args.vertical }} flex-column{{ end }} tabs-dropdown"
  	id="nav-{{ $id }}"
  	role="tablist"
  	{{ if $args.vertical }}aria-orientation="vertical"{{ end }}
  	data-companion="dropdown-{{ $id }}"
  	>
  	{{- $titles := slice -}}
  	{{- range $args.list }}{{ $titles = $titles | append .Title }} {{ end -}}
  	{{- if reflect.IsSlice $args.navTitles }}{{ $titles = $titles | append $args.navTitles }}{{ end -}}
  	{{- range $index, $item := $titles -}}
  	{{ $itemID := printf "%s-btn-%d" $args.id $index -}}
  	{{- $show := eq $index 0 -}}
  	{{- if $args.navShow }}{{ $show = eq $args.navShow $itemID }}{{ end -}}
  	{{- $disabled := in $args.navDisabled $itemID -}}
  	<li class="nav-item" role="presentation">
  	<button
  	class="nav-link{{ if not $wrap }} text-nowrap{{ end }}{{ if $show }} active{{ end }}{{ if $disabled }} disabled{{ end }}"
  	id="{{ $itemID }}"
  	data-bs-toggle="pill"
  	data-bs-target="#{{ $id }}-{{ $index }}"
  	type="button"
  	role="tab"
  	aria-controls="{{ $id }}-{{ $index }}"
  	aria-selected="{{ if eq $index 0 }}true{{ else }}false{{ end }}"
  	>
  	{{ $item }}
  	</button>
  	</li>
  	{{ end -}}
  	</ul>

• Card title
  

  hinode/layouts/_partials/assets/card.html

  Lines 17 to 31 in 0a6dbcc

  	{{- if $href -}}
  	<a href="{{ $href }}" class="{{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }} stretched-link">
  	<p class="card-title fs-lg-5 fs-6">{{ $title }}</p>
  	{{ with $description }}
  	<div class="card-text {{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }}">
  	{{ . | safeHTML }}
  	</div>
  	{{ end -}}
  	</a>
  	{{- else -}}
  	<div>
  	{{ with $title }}<p class="card-title fs-lg-5 fs-6">{{ . }}</p>{{ end -}}
  	{{ with $description }}<div class="card-text">{{ . | safeHTML }}</div>{{ end -}}
  	</div>
  	{{- end -}}

[LeonarddeR]

I'd really like these improvements. I also found that the title of the table of contents is in a strong tag but has the h6 class. Making this a real h6 makes sense so people can easily jump to the heading.