Title: HOW TO : HTML5 Block Elements
Last modified: August 30, 2016

---

# HOW TO : HTML5 Block Elements

 *  [Bryan Willis](https://wordpress.org/support/users/codecandid/)
 * (@codecandid)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/how-to-html5-block-elements/)
 * I’m so happy to see a new version of this plugin. I spent weeks trying to fix
   the old one after it stopped working after Tinymce 4 was added to wordpress, 
   but eventually gave up out of frustration.
 * This isn’t an issue, but more a “HOW TO”.
 * The plugin mentions that html5 markup is allowed, but currently there are no 
   plugins out there to enable this feature through the visual editor so you’re 
   stuck to adding the html5 elements like <section> through the html editor. Unfortunately
   there’s not much documentation out there on this.
 * Anyway, for those of you searching for how to add <a href=”[http://www.tinymce.com/tryit/html5_formats.php](http://www.tinymce.com/tryit/html5_formats.php)
   
   [http://www.tinymce.com/tryit/html5_formats.php”>tinymce](http://www.tinymce.com/tryit/html5_formats.php”>tinymce)
   HTML5 style formats to the visual editor here’s how:
 * Add the following to your functions.php or as a mu-plugin:
 *     ```
       function mce_html5_formatting( $init ) {
           $init['block_formats'] = 'Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;';
   
           $style_formats = array(
               array(
                   'title' => 'Headers',
                       'items' => array(
                       array(
                           'title' => 'Header 1',
                           'block' => 'h1'
                       ),
                       array(
                           'title' => 'Header 2',
                           'block' => 'h2'
                       ),
       		array(
                           'title' => 'Header 3',
                           'block' => 'h3'
                       ),
       		array(
                           'title' => 'Header 4',
                           'block' => 'h4'
                       ),
       		array(
                           'title' => 'Header 5',
                           'block' => 'h5'
                       ),
       		array(
                           'title' => 'Header 6',
                           'block' => 'h6'
                       )
                   )
               ),
               array(
                   'title' => 'Blocks',
                       'items' => array(
                       array(
                           'title' => 'Paragraph <p>',
                           'block' => 'p'
                       ),
                       array(
                           'title' => 'Arbitrary Division <div>',
                           'block' => 'div'
                       ),
       		array(
                           'title' => 'Preformatted Text <pre>',
                           'block' => 'pre'
                       )
                   )
               ),
               array(
                   'title' => 'Containers',
                       'items' => array(
                       array(
                           'title' => 'Section',
                           'block' => 'section',
       		    'wrapper' => 'true',
                            'merge_siblings' => 'false'
                       ),
                       array(
                           'title' => 'Blockquote',
                           'block' => 'blockquote',
       		    'wrapper' => 'true',
       		    'icon' => 'blockquote'
                       ),
                       array(
                           'title' => 'Figure',
                           'block' => 'figure',
       		    'wrapper' => 'true'
                       )
                   )
               )
           );
   
           $init['style_formats'] = json_encode( $style_formats );
   
           $init['style_formats_merge'] = false;
           return $init;
       }
       add_filter('tiny_mce_before_init', 'mce_html5_formatting');
   
       function mce_add_buttons_styleselect( $buttons ){
           array_splice( $buttons, 1, 0, 'styleselect' );
           return $buttons;
       }
       add_filter( 'mce_buttons_2', 'mce_add_buttons_styleselect' );
       ```
   
 * Note the only actual html5 specific element I added in this example is `<section
   >` and `<figure>`. There are plenty others you could add though. In the [example on tinymce’s website](http://www.tinymce.com/tryit/html5_formats.php)
   they included hgroup. This is no longer supported by HTML5 though, so you probably
   don’t want to add that one.
 * Hope this helps some of you.
 * [https://wordpress.org/plugins/preserved-html-editor-markup-plus/](https://wordpress.org/plugins/preserved-html-editor-markup-plus/)

The topic ‘HOW TO : HTML5 Block Elements’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/preserved-html-editor-markup-plus.
   svg)
 * [Preserved HTML Editor Markup Plus](https://wordpress.org/plugins/preserved-html-editor-markup-plus/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/preserved-html-editor-markup-plus/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/preserved-html-editor-markup-plus/)
 * [Active Topics](https://wordpress.org/support/plugin/preserved-html-editor-markup-plus/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/preserved-html-editor-markup-plus/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/preserved-html-editor-markup-plus/reviews/)

## Tags

 * [editor](https://wordpress.org/support/topic-tag/editor/)
 * [html5](https://wordpress.org/support/topic-tag/html5/)
 * [tinymce](https://wordpress.org/support/topic-tag/tinymce/)

 * 0 replies
 * 1 participant
 * Last reply from: [Bryan Willis](https://wordpress.org/support/users/codecandid/)
 * Last activity: [10 years, 10 months ago](https://wordpress.org/support/topic/how-to-html5-block-elements/)
 * Status: not resolved