Swap from raw divs to semantic components

[JasonYao]

https://developer.mozilla.org/en-US/docs/Glossary/Semantics

[JasonYao]

Some thoughts:

• Search results might be better as figure, since they're self-contained, and articles are more for syndication
  • consider using either the title or summary for the figcaption
• main is a good wrapper for post content in general, though i'm wondering how this plays together with article- should it be:

  <main>
  <article>
      <!-- post content here -->
  </article>
  </main>

or

<article>
    <main>
        <!-- post content here -->
    </main>
</article>

I have a hunch it's the latter, since it's saying "in this self-contained article, here is the main section describing the content"

• Keywords should be <mark>ed, instead of just using my goto with bolding or italics
• sections should be autogenerated from the markdown file, but double check that this is the case
• When adding in sections of content providing more details, use summary and detail elements together
• Swap navbar from a div to nav
• dd and its children tags are kinda cool, looks like a way to have nice definitions
• abbr actually seems really useful, though i think loses its value with proper definitions with dd- maybe just use one or the other? since with both it seems a bit redundant. Or more broadly:
  • If i'd like definitions inline, use abbr
  • If i'd like definitions explicitly up front due to being directly relevant to what i'm talking about, use dd
• cite seems useful in general for day to day
• samp is useful when writing up what the output of an executed command looks like
• Swap all usages of divs or whatever that contain time to just use the time tag
• Swap images to either use srcset or picture tags

Side question

• Is there a markdown renderer that will generate semantic content? Or am I going to have to wire this up into using weird partials to generate the individual segments

[JasonYao]

Something to note is that confusingly, semantic web is actually different to web schemas that can help with search engine visibility/understanding, which comes from schema.org. In essence it looks like:

• Use proper semantic web notations for better accessibility
• Use schema.org notations with microdata for better SEO

And the goal is to now combine the two of them together.

I think i actually did the hard work before of figuring out what that would look like on the old site, so reference that in case it's already been done

[JasonYao]

Reference existing semantic html from old blog at https://github.com/JasonYao/deprecated-old-2017-site/blob/source/_includes/partials/post.html