HTML tags aren't entirely semantic

[borisnezlobin]

Did you clear cache before opening an issue?

• [X] I have cleared my cache

Is there an existing issue for this?

• [X] I have searched the existing issues

Does the issue happen when logged in?

Yes

Does the issue happen when logged out?

Yes

Does the issue happen in incognito mode when logged in?

Yes

Does the issue happen in incognito mode when logged out?

Yes

Account name

randomletters

Account config

No response

Current Behavior

The HTML tags throughout the frontend are lacking in semantic structure (i.e., h1 for titles, h2 for subtitles, ul/ol for lists, etc)

Expected Behavior

Currently, the layout looks something like:

 <div class="section">
    <div class="bigtitle">about</div>
    <h2>
      Monkeytype is a minimalistic and customizable typing test. It features
      many test modes, an account system to save your typing speed history, and
      user-configurable features such as themes, sounds, a smooth caret, and
      more. Monkeytype attempts to emulate the experience of natural keyboard
      typing during a typing test, by unobtrusively presenting the text prompts
      and displaying typed characters in-place, providing straightforward,
      real-time feedback on typos, speed, and accuracy.
      <br />
      <br />
      Test yourself in various modes, track your progress and improve your
      speed.
    </h2>
  </div>

Using semantics, it would look like:

  <section class="section">
    <h1 class="bigtitle">about</h1>
    <p>
      Monkeytype is a minimalistic and customizable typing test. It features
      many test modes, an account system to save your typing speed history, and
      user-configurable features such as themes, sounds, a smooth caret, and
      more. Monkeytype attempts to emulate the experience of natural keyboard
      typing during a typing test, by unobtrusively presenting the text prompts
      and displaying typed characters in-place, providing straightforward,
      real-time feedback on typos, speed, and accuracy.
      <br />
      <br />
      Test yourself in various modes, track your progress and improve your
      speed.
    </p>
  </section>

This would improve SEO and make things more clear for developers

Steps To Reproduce

Go to any .html file in the frontend

Environment

• OS: all
• Browser: all
• Browser Version: all

Anything else?

https://www.w3schools.com/html/html5_semantic_elements.asp

Can I work on this? It's rather tedious, but worth doing

[Miodec]

Known issue. Ive been slowly converting everything recently.

[borisnezlobin]

if you want, I could help you out

should I close this (github) issue?

[Miodec]

You could if you wanted to, all though i wouldnt modify the header tags due to the way the website is structured (and the fact that Im not using SSR)

[borisnezlobin]

What do you mean? I can get sample pr done today (like modifying just the About page for example), and you can take a look? I'm a bit confused with what header tags you are talking about

[Miodec]

I mean H1, H2 and so on.

[borisnezlobin]

Ok, I'll leave them untouched and just work on the other parts

[sidharth-23]

hello i would like to contribute? Can someone walk me through??

[borisnezlobin]

I've somewhat paused working on this because I couldn't find that many egregious errors. I'll push all my changes to this branch, but basically what this pr does is replace things like <div class="title"> with the semantically correct html tags (in the example, <h1> or <h2>). If you want the PR, take it!

https://github.com/monkeytypegame/monkeytype/pull/4859

[Anm4219b]

solution `

about

Monkeytype is a minimalistic and customizable typing test. It features many test modes, an account system to save your typing speed history, and user-configurable features such as themes, sounds, a smooth caret, and more. Monkeytype attempts to emulate the experience of natural keyboard typing during a typing test, by unobtrusively presenting the text prompts and displaying typed characters in-place, providing straightforward, real-time feedback on typos, speed, and accuracy.

Test yourself in various modes, track your progress and improve your speed.

' @borisnezlobin

[Anm4219b]

<article>
    <h1>about</h1>
  Monkeytype is a minimalistic and customizable typing test. It features
  many test modes, an account system to save your typing speed history, and
  user-configurable features such as themes, sounds, a smooth caret, and
  more. Monkeytype attempts to emulate the experience of natural keyboard
  typing during a typing test, by unobtrusively presenting the text prompts
  and displaying typed characters in-place, providing straightforward,
  real-time feedback on typos, speed, and accuracy.
  <br >
 <br>
  Test yourself in various modes, track your progress and improve your
  speed.
</article>

code

[borisnezlobin]

yeah basically like that, but everywhere I've done a few pages already in the PR I linked if you want to work off that or you can just make a new pr and start from scratch

[plbstl]

Hey I can work on this

[borisnezlobin]

Go ahead!