Which of these two markups do you prefer working with?

semantic.html

<!-- A - semantic via class names -->
<div class="event">
    <div class="label">
        <i class="circular pencil icon"></i>
    </div>
    <div class="content">
        <div class="date">
            3 days ago
        </div>
        <div class="summary">
            You submitted a new post to the page
        </div>
        <div class="extra text">
            I am a dog and I do not know how to make a post
        </div>
    </div>
</div>

<!-- B - semantic via element/types -->
<event>
    
    <label>
        <icon class="circular pencil icon"></icon>
    </label>

    <content>
        
        <date>
            3 days ago
        </date>

        <summary>
            You submitted a new post to the page
        </summary>
        
        <extra-text>
            I am a dog and I do not know how to make a post
        </extra-text>
        
    </content>

</event>