HTML5 Semantic Elements

Àpèjúwe

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.

How to Use

Adding Blocks

1. Edit any post or page in the block editor
2. Click the “+” button to add a new block
3. Search for “Article” or “Aside”
4. Click the desired block to insert it into your content

Article Block

The Article block creates an HTML5 <article> element, ideal for:
Ìtumọ̀ Yorùbá: – Blog posts
Ìtumọ̀ Yorùbá: – News articles
Ìtumọ̀ Yorùbá: – Forum posts
Ìtumọ̀ Yorùbá: – Comments
Ìtumọ̀ Yorùbá: – Independent, self-contained content

Features
Ìtumọ̀ Yorùbá: – Nest any blocks inside (headings, paragraphs, images, etc.)
Ìtumọ̀ Yorùbá: – Wide and Full alignment support
Ìtumọ̀ Yorùbá: – Custom CSS classes
Ìtumọ̀ Yorùbá: – Anchor ID support
Ìtumọ̀ Yorùbá: – “Remove Article” button to unwrap the block while keeping its inner content

Removing the Article wrapper
Ìtumọ̀ Yorùbá: – Toolbar: Select the Article block → click the “Remove Article” (X) button
Ìtumọ̀ Yorùbá: – Menu: Use the three-dot menu → “Ungroup”

Aside Block

The Aside block creates an HTML5 <aside> element, perfect for:
Ìtumọ̀ Yorùbá: – Sidebars
Ìtumọ̀ Yorùbá: – Pull quotes
Ìtumọ̀ Yorùbá: – Related content
Ìtumọ̀ Yorùbá: – Callout boxes
Ìtumọ̀ Yorùbá: – Supplementary information

Features
Ìtumọ̀ Yorùbá: – Add any blocks inside
Ìtumọ̀ Yorùbá: – Left, Right, Wide, and Full alignment options
Ìtumọ̀ Yorùbá: – Default styling with background color and left border
Ìtumọ̀ Yorùbá: – Custom CSS classes
Ìtumọ̀ Yorùbá: – Anchor ID support
Ìtumọ̀ Yorùbá: – Transform paragraphs, headings, lists, or quotes into Asides
Ìtumọ̀ Yorùbá: – “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
Ìtumọ̀ Yorùbá: – Toolbar: Select the Aside block → click the “Remove Aside” (X) button
Ìtumọ̀ Yorùbá: – Transform: Convert to “Group”
Ìtumọ̀ Yorùbá: – Menu: Use the three-dot menu → “Ungroup”

Styling

Both blocks include basic styling. To customize:

1. Add a custom CSS class in the Advanced panel of the block settings.
2. Add your own CSS under Appearance → Customize → Additional CSS.

Example CSS:

`css

/* 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;
}

Block Settings

Block Tab: Alignment options

Advanced Tab: Add custom CSS classes, anchor IDs

Tips

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

License

This plugin is licensed under the GPL v2 or later.