niw2cp

The HTML5 Semantic Elements plugin introduces two custom Gutenberg blocks — Article and Aside — that allow you to structure your WordPress content with proper semantic HTML5 elements.
Use the Article block for self-contained content such as blog posts or news items, and the Aside block for related or supplementary information such as sidebars, pull quotes, or callouts.
These semantic elements improve both SEO and accessibility by clearly defining the roles of different content sections.
<h3>How to Use</h3>
<h3>Adding Blocks</h3>
<ol>
<li>Edit any post or page in the block editor</li>
<li>Click the “+” button to add a new block</li>
<li>Search for “Article” or “Aside”</li>
<li>Click the desired block to insert it into your content</li>
</ol>
<h3>Article Block</h3>
The Article block creates an HTML5 <code><article></code> element, ideal for: 
– Blog posts 
– News articles 
– Forum posts 
– Comments 
– Independent, self-contained content
Features 
– Nest any blocks inside (headings, paragraphs, images, etc.) 
– Wide and Full alignment support 
– Custom CSS classes 
– Anchor ID support 
– “Remove Article” button to unwrap the block while keeping its inner content
Removing the Article wrapper 
– Toolbar: Select the Article block → click the “Remove Article” (X) button 
– Menu: Use the three-dot menu → “Ungroup”
<h3>Aside Block</h3>
The Aside block creates an HTML5 <code><aside></code> element, perfect for: 
– Sidebars 
– Pull quotes 
– Related content 
– Callout boxes 
– Supplementary information
Features 
– Add any blocks inside 
– Left, Right, Wide, and Full alignment options 
– Default styling with background color and left border 
– Custom CSS classes 
– Anchor ID support 
– Transform paragraphs, headings, lists, or quotes into Asides 
– “Remove Aside” button to unwrap the content
Transforming existing blocks 
1. Select an existing block (paragraph, heading, list, quote, pullquote, or group) 
2. Click the block icon or three-dot menu 
3. Choose “Transform to” → “Aside”
Removing the Aside wrapper 
– Toolbar: Select the Aside block → click the “Remove Aside” (X) button 
– Transform: Convert to “Group” 
– Menu: Use the three-dot menu → “Ungroup”
<h3>Styling</h3>
Both blocks include basic styling. To customize:
<ol>
<li>Add a custom CSS class in the Advanced panel of the block settings.</li>
<li>Add your own CSS under Appearance → Customize → Additional CSS.</li>
</ol>
Example CSS:
<pre><code>`css
</code></pre>
/* Custom Article styling */ 
.wp-block-html5-semantic-article { 
 padding: 2em; 
 background: #ffffff; 
 box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}
/* Custom Aside styling */ 
.wp-block-html5-semantic-aside { 
 background-color: #fffbea; 
 border-left: 4px solid #f59e0b; 
 padding: 2em; 
}
<h3>Block Settings</h3>
Block Tab: Alignment options
Advanced Tab: Add custom CSS classes, anchor IDs
<h3>Tips</h3>
Nest Blocks: Combine headings, text, and media inside semantic containers
SEO Benefits: Helps search engines interpret your content hierarchy
Accessibility: Improves screen reader navigation and content structure
<h3>License</h3>
This plugin is licensed under the GPL v2 or later.

HTML5 Semantic Elements

Adds HTML5 and semantic elements as blocks in the Gutenberg editor.

preeve9534

Aside widget allows a page or post to insert arbitrary content into a 
sidebar (or other dynamic widget area), supporting something similar to the 
typographic notion of a ‘pull-quote’.
Aside widget is triggered by the presence, in those pages which require it, 
of one or more ‘aside’ custom fields with values that specify the content 
of one or more widgets. Shifting the locus of widget content control from 
the widget to the page makes for more natural authoring of conditional 
content which needs to be associated with just a small number of pages.
As well as text, an ‘aside’ custom field may contain HTML and/or PHP code. 
Of course, any HTML should be crafted so as not to break the containing 
page structure. PHP parsing must be explicitly enabled in the widget 
administration panel and any PHP in the ‘aside’ field value must be enclosed 
in the usual tags for it to be recognised.
A little bit of short-form magic can be triggered by formatting the aside 
field value in the following way.
<pre><code>{#|!|!!}id[,prefix,suffix]
</code></pre>
A value of the form #id (e.g. ‘#232’) causes the the page or post 
identified by the integer id to be used as the widget content.
A value of the form !id (e.g. ‘!myasidediv’) causes the contents of the 
HTML DIV identified by id to be used as the widget content. The selected 
DIV must reside withing the current page or post. Normally, the selected 
DIV is removed from display within the page proper, but a value of the form 
!!id causes the DIV to remain in the normal page flow. Processing of page 
content for the identified DIV is unsophisticated: the DIV must not itself 
contain any other DIVs and the DIV id attribute must be the first attribute 
after the tag name.
Prefix and suffix can be used to specify arbitrary text/HTML which will 
be used to bracket the selected widget content. PHP can also be used, but 
will only work if parsing is enabled as described above.
<h3>Examples</h3>
A few examples of the use of magic values in the ‘aside’ field.
<pre><code>#232 
</code></pre>
Display page 232 in the aside widget.
<pre><code>!mydiv 
</code></pre>
Remove the contents of <code><div id='mydiv'>...</div></code> from the current 
page and display it in the aside widget.
<pre><code>!!mydiv 
</code></pre>
As above, but leave the content in the page.
<pre><code>!!mydiv,, 
</code></pre>
As above, but style the widget output in some special way.

Aside Widget

Display arbitrary sidebar content conditional upon a particular post or page.

HTML5 Semantic Elements vs Aside Widget