“Keyword stuffing” might not be the only problem here, to me it looks more like a formatting issue than a markup issue as well. Following your example, is really hard to determine, if in fact there is a semantic content problem, but let’s assume there is.
For this case, Google is concern about the negative impact a piece of content has over the user experience, in terms of keywords use we don’t know how many is too many but you had really have to go to extremes to cause this penalty to kick in.
This guidelines show that the way these keywords appear and it’s context is important. You should not feel that the keyword you are trying to rank for is out of context in the main heading of your page.
Most people believe that HTML markup is not important because Google is supporting structured data. HTML elements serve a purpose, it might not be an strong ranking factor such as links, but each element conveys a purpose. There are rules or conventions for the use of <p>
and <div>
and their relative position, for example, you can not position the footer element in the head section of the document. In your case, we can technically approve the way the markup is being used, there is no problem to use a <h1>
inside a <div>
. A <div>
is considered to be a container element. However I will rather use <span>
inside <h1>
.
<h1 class="main heading">exclusive <span>ranking keyword</span> games</h1>
A side note: I always expect to see a p or paragraph element after a heading.
In terms of formatting, there are certain rules that suggest quality content, for example, the size of the text, the color contrast, and of course the style you apply appropriately to the HTML elements. Also the World Wide Web consortium maintains a standard that governs the aspects and content of web pages to be presentable and in a sequence order. This is another reason why I suggest using <span>
inside <h1>
. I have witnessed websites ranking for very competitive keywords using this approach.