Block widget has a wrong HTML markup

[ad_1]

Hi,

Your block widget does this wrong HTML markup:

<div class="widget popular-posts">
<h2>Widget title</h2>
<ul class="wpp-list">
<li> <a href="https://example.com" class="wpp-post-title" target="_self">Post title</a> <span class="wpp-meta post-stats"></span></li>
</ul>
</div>

The elements “h2” and “div” are not needed, because a block widget should have a flat structure:

<ul class="wpp-list">
<li> <a href="https://example.com/my-post" class="wpp-post-title" target="_self">Post title</a> <span class="wpp-meta post-stats"></span></li>
</ul>

The widget title and container are already included in the block element “widget group”.

A complete HTML markup of a block widget looks like this:

<aside id="block-3" class="widget inner-padding widget_block">
<h2 class="widget-title">Categories</h2>
<div class="wp-widget-group__inner-blocks">
<ul class="wp-block-categories-list wp-block-categories">
<li class="cat-item cat-item-7"><a href="https://example.com/category/abc/">Category title</a> (123)</li>
</ul>
</div>
</aside>

Currently your block widget on my website makes a double margin:
40px from “aside” element with the CSS class “widget” + 40px from the “div” element with the CSS class “widget”.

I can fix this via CSS, but a clean solution would please me more.

Thanks and greetings

Garrett

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer