Improve semantic HTML tag usage on content pages

This commit is contained in:
2025-08-24 03:52:23 -05:00
parent 267652a7e4
commit 20f22b7926
4 changed files with 72 additions and 70 deletions

View File

@@ -1,5 +1,5 @@
{{ if or .Date .Params.authors .Site.Params.readingtime .Site.Params.gitFileURL }} {{ if or .Date .Params.authors .Site.Params.readingtime .Site.Params.gitFileURL }}
<div class="page-metadata" aria-label="{{ i18n "aria_post_metadata" }}"> <section class="page-metadata" aria-label="{{ i18n "aria_post_metadata" }}">
{{ if .Date }} {{ if .Date }}
<span class="page-metadata-item" aria-label="{{ i18n "aria_post_meta_date" }}"> <span class="page-metadata-item" aria-label="{{ i18n "aria_post_meta_date" }}">
{{ partial "icon.html" "calendar" }} {{ partial "icon.html" "calendar" }}
@@ -26,5 +26,5 @@
{{ partial "page-metadata/item/categories.html" . }} {{ partial "page-metadata/item/categories.html" . }}
{{ partial "page-metadata/item/tags.html" . }} {{ partial "page-metadata/item/tags.html" . }}
</div> </section>
{{ end }} {{ end }}

View File

@@ -1,5 +1,5 @@
{{ if or .Date .Params.authors .Site.Params.readingtime }} {{ if or .Date .Params.authors .Site.Params.readingtime }}
<div class="page-metadata" aria-label="{{ i18n "aria_post_metadata" }}"> <section class="page-metadata" aria-label="{{ i18n "aria_post_metadata" }}">
{{ if .Date }} {{ if .Date }}
<span class="page-metadata-item" aria-label="date"> <span class="page-metadata-item" aria-label="date">
{{ partial "icon.html" "calendar" }} {{ partial "icon.html" "calendar" }}
@@ -14,5 +14,5 @@
{{ partial "page-metadata/item/series.html" . }} {{ partial "page-metadata/item/series.html" . }}
{{ partial "page-metadata/item/categories.html" . }} {{ partial "page-metadata/item/categories.html" . }}
{{ partial "page-metadata/item/tags.html" . }} {{ partial "page-metadata/item/tags.html" . }}
</div> </section>
{{ end }} {{ end }}

View File

@@ -1,4 +1,4 @@
<div class="share-buttons"> <section class="share-buttons">
{{ if .Site.Params.shareButtons.twitter }} {{ if .Site.Params.shareButtons.twitter }}
<a class="twitter-share" <a class="twitter-share"
target="_blank" target="_blank"
@@ -66,4 +66,4 @@
{{- partial "icon.html" "printer" -}} {{- partial "icon.html" "printer" -}}
</a> </a>
{{ end }} {{ end }}
</div> </section>

View File

@@ -1,74 +1,76 @@
{{ define "main" }} {{ define "main" }}
<div class="page-title"> <article>
<h1> <div class="page-title">
{{ .Title | markdownify }} <h1>
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }} {{ .Title | markdownify }}
</h1> {{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
</div> </h1>
</div>
{{ partial "page-metadata/post-full.html" . }} {{ partial "page-metadata/post-full.html" . }}
{{ partial "series-box.html" . }} {{ partial "series-box.html" . }}
{{ if .Params.Toc }} {{ if .Params.Toc }}
<div class="table-of-contents" aria-label="{{ i18n "aria_table_of_contents" }}"> <section class="table-of-contents" aria-label="{{ i18n "aria_table_of_contents" }}">
<details> <details>
<summary>{{ i18n "table_of_contents" }}</summary> <summary>{{ i18n "table_of_contents" }}</summary>
{{ .TableOfContents }}
</details>
</section>
<div class="table-of-contents print">
{{ i18n "table_of_contents" }}
{{ .TableOfContents }} {{ .TableOfContents }}
</details> </div>
</div> {{ end }}
<div class="table-of-contents print">
{{ i18n "table_of_contents" }}
{{ .TableOfContents }}
</div>
{{ end }}
{{ partial "feature-figure.html" . }} {{ partial "feature-figure.html" . }}
<article class="post-content" data-pagefind-body> <div class="post-content" data-pagefind-body>
{{ .Content }} {{ .Content }}
</div>
{{ partial "series-box.html" . }}
{{ if or .NextInSection .PrevInSection }}
<nav class="prevnext">
{{ with .NextInSection }}
<a class="prev" href="{{ .Permalink }}">
<div class="prev-caption">
&larr; {{ i18n "newer_post" }}
</div>
<div class="prev-post">
{{ .Title | markdownify }}
</div>
</a>
{{ else }}
<div class="prev"></div>
{{ end }}
{{ with .PrevInSection }}
<a class="next" href="{{ .Permalink }}">
<div class="next-caption">
{{ i18n "older_post" }} &rarr;
</div>
<div class="next-post">
{{ .Title | markdownify }}
</div>
</a>
{{ else }}
<div class="next"></div>
{{ end }}
</nav>
{{ end }}
{{ if .Site.Params.shareButtons }}
{{ partial "share.html" . }}
{{ end }}
{{ if .Params.comments }}
<section class="comments">
{{ partial "comments.html" . }}
</section>
{{ end }}
</article> </article>
{{ partial "series-box.html" . }}
{{ if or .NextInSection .PrevInSection }}
<div class="prevnext">
{{ with .NextInSection }}
<a class="prev" href="{{ .Permalink }}">
<div class="prev-caption">
&larr; {{ i18n "newer_post" }}
</div>
<div class="prev-post">
{{ .Title | markdownify }}
</div>
</a>
{{ else }}
<div class="prev"></div>
{{ end }}
{{ with .PrevInSection }}
<a class="next" href="{{ .Permalink }}">
<div class="next-caption">
{{ i18n "older_post" }} &rarr;
</div>
<div class="next-post">
{{ .Title | markdownify }}
</div>
</a>
{{ else }}
<div class="next"></div>
{{ end }}
</div>
{{ end }}
{{ if .Site.Params.shareButtons }}
{{ partial "share.html" . }}
{{ end }}
{{ if .Params.comments }}
<div class="comments">
{{ partial "comments.html" . }}
</div>
{{ end }}
{{ end }} {{ end }}