Update Oxygen with HTML5 Semantic Tags

[amsgator]

Describe the feature you'd like to see included in Oxygen.

The HTML5 specification introduced semantic markup and calls for the use of <strong> and <em> tags rather than <b> and <i> tags. The default behavior of WordPress is to use <strong> and <em>, yet for some reason Oxygen is using <b> and <i>. This is inappropriate.

At minimum <strong> and <em> should be added to the toolbar as additional options, if not an actual replacement for <b> and <i>.

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong and also https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

What are the use cases for this feature?

Oxygen uses HTML5 and CSS3 in other locations, but for some odd reason it still relies on the deprecated use of <b> and <i>.

The <strong> and <em> tags provide semantic meaning and this becomes a factor when read by bots such as screen readers.

Examples of this feature or functionality.

WordPress itself is correctly using the HTML5 tags, as well as competitor builders like Divi. I actually switched to Oxygen from Divi and I must say I'm disappointed in its use of non-semantic tags.

[wplit]

On a same note, it wouldn't be a bad idea to add full html5 support for built in WP elements, or at least have an option built in. I currently do it manually with..

add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', ) );

Gives placeholders for the search form and generally more semantic markup for the other items.

[srikat]

If I am not mistaken, Oxygen did add support for HTML5 at least for search but then for some reason, it got removed with the latest release.

[louisreingold]

If I am not mistaken, Oxygen did add support for HTML5 at least for search but then for some reason, it got removed with the latest release.

Are you sure? If so, we definitely didn't mean to do that.

[srikat]

I will re-test and confirm shortly.

[srikat]

Just tested in Oxygen 2.4.1 and can confirm that search form does not appear in HTML5.

Before:

<form role="search" method="get" id="searchform" class="searchform" action="https://oxygen-fresh.test/">
    <div>
        <label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s">
        <input type="submit" id="searchsubmit" value="Search">
    </div>
</form>

After manually adding

add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );

here's the output:

<form role="search" method="get" class="search-form" action="https://oxygen-fresh.test/">
    <label>
        <span class="screen-reader-text">Search for:</span>
        <input type="search" class="search-field" placeholder="Search …" value="" name="s">
    </label>
    <input type="submit" class="search-submit" value="Search">
</form>

I have not tested these other elements: comment list, comment form, gallery and caption.

[srikat]

Related: https://wpdevdesign.com/how-to-add-support-for-html5-markup-in-oxygen/

[Martin-1]

I didn't even notice this. But I find it strange to not go full HTML 5 and only partially.

Especially considering it is not something new anymore:

2008	WHATWG HTML5 First Public Draft
2012	WHATWG HTML5 Living Standard
2014	W3C Recommendation: HTML5
2016	W3C Candidate Recommendation: HTML 5.1
2017	W3C Recommendation: HTML5.1 2nd Edition
2017	W3C Recommendation: HTML5.2

[wpsumo]

Would be good to be able to add table markup as well. To create the table with columns but change form divs to table, tbody, tr and th.

[numanzahid]

+1 we really need list and table tags.

[zahidlabs]

Please add list and table tags in available html tags.

[wpsumo]

Yes, please add more html5 element in the panel. Require some small logic for :not slectors once styling with e.g table elment. But it's a must please give us more native html5 tags in the builder UI. @Spellhammer

[lucianahanan]

+1

[wpsumo]

+1