Why does this HTML/CSS work, and is it safe to continue in this vein? [duplicate]

This question already has an answer here:

• Why does CSS work with fake elements? 18 answers

Just as a quick-and-dirty proof-of-concept, I threw together some HTML/CSS like so:

HTML

<huck>This is Huck speaking</huck>
<jim>This is Jim speaking</jim>
<pap>This is Pappy Finn speaking</pap>
<duke>This is the Duke speaking</duke>
<dauphin>This is the Dauphin speaking</dauphin>
<tom>This is Tom Sawyer speaking</tom>
<widow>This is Widow Douglas speaking</widow>
<watson>This is Miss Watson speaking</watson>
<sally>This is Sally Phelps speaking</sally>

CSS

huck {
    color: skyblue;
}
jim {
    color: yellow;
}
pap {
    color: brown;
}
duke {
    color: lime;
}
dauphin {
    color: orange;
}
tom {
    color: chocolate;
}
widow {
    color: crimson;
}
watson {
    color: violet;
}
sally {
    color: pink;
}

...and it works as I intended (Huck's speech is sky blue, etc.), as you can see here

But is this an accident waiting to happen? Since "huck" etc. are not official HTML tags, should it be refactored, or is this really acceptable HTML/CSS practice?