diff --git a/lib/editor/atto/plugins/italic/tests/behat/italic.feature b/lib/editor/atto/plugins/italic/tests/behat/italic.feature
index 6449ef51f15..b62b3775de7 100644
--- a/lib/editor/atto/plugins/italic/tests/behat/italic.feature
+++ b/lib/editor/atto/plugins/italic/tests/behat/italic.feature
@@ -15,7 +15,7 @@ Feature: Atto italic button
     And I set the field "Text editor" to "Plain text area"
     And I press "Save changes"
     And I click on "Edit profile" "link" in the "region-main" "region"
-    Then I should see "<i>Tower of Pisa</i>"
+    Then I should see "<em>Tower of Pisa</em>"
 
   @javascript
   Scenario: Toggle italics in some text
@@ -31,5 +31,5 @@ Feature: Atto italic button
     And I set the field "Text editor" to "Plain text area"
     And I press "Save changes"
     And I click on "Edit profile" "link" in the "region-main" "region"
-    Then I should not see "<i>GHD - for hair</i>"
+    Then I should not see "<em>GHD - for hair</em>"
     And I should see "GHD - for hair"
diff --git a/lib/editor/atto/plugins/italic/yui/build/moodle-atto_italic-button/moodle-atto_italic-button-debug.js b/lib/editor/atto/plugins/italic/yui/build/moodle-atto_italic-button/moodle-atto_italic-button-debug.js
index dcba9e9652a..d316663dc8d 100644
--- a/lib/editor/atto/plugins/italic/yui/build/moodle-atto_italic-button/moodle-atto_italic-button-debug.js
+++ b/lib/editor/atto/plugins/italic/yui/build/moodle-atto_italic-button/moodle-atto_italic-button-debug.js
@@ -35,15 +35,36 @@ YUI.add('moodle-atto_italic-button', function (Y, NAME) {
 
 Y.namespace('M.atto_italic').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
     initializer: function() {
-        this.addBasicButton({
-            exec: 'italic',
+        var italic;
+
+        this.addButton({
+            callback: this._toggleItalic,
+            icon: 'e/italic',
+            buttonName: italic,
+            inlineFormat: true,
 
             // Key code for the keyboard shortcut which triggers this button:
             keys: '73',
 
             // Watch the following tags and add/remove highlighting as appropriate:
-            tags: 'i'
+            tags: 'em, i'
         });
+    },
+    /**
+     * Toggle the italic setting.
+     *
+     * @method _toggleItalic
+     * @param {EventFacade} e
+     */
+    _toggleItalic: function() {
+        var host = this.get('host');
+
+        // Use the "italic" command for simplicity. This will toggle <em> tags off as well.
+        document.execCommand('italic', false, null);
+
+        // Then change all <i> tags to <em> tags. This will change any existing <i> tags as well.
+        host.changeToCSS('i', 'bf-editor-italic-emphasis');
+        host.changeToTags('bf-editor-italic-emphasis', 'em');
     }
 });
 
diff --git a/lib/editor/atto/plugins/italic/yui/build/moodle-atto_italic-button/moodle-atto_italic-button-min.js b/lib/editor/atto/plugins/italic/yui/build/moodle-atto_italic-button/moodle-atto_italic-button-min.js
index 6a64c7040d0..52208d15595 100644
--- a/lib/editor/atto/plugins/italic/yui/build/moodle-atto_italic-button/moodle-atto_italic-button-min.js
+++ b/lib/editor/atto/plugins/italic/yui/build/moodle-atto_italic-button/moodle-atto_italic-button-min.js
@@ -1 +1 @@
-YUI.add("moodle-atto_italic-button",function(e,t){e.namespace("M.atto_italic").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){this.addBasicButton({exec:"italic",keys:"73",tags:"i"})}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});
+YUI.add("moodle-atto_italic-button",function(e,t){e.namespace("M.atto_italic").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){var e;this.addButton({callback:this._toggleItalic,icon:"e/italic",buttonName:e,inlineFormat:!0,keys:"73",tags:"em, i"})},_toggleItalic:function(){var e=this.get("host");document.execCommand("italic",!1,null),e.changeToCSS("i","bf-editor-italic-emphasis"),e.changeToTags("bf-editor-italic-emphasis","em")}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});
diff --git a/lib/editor/atto/plugins/italic/yui/build/moodle-atto_italic-button/moodle-atto_italic-button.js b/lib/editor/atto/plugins/italic/yui/build/moodle-atto_italic-button/moodle-atto_italic-button.js
index dcba9e9652a..d316663dc8d 100644
--- a/lib/editor/atto/plugins/italic/yui/build/moodle-atto_italic-button/moodle-atto_italic-button.js
+++ b/lib/editor/atto/plugins/italic/yui/build/moodle-atto_italic-button/moodle-atto_italic-button.js
@@ -35,15 +35,36 @@ YUI.add('moodle-atto_italic-button', function (Y, NAME) {
 
 Y.namespace('M.atto_italic').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
     initializer: function() {
-        this.addBasicButton({
-            exec: 'italic',
+        var italic;
+
+        this.addButton({
+            callback: this._toggleItalic,
+            icon: 'e/italic',
+            buttonName: italic,
+            inlineFormat: true,
 
             // Key code for the keyboard shortcut which triggers this button:
             keys: '73',
 
             // Watch the following tags and add/remove highlighting as appropriate:
-            tags: 'i'
+            tags: 'em, i'
         });
+    },
+    /**
+     * Toggle the italic setting.
+     *
+     * @method _toggleItalic
+     * @param {EventFacade} e
+     */
+    _toggleItalic: function() {
+        var host = this.get('host');
+
+        // Use the "italic" command for simplicity. This will toggle <em> tags off as well.
+        document.execCommand('italic', false, null);
+
+        // Then change all <i> tags to <em> tags. This will change any existing <i> tags as well.
+        host.changeToCSS('i', 'bf-editor-italic-emphasis');
+        host.changeToTags('bf-editor-italic-emphasis', 'em');
     }
 });
 
diff --git a/lib/editor/atto/plugins/italic/yui/src/button/js/button.js b/lib/editor/atto/plugins/italic/yui/src/button/js/button.js
index 8823c30d803..fadc5e5f9b3 100644
--- a/lib/editor/atto/plugins/italic/yui/src/button/js/button.js
+++ b/lib/editor/atto/plugins/italic/yui/src/button/js/button.js
@@ -33,14 +33,35 @@
 
 Y.namespace('M.atto_italic').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
     initializer: function() {
-        this.addBasicButton({
-            exec: 'italic',
+        var italic;
+
+        this.addButton({
+            callback: this._toggleItalic,
+            icon: 'e/italic',
+            buttonName: italic,
+            inlineFormat: true,
 
             // Key code for the keyboard shortcut which triggers this button:
             keys: '73',
 
             // Watch the following tags and add/remove highlighting as appropriate:
-            tags: 'i'
+            tags: 'em, i'
         });
+    },
+    /**
+     * Toggle the italic setting.
+     *
+     * @method _toggleItalic
+     * @param {EventFacade} e
+     */
+    _toggleItalic: function() {
+        var host = this.get('host');
+
+        // Use the "italic" command for simplicity. This will toggle <em> tags off as well.
+        document.execCommand('italic', false, null);
+
+        // Then change all <i> tags to <em> tags. This will change any existing <i> tags as well.
+        host.changeToCSS('i', 'bf-editor-italic-emphasis');
+        host.changeToTags('bf-editor-italic-emphasis', 'em');
     }
 });
diff --git a/lib/editor/atto/tests/behat/customtoolbar.feature b/lib/editor/atto/tests/behat/customtoolbar.feature
index 97f8df0d864..af4e5195115 100644
--- a/lib/editor/atto/tests/behat/customtoolbar.feature
+++ b/lib/editor/atto/tests/behat/customtoolbar.feature
@@ -21,6 +21,6 @@ Feature: Atto editor with customised toolbar
     Then ".atto_link_button" "css_element" should exist in the ".normaldiv" "css_element"
     And ".atto_link_button" "css_element" should not exist in the ".specialdiv" "css_element"
     And ".atto_bold_button_bold" "css_element" should exist in the ".normaldiv" "css_element"
-    And ".atto_italic_button_italic" "css_element" should exist in the ".normaldiv" "css_element"
+    And ".atto_italic_button" "css_element" should exist in the ".normaldiv" "css_element"
     And ".atto_bold_button_bold" "css_element" should exist in the ".specialdiv" "css_element"
-    And ".atto_italic_button_italic" "css_element" should exist in the ".specialdiv" "css_element"
+    And ".atto_italic_button" "css_element" should exist in the ".specialdiv" "css_element"
diff --git a/lib/editor/atto/tests/behat/disablecontrol.feature b/lib/editor/atto/tests/behat/disablecontrol.feature
index 491e6e10362..d0bb2f122f1 100644
--- a/lib/editor/atto/tests/behat/disablecontrol.feature
+++ b/lib/editor/atto/tests/behat/disablecontrol.feature
@@ -22,7 +22,7 @@ Feature: Atto with enable/disable function.
     Then the "disabled" attribute of "button.atto_collapse_button" "css_element" should contain "disabled"
     And the "disabled" attribute of "button.atto_title_button" "css_element" should contain "disabled"
     And the "disabled" attribute of "button.atto_bold_button_bold" "css_element" should contain "disabled"
-    And the "disabled" attribute of "button.atto_italic_button_italic" "css_element" should contain "disabled"
+    And the "disabled" attribute of "button.atto_italic_button" "css_element" should contain "disabled"
     And the "disabled" attribute of "button.atto_unorderedlist_button_insertUnorderedList" "css_element" should contain "disabled"
     And the "disabled" attribute of "button.atto_orderedlist_button_insertOrderedList" "css_element" should contain "disabled"
     And the "disabled" attribute of "button.atto_link_button" "css_element" should contain "disabled"
@@ -36,7 +36,7 @@ Feature: Atto with enable/disable function.
     Then "button.atto_collapse_button[disabled]" "css_element" should not exist
     And "button.atto_title_button[disabled]" "css_element" should not exist
     And "button.atto_bold_button_bold[disabled]" "css_element" should not exist
-    And "button.atto_italic_button_italic[disabled]" "css_element" should not exist
+    And "button.atto_italic_button[disabled]" "css_element" should not exist
     And "button.atto_unorderedlist_button_insertUnorderedList[disabled]" "css_element" should not exist
     And "button.atto_orderedlist_button_insertOrderedList[disabled]" "css_element" should not exist
     And "button.atto_link_button[disabled]" "css_element" should not exist