<div data-player-id="typy123" data-level="expert" data-score="9999">
    <h2>Player Profile</h2>
    <p>Welcome back, <span data-field="name">Typy</span>!</p>
    <button data-action="level-up" data-target="player-level">Level Up!</button>
    <div data-tooltip="Click to see your achievements" data-position="top">
        <img src="badge.png" alt="Achievement Badge" data-achievement-id="html-master">
    </div>
</div>
<script>
    // Access custom data
    const player = document.querySelector('[data-player-id]');
    console.log('Player ID:', player.dataset.playerId);
    console.log('Level:', player.dataset.level);
    console.log('Score:', player.dataset.score);
</script>