Ajuda com marcação correta

A idéia é manipular os spans através do js para quando o usuário clicar no botão “rodar novamente” ele randomize itens dentro de arrays.

Está certa a marcação? Existe algum modo mais simples de fazer? Estou fazendo muita gambiarra?

<!DOCTYPE html>
<html>
<head>
<title>DNDPG</title>
<link rel="stylesheet" href="reset.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilo.css">
</head>
<body>

<h1>Meu personagem de rpg vai ser um...</h1>
<p><span id="raca">raça</span> <span id="classe">classe</span> que <span id="objetivo">objetivo</span>.</p>
<p>Eu <span id="adjetivo">adjetivo</span>, e <span id="traco">traco</span>, acredito que <span id="ideal">ideal</span>, mas <span id="defeito">defeito</span></p>

<button type="button">Rodar Novamente!</button>

<script src ="algoritimo.js"></script>

</body>
</html>