{"id":258572,"date":"2025-10-30T05:11:27","date_gmt":"2025-10-30T05:11:27","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/html5-semantic-elements\/"},"modified":"2025-10-30T05:10:56","modified_gmt":"2025-10-30T05:10:56","slug":"html5-semantic-elements","status":"publish","type":"plugin","link":"https:\/\/cs.wordpress.org\/plugins\/html5-semantic-elements\/","author":8253807,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.2","stable_tag":"1.0.2","tested":"6.8.5","requires":"5.8","requires_php":"7.4","requires_plugins":null,"header_name":"HTML5 Semantic Elements","header_author":"Nic Ward","header_description":"Adds Article and Aside blocks for HTML5 semantic elements in the WordPress block editor","assets_banners_color":"edede6","last_updated":"2025-10-30 05:10:56","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/wordpress.org\/plugins\/html5-semantic-elements","header_author_uri":"http:\/\/2cp.net","rating":0,"author_block_rating":0,"active_installs":0,"downloads":170,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.2":{"tag":"1.0.2","author":"niw2cp","date":"2025-10-30 05:10:56"}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-256x256.png":{"filename":"icon-256x256.png","revision":3386806,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3386806,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3386806,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":{"html5-semantic\/article":{"name":"html5-semantic\/article","title":"Article"},"html5-semantic\/aside":{"name":"html5-semantic\/aside","title":"Aside"}},"tagged_versions":["1.0.2"],"block_files":[],"assets_screenshots":{"screenshot-1.jpg":{"filename":"screenshot-1.jpg","revision":3386806,"resolution":"1","location":"assets","locale":""},"screenshot-2.jpg":{"filename":"screenshot-2.jpg","revision":3386806,"resolution":"2","location":"assets","locale":""},"screenshot-3.jpg":{"filename":"screenshot-3.jpg","revision":3386806,"resolution":"3","location":"assets","locale":""},"screenshot-4.jpg":{"filename":"screenshot-4.jpg","revision":3386806,"resolution":"4","location":"assets","locale":""}},"screenshots":[],"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[1392,8655,1220,203,1651],"plugin_category":[],"plugin_contributors":[249948],"plugin_business_model":[],"class_list":["post-258572","plugin","type-plugin","status-publish","hentry","plugin_tags-article","plugin_tags-aside","plugin_tags-block","plugin_tags-html5","plugin_tags-semantic","plugin_contributors-niw2cp","plugin_committers-niw2cp"],"banners":{"banner":"https:\/\/ps.w.org\/html5-semantic-elements\/assets\/banner-772x250.png?rev=3386806","banner_2x":"https:\/\/ps.w.org\/html5-semantic-elements\/assets\/banner-1544x500.png?rev=3386806","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/html5-semantic-elements\/assets\/icon-256x256.png?rev=3386806","icon_2x":"https:\/\/ps.w.org\/html5-semantic-elements\/assets\/icon-256x256.png?rev=3386806","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/html5-semantic-elements\/assets\/screenshot-1.jpg?rev=3386806","caption":""},{"src":"https:\/\/ps.w.org\/html5-semantic-elements\/assets\/screenshot-2.jpg?rev=3386806","caption":""},{"src":"https:\/\/ps.w.org\/html5-semantic-elements\/assets\/screenshot-3.jpg?rev=3386806","caption":""},{"src":"https:\/\/ps.w.org\/html5-semantic-elements\/assets\/screenshot-4.jpg?rev=3386806","caption":""}],"raw_content":"<!--section=description-->\n<p>The <strong>HTML5 Semantic Elements<\/strong> plugin introduces two custom Gutenberg blocks \u2014 <em>Article<\/em> and <em>Aside<\/em> \u2014 that allow you to structure your WordPress content with proper semantic HTML5 elements.<\/p>\n\n<p>Use the <strong>Article block<\/strong> for self-contained content such as blog posts or news items, and the <strong>Aside block<\/strong> for related or supplementary information such as sidebars, pull quotes, or callouts.<\/p>\n\n<p>These semantic elements improve both <strong>SEO<\/strong> and <strong>accessibility<\/strong> by clearly defining the roles of different content sections.<\/p>\n\n<h3>How to Use<\/h3>\n\n<h3>Adding Blocks<\/h3>\n\n<ol>\n<li>Edit any post or page in the block editor<\/li>\n<li>Click the \u201c+\u201d button to add a new block<\/li>\n<li>Search for \u201cArticle\u201d or \u201cAside\u201d<\/li>\n<li>Click the desired block to insert it into your content<\/li>\n<\/ol>\n\n<h3>Article Block<\/h3>\n\n<p>The Article block creates an HTML5 <code>&lt;article&gt;<\/code> element, ideal for:\n- Blog posts\n- News articles\n- Forum posts\n- Comments\n- Independent, self-contained content<\/p>\n\n<p><strong>Features<\/strong>\n- Nest any blocks inside (headings, paragraphs, images, etc.)\n- Wide and Full alignment support\n- Custom CSS classes\n- Anchor ID support\n- \u201cRemove Article\u201d button to unwrap the block while keeping its inner content<\/p>\n\n<p><strong>Removing the Article wrapper<\/strong>\n- <strong>Toolbar<\/strong>: Select the Article block \u2192 click the \u201cRemove Article\u201d (X) button\n- <strong>Menu<\/strong>: Use the three-dot menu \u2192 \u201cUngroup\u201d<\/p>\n\n<h3>Aside Block<\/h3>\n\n<p>The Aside block creates an HTML5 <code>&lt;aside&gt;<\/code> element, perfect for:\n- Sidebars\n- Pull quotes\n- Related content\n- Callout boxes\n- Supplementary information<\/p>\n\n<p><strong>Features<\/strong>\n- Add any blocks inside\n- Left, Right, Wide, and Full alignment options\n- Default styling with background color and left border\n- Custom CSS classes\n- Anchor ID support\n- Transform paragraphs, headings, lists, or quotes into Asides\n- \u201cRemove Aside\u201d button to unwrap the content<\/p>\n\n<p><strong>Transforming existing blocks<\/strong>\n1. Select an existing block (paragraph, heading, list, quote, pullquote, or group)\n2. Click the block icon or three-dot menu\n3. Choose \u201cTransform to\u201d \u2192 \u201cAside\u201d<\/p>\n\n<p><strong>Removing the Aside wrapper<\/strong>\n- <strong>Toolbar<\/strong>: Select the Aside block \u2192 click the \u201cRemove Aside\u201d (X) button\n- <strong>Transform<\/strong>: Convert to \u201cGroup\u201d\n- <strong>Menu<\/strong>: Use the three-dot menu \u2192 \u201cUngroup\u201d<\/p>\n\n<h3>Styling<\/h3>\n\n<p>Both blocks include basic styling. To customize:<\/p>\n\n<ol>\n<li>Add a custom CSS class in the <strong>Advanced<\/strong> panel of the block settings.<\/li>\n<li>Add your own CSS under <strong>Appearance \u2192 Customize \u2192 Additional CSS<\/strong>.<\/li>\n<\/ol>\n\n<p>Example CSS:<\/p>\n\n<pre><code>`css\n<\/code><\/pre>\n\n<p>\/* Custom Article styling *\/\n.wp-block-html5-semantic-article {\n    padding: 2em;\n    background: #ffffff;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}<\/p>\n\n<p>\/* Custom Aside styling *\/\n.wp-block-html5-semantic-aside {\n    background-color: #fffbea;\n    border-left: 4px solid #f59e0b;\n    padding: 2em;\n}<\/p>\n\n<h3>Block Settings<\/h3>\n\n<p>Block Tab: Alignment options<\/p>\n\n<p>Advanced Tab: Add custom CSS classes, anchor IDs<\/p>\n\n<h3>Tips<\/h3>\n\n<p>Nest Blocks: Combine headings, text, and media inside semantic containers<\/p>\n\n<p>SEO Benefits: Helps search engines interpret your content hierarchy<\/p>\n\n<p>Accessibility: Improves screen reader navigation and content structure<\/p>\n\n<h3>License<\/h3>\n\n<p>This plugin is licensed under the GPL v2 or later.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the <code>html5-semantic-elements<\/code> folder to <code>\/wp-content\/plugins\/<\/code><\/li>\n<li>Activate the plugin through the \u2018Plugins\u2019 menu in WordPress<\/li>\n<li>Start using the <strong>Article<\/strong> and <strong>Aside<\/strong> blocks in your posts and pages<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id='will%20this%20plugin%20work%20with%20classic%20editor%3F'><h3>Will this plugin work with classic editor?<\/h3><\/dt>\n<dd><p>No. It only works with the block editor (Gutenberg).<\/p><\/dd>\n<dt id='can%20i%20use%20it%20with%20page%20builders%3F'><h3>Can I use it with page builders?<\/h3><\/dt>\n<dd><p>It\u2019s designed for the WordPress block editor, not for third-party builders.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.2<\/h4>\n\n<p>Initial release \u2014 adds Article and Aside semantic HTML5 blocks.<\/p>","raw_excerpt":"Adds HTML5 and semantic elements as blocks in the Gutenberg editor.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cs.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/258572","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cs.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/cs.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/cs.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=258572"}],"author":[{"embeddable":true,"href":"https:\/\/cs.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/niw2cp"}],"wp:attachment":[{"href":"https:\/\/cs.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=258572"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/cs.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=258572"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/cs.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=258572"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/cs.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=258572"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/cs.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=258572"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/cs.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=258572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}