diff --git a/packages/ckeditor5-html-support/src/converters.ts b/packages/ckeditor5-html-support/src/converters.ts
index ca3ef79bd20..a77c14fd6dd 100644
--- a/packages/ckeditor5-html-support/src/converters.ts
+++ b/packages/ckeditor5-html-support/src/converters.ts
@@ -26,6 +26,7 @@ import {
 	setViewAttributes,
 	mergeViewElementAttributes,
 	updateViewAttributes,
+	getHtmlAttributeName,
 	type GHSViewAttributes
 } from './utils';
 import type DataFilter from './datafilter';
@@ -62,7 +63,7 @@ export function toObjectWidgetConverter(
 		const widgetLabel = t( 'HTML object' );
 
 		const viewElement = createObjectView( viewName!, modelElement, writer );
-		const viewAttributes = modelElement.getAttribute( 'htmlAttributes' );
+		const viewAttributes = modelElement.getAttribute( getHtmlAttributeName( viewName! ) );
 
 		writer.addClass( 'html-object-embed__content', viewElement );
 
@@ -162,7 +163,7 @@ export function attributeToViewInlineConverter( { priority, view: viewName }: Da
 /**
  * View-to-model conversion helper preserving allowed attributes on block element.
  *
- * All matched attributes will be preserved on `htmlAttributes` attribute.
+ * All matched attributes will be preserved on `html*Attributes` attribute.
  *
  * @returns Returns a conversion callback.
 */
@@ -179,31 +180,45 @@ export function viewToModelBlockAttributeConverter( { view: viewName }: DataSche
 
 			const viewAttributes = dataFilter.processViewAttributes( data.viewItem, conversionApi );
 
-			if ( viewAttributes ) {
-				conversionApi.writer.setAttribute( 'htmlAttributes', viewAttributes, data.modelRange );
+			if ( !viewAttributes ) {
+				return;
 			}
+
+			conversionApi.writer.setAttribute(
+				getHtmlAttributeName( data.viewItem.name ),
+				viewAttributes,
+				data.modelRange
+			);
 		}, { priority: 'low' } );
 	};
 }
 
 /**
- * Model-to-view conversion helper applying attributes preserved in `htmlAttributes` attribute
+ * Model-to-view conversion helper applying attributes preserved in `html*Attributes` attribute
  * for block elements.
  *
  * @returns Returns a conversion callback.
 */
-export function modelToViewBlockAttributeConverter( { model: modelName }: DataSchemaBlockElementDefinition ) {
+export function modelToViewBlockAttributeConverter( { view: viewName, model: modelName }: DataSchemaBlockElementDefinition ) {
 	return ( dispatcher: DowncastDispatcher ): void => {
-		dispatcher.on<DowncastAttributeEvent>( `attribute:htmlAttributes:${ modelName }`, ( evt, data, conversionApi ) => {
-			if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
-				return;
-			}
+		dispatcher.on<DowncastAttributeEvent>(
+			`attribute:${ getHtmlAttributeName( viewName! ) }:${ modelName }`,
+			( evt, data, conversionApi ) => {
+				if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
+					return;
+				}
 
-			const { attributeOldValue, attributeNewValue } = data;
-			const viewWriter = conversionApi.writer;
-			const viewElement = conversionApi.mapper.toViewElement( data.item as Element )!;
+				const { attributeOldValue, attributeNewValue } = data;
+				const viewWriter = conversionApi.writer;
+				const viewElement = conversionApi.mapper.toViewElement( data.item as Element )!;
 
-			updateViewAttributes( viewWriter, attributeOldValue as GHSViewAttributes, attributeNewValue as GHSViewAttributes, viewElement );
-		} );
+				updateViewAttributes(
+					viewWriter,
+					attributeOldValue as GHSViewAttributes,
+					attributeNewValue as GHSViewAttributes,
+					viewElement
+				);
+			}
+		);
 	};
 }
diff --git a/packages/ckeditor5-html-support/src/datafilter.ts b/packages/ckeditor5-html-support/src/datafilter.ts
index 76f90b917df..4f91a5612ed 100644
--- a/packages/ckeditor5-html-support/src/datafilter.ts
+++ b/packages/ckeditor5-html-support/src/datafilter.ts
@@ -45,7 +45,10 @@ import {
 	type DataSchemaInlineElementDefinition
 } from './dataschema';
 
-import type { GHSViewAttributes } from './utils';
+import {
+	getHtmlAttributeName,
+	type GHSViewAttributes
+} from './utils';
 
 import { isPlainObject, pull as removeItemFromArray } from 'lodash-es';
 
@@ -498,7 +501,7 @@ export default class DataFilter extends Plugin {
 		}
 
 		schema.extend( definition.model, {
-			allowAttributes: [ 'htmlAttributes', 'htmlContent' ]
+			allowAttributes: [ getHtmlAttributeName( viewName ), 'htmlContent' ]
 		} );
 
 		// Store element content in special `$rawContent` custom property to
@@ -519,9 +522,7 @@ export default class DataFilter extends Plugin {
 		conversion.for( 'editingDowncast' ).elementToStructure( {
 			model: {
 				name: modelName,
-				attributes: [
-					'htmlAttributes'
-				]
+				attributes: [ getHtmlAttributeName( viewName ) ]
 			},
 			view: toObjectWidgetConverter( editor, definition as DataSchemaInlineElementDefinition )
 		} );
@@ -570,7 +571,7 @@ export default class DataFilter extends Plugin {
 		}
 
 		schema.extend( definition.model, {
-			allowAttributes: 'htmlAttributes'
+			allowAttributes: getHtmlAttributeName( viewName )
 		} );
 
 		conversion.for( 'upcast' ).add( viewToModelBlockAttributeConverter( definition, this ) );
diff --git a/packages/ckeditor5-html-support/src/generalhtmlsupport.ts b/packages/ckeditor5-html-support/src/generalhtmlsupport.ts
index 51476b4040e..d58e477d259 100644
--- a/packages/ckeditor5-html-support/src/generalhtmlsupport.ts
+++ b/packages/ckeditor5-html-support/src/generalhtmlsupport.ts
@@ -22,8 +22,8 @@ import StyleElementSupport from './integrations/style';
 import DocumentListElementSupport from './integrations/documentlist';
 import CustomElementSupport from './integrations/customelement';
 import type { DataSchemaInlineElementDefinition } from './dataschema';
-import type { DocumentSelection, Item, Model, Range, Selectable, Writer } from 'ckeditor5/src/engine';
-import { modifyGhsAttribute } from './utils';
+import type { DocumentSelection, Item, Model, Range, Selectable } from 'ckeditor5/src/engine';
+import { getHtmlAttributeName, modifyGhsAttribute } from './utils';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type { GeneralHtmlSupportConfig } from './generalhtmlsupportconfig';
 
@@ -90,7 +90,7 @@ export default class GeneralHtmlSupport extends Plugin {
 			return inlineDefinition.model;
 		}
 
-		return 'htmlAttributes';
+		return getHtmlAttributeName( viewElementName );
 	}
 
 	/**
diff --git a/packages/ckeditor5-html-support/src/integrations/codeblock.ts b/packages/ckeditor5-html-support/src/integrations/codeblock.ts
index d0ad7751b9a..98adf7a22d6 100644
--- a/packages/ckeditor5-html-support/src/integrations/codeblock.ts
+++ b/packages/ckeditor5-html-support/src/integrations/codeblock.ts
@@ -17,7 +17,10 @@ import type {
 } from 'ckeditor5/src/engine';
 import { Plugin } from 'ckeditor5/src/core';
 
-import { updateViewAttributes, type GHSViewAttributes } from '../utils';
+import {
+	updateViewAttributes,
+	type GHSViewAttributes
+} from '../utils';
 import DataFilter, { type DataFilterRegisterEvent } from '../datafilter';
 
 /**
@@ -59,7 +62,7 @@ export default class CodeBlockElementSupport extends Plugin {
 
 			// Extend codeBlock to allow attributes required by attribute filtration.
 			schema.extend( 'codeBlock', {
-				allowAttributes: [ 'htmlAttributes', 'htmlContentAttributes' ]
+				allowAttributes: [ 'htmlPreAttributes', 'htmlContentAttributes' ]
 			} );
 
 			conversion.for( 'upcast' ).add( viewToModelCodeBlockAttributeConverter( dataFilter ) );
@@ -74,7 +77,7 @@ export default class CodeBlockElementSupport extends Plugin {
  * View-to-model conversion helper preserving allowed attributes on {@link module:code-block/codeblock~CodeBlock Code Block}
  * feature model element.
  *
- * Attributes are preserved as a value of `htmlAttributes` model attribute.
+ * Attributes are preserved as a value of `html*Attributes` model attribute.
  * @param dataFilter
  * @returns Returns a conversion callback.
  */
@@ -88,7 +91,7 @@ function viewToModelCodeBlockAttributeConverter( dataFilter: DataFilter ) {
 				return;
 			}
 
-			preserveElementAttributes( viewPreElement, 'htmlAttributes' );
+			preserveElementAttributes( viewPreElement, 'htmlPreAttributes' );
 			preserveElementAttributes( viewCodeElement, 'htmlContentAttributes' );
 
 			function preserveElementAttributes( viewElement: ViewElement, attributeName: string ) {
@@ -109,7 +112,7 @@ function viewToModelCodeBlockAttributeConverter( dataFilter: DataFilter ) {
  */
 function modelToViewCodeBlockAttributeConverter() {
 	return ( dispatcher: DowncastDispatcher ) => {
-		dispatcher.on<DowncastAttributeEvent>( 'attribute:htmlAttributes:codeBlock', ( evt, data, conversionApi ) => {
+		dispatcher.on<DowncastAttributeEvent>( 'attribute:htmlPreAttributes:codeBlock', ( evt, data, conversionApi ) => {
 			if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
 				return;
 			}
diff --git a/packages/ckeditor5-html-support/src/integrations/customelement.ts b/packages/ckeditor5-html-support/src/integrations/customelement.ts
index f0c11b18784..5eeb67102ae 100644
--- a/packages/ckeditor5-html-support/src/integrations/customelement.ts
+++ b/packages/ckeditor5-html-support/src/integrations/customelement.ts
@@ -52,7 +52,7 @@ export default class CustomElementSupport extends Plugin {
 
 			schema.register( definition.model, definition.modelSchema );
 			schema.extend( definition.model, {
-				allowAttributes: [ 'htmlElementName', 'htmlAttributes', 'htmlContent' ],
+				allowAttributes: [ 'htmlElementName', 'htmlCustomElementAttributes', 'htmlContent' ],
 				isContent: true
 			} );
 
@@ -92,7 +92,7 @@ export default class CustomElementSupport extends Plugin {
 					const htmlAttributes = dataFilter.processViewAttributes( viewElement, conversionApi );
 
 					if ( htmlAttributes ) {
-						conversionApi.writer.setAttribute( 'htmlAttributes', htmlAttributes, modelElement );
+						conversionApi.writer.setAttribute( 'htmlCustomElementAttributes', htmlAttributes, modelElement );
 					}
 
 					// Store the whole element in the attribute so that DomConverter will be able to use the pre like element context.
@@ -117,14 +117,18 @@ export default class CustomElementSupport extends Plugin {
 			conversion.for( 'editingDowncast' ).elementToElement( {
 				model: {
 					name: definition.model,
-					attributes: [ 'htmlElementName', 'htmlAttributes', 'htmlContent' ]
+					attributes: [ 'htmlElementName', 'htmlCustomElementAttributes', 'htmlContent' ]
 				},
 				view: ( modelElement, { writer } ) => {
 					const viewName = modelElement.getAttribute( 'htmlElementName' ) as string;
 					const viewElement = writer.createRawElement( viewName );
 
-					if ( modelElement.hasAttribute( 'htmlAttributes' ) ) {
-						setViewAttributes( writer, modelElement.getAttribute( 'htmlAttributes' ) as GHSViewAttributes, viewElement );
+					if ( modelElement.hasAttribute( 'htmlCustomElementAttributes' ) ) {
+						setViewAttributes(
+							writer,
+							modelElement.getAttribute( 'htmlCustomElementAttributes' ) as GHSViewAttributes,
+							viewElement
+						);
 					}
 
 					return viewElement;
@@ -134,7 +138,7 @@ export default class CustomElementSupport extends Plugin {
 			conversion.for( 'dataDowncast' ).elementToElement( {
 				model: {
 					name: definition.model,
-					attributes: [ 'htmlElementName', 'htmlAttributes', 'htmlContent' ]
+					attributes: [ 'htmlElementName', 'htmlCustomElementAttributes', 'htmlContent' ]
 				},
 				view: ( modelElement, { writer } ) => {
 					const viewName = modelElement.getAttribute( 'htmlElementName' ) as string;
@@ -154,8 +158,12 @@ export default class CustomElementSupport extends Plugin {
 						}
 					} );
 
-					if ( modelElement.hasAttribute( 'htmlAttributes' ) ) {
-						setViewAttributes( writer, modelElement.getAttribute( 'htmlAttributes' ) as GHSViewAttributes, viewElement );
+					if ( modelElement.hasAttribute( 'htmlCustomElementAttributes' ) ) {
+						setViewAttributes(
+							writer,
+							modelElement.getAttribute( 'htmlCustomElementAttributes' ) as GHSViewAttributes,
+							viewElement
+						);
 					}
 
 					return viewElement;
diff --git a/packages/ckeditor5-html-support/src/integrations/dualcontent.ts b/packages/ckeditor5-html-support/src/integrations/dualcontent.ts
index 035b3d7fac5..37c1658d3e7 100644
--- a/packages/ckeditor5-html-support/src/integrations/dualcontent.ts
+++ b/packages/ckeditor5-html-support/src/integrations/dualcontent.ts
@@ -17,6 +17,7 @@ import {
 } from '../converters';
 import DataFilter, { type DataFilterRegisterEvent } from '../datafilter';
 import type { DataSchemaBlockElementDefinition } from '../dataschema';
+import { getHtmlAttributeName } from '../utils';
 
 /**
  * Provides the General HTML Support integration for elements which can behave like sectioning element (e.g. article) or
@@ -139,7 +140,7 @@ export default class DualContentModelElementSupport extends Plugin {
 		const dataFilter = editor.plugins.get( DataFilter );
 
 		editor.model.schema.extend( definition.model, {
-			allowAttributes: 'htmlAttributes'
+			allowAttributes: getHtmlAttributeName( definition.view! )
 		} );
 
 		conversion.for( 'upcast' ).add( viewToModelBlockAttributeConverter( definition, dataFilter ) );
diff --git a/packages/ckeditor5-html-support/src/integrations/heading.ts b/packages/ckeditor5-html-support/src/integrations/heading.ts
index 3a5ac032d2b..a97e51b35cc 100644
--- a/packages/ckeditor5-html-support/src/integrations/heading.ts
+++ b/packages/ckeditor5-html-support/src/integrations/heading.ts
@@ -17,7 +17,8 @@ import {
 } from 'ckeditor5/src/enter';
 
 import DataSchema from '../dataschema';
-import { modifyGhsAttribute } from '../utils';
+import { getHtmlAttributeName, modifyGhsAttribute } from '../utils';
+import type { HeadingElementOption } from '@ckeditor/ckeditor5-heading/src/headingconfig';
 
 /**
  * Provides the General HTML Support integration with {@link module:heading/heading~Heading Heading} feature.
@@ -80,20 +81,20 @@ export default class HeadingElementSupport extends Plugin {
 	}
 
 	/**
-	 * Removes css classes from "htmlAttributes" of new paragraph created when hitting "enter" in heading.
+	 * Removes css classes from "html*Attributes" of new paragraph created when hitting "enter" in heading.
 	 */
 	private removeClassesOnEnter( editor: Editor, options: Array<HeadingOption> ): void {
 		const enterCommand: EnterCommand = editor.commands.get( 'enter' )!;
 
 		this.listenTo<EnterCommandAfterExecuteEvent>( enterCommand, 'afterExecute', ( evt, data ) => {
 			const positionParent = editor.model.document.selection.getFirstPosition()!.parent;
-			const isHeading = options.some( option => positionParent.is( 'element', option.model ) );
+			const heading = options.find( ( option ): option is HeadingElementOption => positionParent.is( 'element', option.model ) );
 
-			if ( isHeading && positionParent.childCount === 0 ) {
+			if ( heading && positionParent.childCount === 0 ) {
 				modifyGhsAttribute(
 					data.writer,
 					positionParent as Item,
-					'htmlAttributes',
+					getHtmlAttributeName( heading.view as string ),
 					'classes',
 					classes => classes.clear()
 				);
diff --git a/packages/ckeditor5-html-support/src/integrations/image.ts b/packages/ckeditor5-html-support/src/integrations/image.ts
index 97f8139172a..54781227498 100644
--- a/packages/ckeditor5-html-support/src/integrations/image.ts
+++ b/packages/ckeditor5-html-support/src/integrations/image.ts
@@ -16,7 +16,7 @@ import type {
 	ViewElement } from 'ckeditor5/src/engine';
 
 import DataFilter, { type DataFilterRegisterEvent } from '../datafilter';
-import { type GHSViewAttributes, setViewAttributes, updateViewAttributes } from '../utils';
+import { type GHSViewAttributes, setViewAttributes, updateViewAttributes, getHtmlAttributeName } from '../utils';
 import { getDescendantElement } from './integrationutils';
 
 /**
@@ -64,7 +64,7 @@ export default class ImageElementSupport extends Plugin {
 			if ( schema.isRegistered( 'imageBlock' ) ) {
 				schema.extend( 'imageBlock', {
 					allowAttributes: [
-						'htmlAttributes',
+						'htmlImgAttributes',
 						// Figure and Link don't have model counterpart.
 						// We will preserve attributes on image model element using these attribute keys.
 						'htmlFigureAttributes',
@@ -78,7 +78,7 @@ export default class ImageElementSupport extends Plugin {
 					allowAttributes: [
 						// `htmlA` is needed for standard GHS link integration.
 						'htmlA',
-						'htmlAttributes'
+						'htmlImgAttributes'
 					]
 				} );
 			}
@@ -107,7 +107,7 @@ function viewToModelImageAttributeConverter( dataFilter: DataFilter ) {
 			const viewImageElement = data.viewItem;
 			const viewContainerElement = viewImageElement.parent;
 
-			preserveElementAttributes( viewImageElement, 'htmlAttributes' );
+			preserveElementAttributes( viewImageElement, 'htmlImgAttributes' );
 
 			if ( viewContainerElement.is( 'element', 'a' ) ) {
 				preserveLinkAttributes( viewContainerElement );
@@ -161,9 +161,9 @@ function viewToModelFigureAttributeConverter( dataFilter: DataFilter ) {
  */
 function modelToViewImageAttributeConverter() {
 	return ( dispatcher: DowncastDispatcher ) => {
-		addInlineAttributeConversion( 'htmlAttributes' );
+		addInlineAttributeConversion( 'htmlImgAttributes' );
 
-		addBlockAttributeConversion( 'img', 'htmlAttributes' );
+		addBlockAttributeConversion( 'img', 'htmlImgAttributes' );
 		addBlockAttributeConversion( 'figure', 'htmlFigureAttributes' );
 		addBlockAttributeConversion( 'a', 'htmlLinkAttributes' );
 
diff --git a/packages/ckeditor5-html-support/src/integrations/mediaembed.ts b/packages/ckeditor5-html-support/src/integrations/mediaembed.ts
index bb74c281fe5..96024f664d0 100644
--- a/packages/ckeditor5-html-support/src/integrations/mediaembed.ts
+++ b/packages/ckeditor5-html-support/src/integrations/mediaembed.ts
@@ -11,7 +11,7 @@ import { Plugin } from 'ckeditor5/src/core';
 
 import DataFilter, { type DataFilterRegisterEvent } from '../datafilter';
 import DataSchema from '../dataschema';
-import { updateViewAttributes, type GHSViewAttributes } from '../utils';
+import { updateViewAttributes, type GHSViewAttributes, getHtmlAttributeName } from '../utils';
 import type {
 	DowncastAttributeEvent,
 	DowncastDispatcher,
@@ -75,7 +75,7 @@ export default class MediaEmbedElementSupport extends Plugin {
 
 			schema.extend( 'media', {
 				allowAttributes: [
-					'htmlAttributes',
+					getHtmlAttributeName( mediaElementName ),
 					'htmlFigureAttributes'
 				]
 			} );
@@ -92,7 +92,7 @@ function viewToModelMediaAttributesConverter( dataFilter: DataFilter, mediaEleme
 	const upcastMedia: GetCallback<UpcastElementEvent> = ( evt, data, conversionApi ) => {
 		const viewMediaElement = data.viewItem;
 
-		preserveElementAttributes( viewMediaElement, 'htmlAttributes' );
+		preserveElementAttributes( viewMediaElement, getHtmlAttributeName( mediaElementName ) );
 
 		function preserveElementAttributes( viewElement: ViewElement, attributeName: string ) {
 			const viewAttributes = dataFilter.processViewAttributes( viewElement, conversionApi );
@@ -133,7 +133,7 @@ function viewToModelFigureAttributesConverter( dataFilter: DataFilter ) {
 
 function modelToViewMediaAttributeConverter( mediaElementName: string ) {
 	return ( dispatcher: DowncastDispatcher ) => {
-		addAttributeConversionDispatcherHandler( mediaElementName, 'htmlAttributes' );
+		addAttributeConversionDispatcherHandler( mediaElementName, getHtmlAttributeName( mediaElementName ) );
 		addAttributeConversionDispatcherHandler( 'figure', 'htmlFigureAttributes' );
 
 		function addAttributeConversionDispatcherHandler( elementName: string, attributeName: string ) {
diff --git a/packages/ckeditor5-html-support/src/integrations/script.ts b/packages/ckeditor5-html-support/src/integrations/script.ts
index 8b9ea89a928..7bc752dfda8 100644
--- a/packages/ckeditor5-html-support/src/integrations/script.ts
+++ b/packages/ckeditor5-html-support/src/integrations/script.ts
@@ -16,6 +16,7 @@ import {
 } from '../converters';
 import DataFilter, { type DataFilterRegisterEvent } from '../datafilter';
 import type { DataSchemaBlockElementDefinition } from '../dataschema';
+import { getHtmlAttributeName } from '../utils';
 
 /**
  * Provides the General HTML Support for `script` elements.
@@ -49,7 +50,7 @@ export default class ScriptElementSupport extends Plugin {
 			schema.register( 'htmlScript', definition.modelSchema );
 
 			schema.extend( 'htmlScript', {
-				allowAttributes: [ 'htmlAttributes', 'htmlContent' ],
+				allowAttributes: [ 'htmlScriptAttributes', 'htmlContent' ],
 				isContent: true
 			} );
 
diff --git a/packages/ckeditor5-html-support/src/integrations/style.ts b/packages/ckeditor5-html-support/src/integrations/style.ts
index ab8ef556e24..6c82e8552d8 100644
--- a/packages/ckeditor5-html-support/src/integrations/style.ts
+++ b/packages/ckeditor5-html-support/src/integrations/style.ts
@@ -17,6 +17,7 @@ import {
 } from '../converters';
 import DataFilter, { type DataFilterRegisterEvent } from '../datafilter';
 import type { DataSchemaBlockElementDefinition } from '../dataschema';
+import { getHtmlAttributeName } from '../utils';
 
 /**
  * Provides the General HTML Support for `style` elements.
@@ -50,7 +51,7 @@ export default class StyleElementSupport extends Plugin {
 			schema.register( 'htmlStyle', definition.modelSchema );
 
 			schema.extend( 'htmlStyle', {
-				allowAttributes: [ 'htmlAttributes', 'htmlContent' ],
+				allowAttributes: [ 'htmlStyleAttributes', 'htmlContent' ],
 				isContent: true
 			} );
 
diff --git a/packages/ckeditor5-html-support/src/integrations/table.ts b/packages/ckeditor5-html-support/src/integrations/table.ts
index 15f004011f5..681a4ab93a0 100644
--- a/packages/ckeditor5-html-support/src/integrations/table.ts
+++ b/packages/ckeditor5-html-support/src/integrations/table.ts
@@ -21,7 +21,7 @@ import type {
 import { Plugin } from 'ckeditor5/src/core';
 import type { TableUtils } from '@ckeditor/ckeditor5-table';
 
-import { updateViewAttributes, type GHSViewAttributes } from '../utils';
+import { updateViewAttributes, type GHSViewAttributes, getHtmlAttributeName } from '../utils';
 import DataFilter, { type DataFilterRegisterEvent } from '../datafilter';
 import { getDescendantElement } from './integrationutils';
 
@@ -69,7 +69,7 @@ export default class TableElementSupport extends Plugin {
 
 			schema.extend( 'table', {
 				allowAttributes: [
-					'htmlAttributes',
+					'htmlTableAttributes',
 					// Figure, thead and tbody elements don't have model counterparts.
 					// We will be preserving attributes on table element using these attribute keys.
 					'htmlFigureAttributes', 'htmlTheadAttributes', 'htmlTbodyAttributes'
@@ -132,7 +132,7 @@ function viewToModelTableAttributeConverter( dataFilter: DataFilter ) {
 
 			const viewTableElement = data.viewItem;
 
-			preserveElementAttributes( viewTableElement, 'htmlAttributes' );
+			preserveElementAttributes( viewTableElement, 'htmlTableAttributes' );
 
 			for ( const childNode of viewTableElement.getChildren() ) {
 				if ( childNode.is( 'element', 'thead' ) ) {
@@ -187,7 +187,7 @@ function viewToModelFigureAttributeConverter( dataFilter: DataFilter ) {
  */
 function modelToViewTableAttributeConverter() {
 	return ( dispatcher: DowncastDispatcher ) => {
-		addAttributeConversionDispatcherHandler( 'table', 'htmlAttributes' );
+		addAttributeConversionDispatcherHandler( 'table', 'htmlTableAttributes' );
 		addAttributeConversionDispatcherHandler( 'figure', 'htmlFigureAttributes' );
 		addAttributeConversionDispatcherHandler( 'thead', 'htmlTheadAttributes' );
 		addAttributeConversionDispatcherHandler( 'tbody', 'htmlTbodyAttributes' );
diff --git a/packages/ckeditor5-html-support/src/utils.ts b/packages/ckeditor5-html-support/src/utils.ts
index bf30b8f7879..84872c2da0c 100644
--- a/packages/ckeditor5-html-support/src/utils.ts
+++ b/packages/ckeditor5-html-support/src/utils.ts
@@ -14,7 +14,7 @@ import type {
 	ViewElement,
 	Writer
 } from 'ckeditor5/src/engine';
-import { cloneDeep } from 'lodash-es';
+import { startCase, cloneDeep } from 'lodash-es';
 
 export interface GHSViewAttributes {
 	attributes?: Record<string, unknown>;
@@ -204,3 +204,20 @@ export function modifyGhsAttribute(
 		}
 	}
 }
+
+/**
+ * Transforms passed string to PascalCase format. Examples:
+ * * `div` => `Div`
+ * * `h1` => `H1`
+ * * `table` => `Table`
+ */
+export function toPascalCase( data: string ): string {
+	return startCase( data ).replace( / /g, '' );
+}
+
+/**
+ * Returns the attribute name of the model element that holds raw HTML attributes.
+ */
+export function getHtmlAttributeName( viewElementName: string ): string {
+	return `html${ toPascalCase( viewElementName ) }Attributes`;
+}
diff --git a/packages/ckeditor5-html-support/tests/datafilter.js b/packages/ckeditor5-html-support/tests/datafilter.js
index 242067d3f7c..cd914b931db 100644
--- a/packages/ckeditor5-html-support/tests/datafilter.js
+++ b/packages/ckeditor5-html-support/tests/datafilter.js
@@ -243,7 +243,7 @@ describe( 'DataFilter', () => {
 			editor.setData( '<p><input type="text"></p>' );
 
 			expect( getObjectModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+				data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 				attributes: {
 					1: {
 						attributes: {
@@ -263,7 +263,7 @@ describe( 'DataFilter', () => {
 			editor.setData( '<p><input style="color:red;"></p>' );
 
 			expect( getObjectModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+				data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 				attributes: {
 					1: {
 						styles: {
@@ -283,7 +283,7 @@ describe( 'DataFilter', () => {
 			editor.setData( '<p><input class="foobar"></p>' );
 
 			expect( getObjectModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+				data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 				attributes: {
 					1: {
 						classes: [ 'foobar' ]
@@ -303,7 +303,7 @@ describe( 'DataFilter', () => {
 
 			expect( getObjectModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data: '<paragraph>' +
-				'<htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput>' +
+				'<htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput>' +
 				'<htmlInput htmlContent=""></htmlInput>' +
 				'</paragraph>',
 				attributes: {
@@ -327,7 +327,7 @@ describe( 'DataFilter', () => {
 
 			expect( getObjectModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data: '<paragraph>' +
-				'<htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput>' +
+				'<htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput>' +
 				'<htmlInput htmlContent=""></htmlInput>' +
 				'</paragraph>',
 				attributes: {
@@ -351,7 +351,7 @@ describe( 'DataFilter', () => {
 
 			expect( getObjectModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data: '<paragraph>' +
-				'<htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput>' +
+				'<htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput>' +
 				'<htmlInput htmlContent=""></htmlInput>' +
 				'</paragraph>',
 				attributes: {
@@ -378,7 +378,7 @@ describe( 'DataFilter', () => {
 			expect( input.getAttribute( 'type' ) ).to.equal( 'number' );
 		} );
 
-		it( 'should consume htmlAttributes attribute (editing downcast)', () => {
+		it( 'should consume htmlXAttributes attribute (editing downcast)', () => {
 			let consumable;
 
 			editor.conversion.for( 'editingDowncast' ).add( dispatcher => {
@@ -392,7 +392,7 @@ describe( 'DataFilter', () => {
 
 			editor.setData( '<p><input type="number"/></p>' );
 
-			expect( consumable.test( model.document.getRoot().getChild( 0 ).getChild( 0 ), 'attribute:htmlAttributes' ) ).to.be.false;
+			expect( consumable.test( model.document.getRoot().getChild( 0 ).getChild( 0 ), 'attribute:htmlInputAttributes' ) ).to.be.false;
 		} );
 
 		it( 'should add widget label', () => {
@@ -485,7 +485,7 @@ describe( 'DataFilter', () => {
 			editor.setData( '<section data-foo="foobar"><p>foobar</p></section>' );
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+				data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 				attributes: {
 					1: {
 						attributes: {
@@ -513,7 +513,7 @@ describe( 'DataFilter', () => {
 			editor.setData( '<section style="background-color:blue;color:red;"><p>foobar</p></section>' );
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+				data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 				attributes: {
 					1: {
 						styles: {
@@ -536,7 +536,7 @@ describe( 'DataFilter', () => {
 			editor.setData( '<section class="foo bar"><p>foobar</p></section>' );
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+				data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 				attributes: {
 					1: { classes: [ 'foo', 'bar' ] }
 				}
@@ -558,9 +558,9 @@ describe( 'DataFilter', () => {
 			);
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<htmlArticle htmlAttributes="(1)">' +
-					'<htmlSection htmlAttributes="(2)"><paragraph>section1</paragraph></htmlSection>' +
-					'<htmlSection htmlAttributes="(3)"><paragraph>section2</paragraph></htmlSection>' +
+				data: '<htmlArticle htmlArticleAttributes="(1)">' +
+					'<htmlSection htmlSectionAttributes="(2)"><paragraph>section1</paragraph></htmlSection>' +
+					'<htmlSection htmlSectionAttributes="(3)"><paragraph>section2</paragraph></htmlSection>' +
 					'</htmlArticle>',
 				attributes: {
 					1: {
@@ -594,8 +594,8 @@ describe( 'DataFilter', () => {
 			);
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<htmlSection htmlAttributes="(1)"><paragraph>foo</paragraph></htmlSection>' +
-					'<htmlArticle htmlAttributes="(2)"><paragraph>bar</paragraph></htmlArticle>',
+				data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foo</paragraph></htmlSection>' +
+					'<htmlArticle htmlArticleAttributes="(2)"><paragraph>bar</paragraph></htmlArticle>',
 				attributes: {
 					1: {
 						attributes: {
@@ -626,7 +626,9 @@ describe( 'DataFilter', () => {
 			editor.setData( '<section data-foo="a" data-bar="b"><p>foobar</p></section>' );
 
 			expect( getModelData( model, { withoutSelection: true } ) ).to.deep.equal(
-				'<htmlSection htmlAttributes="{"attributes":{"data-foo":"a","data-bar":"b"}}"><paragraph>foobar</paragraph></htmlSection>'
+				'<htmlSection htmlSectionAttributes="{"attributes":{"data-foo":"a","data-bar":"b"}}">' +
+					'<paragraph>foobar</paragraph>' +
+				'</htmlSection>'
 			);
 
 			expect( editor.getData() ).to.equal(
@@ -645,7 +647,7 @@ describe( 'DataFilter', () => {
 			);
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<htmlSection htmlAttributes="(1)"><paragraph>foo</paragraph></htmlSection>' +
+				data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foo</paragraph></htmlSection>' +
 					'<htmlSection><paragraph>bar</paragraph></htmlSection>',
 				attributes: {
 					1: {
@@ -673,7 +675,7 @@ describe( 'DataFilter', () => {
 			);
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<htmlSection htmlAttributes="(1)"><paragraph>foo</paragraph></htmlSection>' +
+				data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foo</paragraph></htmlSection>' +
 					'<htmlSection><paragraph>bar</paragraph></htmlSection>',
 				attributes: {
 					1: {
@@ -701,7 +703,7 @@ describe( 'DataFilter', () => {
 			);
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<htmlSection htmlAttributes="(1)"><paragraph>foo</paragraph></htmlSection>' +
+				data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foo</paragraph></htmlSection>' +
 					'<htmlSection><paragraph>bar</paragraph></htmlSection>',
 				attributes: {
 					1: {
@@ -797,7 +799,7 @@ describe( 'DataFilter', () => {
 
 		it( 'should not consume attribute already consumed (downcast)', () => {
 			editor.conversion.for( 'downcast' ).add( dispatcher => {
-				dispatcher.on( 'attribute:htmlAttributes:htmlSection', ( evt, data, conversionApi ) => {
+				dispatcher.on( 'attribute:htmlSectionAttributes:htmlSection', ( evt, data, conversionApi ) => {
 					conversionApi.consumable.consume( data.item, evt.name );
 				}, { priority: 'high' } );
 			} );
@@ -808,7 +810,7 @@ describe( 'DataFilter', () => {
 			editor.setData( '<section data-foo><p>foo</p></section>' );
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<htmlSection htmlAttributes="(1)"><paragraph>foo</paragraph></htmlSection>',
+				data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foo</paragraph></htmlSection>',
 				// At this point, attribute should still be in the model, as we are testing downcast conversion.
 				attributes: {
 					1: {
@@ -890,7 +892,7 @@ describe( 'DataFilter', () => {
 			editor.setData( '<p zzz="a" ab?cd="2">x</p><p foo="a" bar' );
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<paragraph htmlAttributes="(1)">x</paragraph><paragraph htmlAttributes="(2)"></paragraph>',
+				data: '<paragraph htmlPAttributes="(1)">x</paragraph><paragraph htmlPAttributes="(2)"></paragraph>',
 				attributes: {
 					1: {
 						attributes: {
@@ -1381,15 +1383,15 @@ describe( 'DataFilter', () => {
 				}, root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							styles: {
 								'background-color': 'blue',
 								color: 'red'
 							}
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -1406,16 +1408,16 @@ describe( 'DataFilter', () => {
 				}, root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							styles: {
 								'background-color': 'blue',
 								color: 'red',
 								'font-size': '10px'
 							}
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -1432,15 +1434,15 @@ describe( 'DataFilter', () => {
 				}, root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							styles: {
 								'background-color': 'green',
 								color: 'red'
 							}
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -1455,15 +1457,15 @@ describe( 'DataFilter', () => {
 				htmlSupport.removeModelHtmlStyles( 'input', 'color', root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							styles: {
 								'background-color': 'blue',
 								'font-size': '10px'
 							}
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -1503,9 +1505,10 @@ describe( 'DataFilter', () => {
 				}, root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							attributes: {
 								'data-foo': 'bar'
 							},
@@ -1515,8 +1518,7 @@ describe( 'DataFilter', () => {
 								color: 'red',
 								'font-size': '10px'
 							}
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -1533,9 +1535,10 @@ describe( 'DataFilter', () => {
 				htmlSupport.removeModelHtmlStyles( 'input', 'color', root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							attributes: {
 								'data-foo': 'bar'
 							},
@@ -1544,8 +1547,7 @@ describe( 'DataFilter', () => {
 								'background-color': 'blue',
 								'font-size': '10px'
 							}
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -1566,15 +1568,15 @@ describe( 'DataFilter', () => {
 				], root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							attributes: {
 								'data-foo': 'bar'
 							},
 							classes: [ 'foo', 'bar' ]
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -1592,12 +1594,12 @@ describe( 'DataFilter', () => {
 				], root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							classes: [ 'foo', 'bar' ]
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -1612,12 +1614,12 @@ describe( 'DataFilter', () => {
 				htmlSupport.addModelHtmlClass( 'input', 'bar', root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							classes: [ 'foo', 'bar' ]
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -1632,12 +1634,12 @@ describe( 'DataFilter', () => {
 				htmlSupport.addModelHtmlClass( 'input', 'baz', root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							classes: [ 'foo', 'bar', 'baz' ]
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -1652,12 +1654,12 @@ describe( 'DataFilter', () => {
 				htmlSupport.removeModelHtmlClass( 'input', 'bar', root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							classes: [ 'foo', 'baz' ]
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -1694,9 +1696,10 @@ describe( 'DataFilter', () => {
 				htmlSupport.addModelHtmlClass( 'input', 'bar', root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							attributes: {
 								'data-foo': 'bar'
 							},
@@ -1705,8 +1708,7 @@ describe( 'DataFilter', () => {
 								'background-color': 'blue',
 								color: 'red'
 							}
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -1723,9 +1725,10 @@ describe( 'DataFilter', () => {
 				htmlSupport.removeModelHtmlClass( 'input', 'bar', root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							attributes: {
 								'data-foo': 'bar'
 							},
@@ -1735,8 +1738,7 @@ describe( 'DataFilter', () => {
 								color: 'red',
 								'font-size': '10px'
 							}
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -1756,9 +1758,10 @@ describe( 'DataFilter', () => {
 				], root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							attributes: {
 								'data-foo': 'bar'
 							},
@@ -1767,8 +1770,7 @@ describe( 'DataFilter', () => {
 								color: 'red',
 								'font-size': '10px'
 							}
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -1786,15 +1788,15 @@ describe( 'DataFilter', () => {
 				}, root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							attributes: {
 								'data-foo': 'bar',
 								'data-bar': 'baz'
 							}
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -1811,15 +1813,15 @@ describe( 'DataFilter', () => {
 				}, root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							attributes: {
 								'data-foo': 'bar',
 								'data-bar': 'baz'
 							}
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -1837,15 +1839,15 @@ describe( 'DataFilter', () => {
 				}, root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							attributes: {
 								'data-foo': 'baz',
 								'data-bar': 'bar'
 							}
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -1860,14 +1862,14 @@ describe( 'DataFilter', () => {
 				htmlSupport.removeModelHtmlAttributes( 'input', 'data-bar', root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							attributes: {
 								'data-foo': 'bar'
 							}
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -1907,9 +1909,10 @@ describe( 'DataFilter', () => {
 				}, root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							attributes: {
 								'data-foo': 'bar',
 								'data-bar': 'baz'
@@ -1919,8 +1922,7 @@ describe( 'DataFilter', () => {
 								'background-color': 'blue',
 								color: 'red'
 							}
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -1937,9 +1939,10 @@ describe( 'DataFilter', () => {
 				htmlSupport.removeModelHtmlAttributes( 'input', 'data-bar', root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							attributes: {
 								'data-foo': 'bar'
 							},
@@ -1948,8 +1951,7 @@ describe( 'DataFilter', () => {
 								'background-color': 'blue',
 								'font-size': '10px'
 							}
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -1966,16 +1968,16 @@ describe( 'DataFilter', () => {
 				htmlSupport.removeModelHtmlAttributes( 'input', 'data-foo', root.getChild( 0 ).getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<paragraph><htmlInput htmlAttributes="(1)" htmlContent=""></htmlInput></paragraph>',
+					data: '<paragraph><htmlInput htmlContent="" htmlInputAttributes="(1)"></htmlInput></paragraph>',
 					attributes: {
-						1: {
+						1: '',
+						2: {
 							classes: [ 'foo', 'bar' ],
 							styles: {
 								'background-color': 'blue',
 								'font-size': '10px'
 							}
-						},
-						2: ''
+						}
 					}
 				} );
 
@@ -2004,7 +2006,7 @@ describe( 'DataFilter', () => {
 				}, root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: {
 							styles: {
@@ -2028,7 +2030,7 @@ describe( 'DataFilter', () => {
 				}, root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: {
 							styles: {
@@ -2053,7 +2055,7 @@ describe( 'DataFilter', () => {
 				}, root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: {
 							styles: {
@@ -2075,7 +2077,7 @@ describe( 'DataFilter', () => {
 				htmlSupport.removeModelHtmlStyles( 'section', 'color', root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: {
 							styles: {
@@ -2116,7 +2118,7 @@ describe( 'DataFilter', () => {
 				}, root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: {
 							attributes: {
@@ -2147,7 +2149,7 @@ describe( 'DataFilter', () => {
 				htmlSupport.removeModelHtmlStyles( 'section', [ 'color' ], root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: {
 							attributes: {
@@ -2177,7 +2179,7 @@ describe( 'DataFilter', () => {
 				htmlSupport.removeModelHtmlStyles( 'section', [ 'background-color', 'color', 'font-size' ], root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: {
 							attributes: {
@@ -2199,7 +2201,7 @@ describe( 'DataFilter', () => {
 				htmlSupport.addModelHtmlClass( 'section', [ 'foo', 'bar' ], root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: {
 							classes: [ 'foo', 'bar' ]
@@ -2218,7 +2220,7 @@ describe( 'DataFilter', () => {
 				htmlSupport.addModelHtmlClass( 'section', 'baz', root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: { classes: [ 'foo', 'bar', 'baz' ] }
 					}
@@ -2232,11 +2234,11 @@ describe( 'DataFilter', () => {
 			it( 'should update existing classes if no other styles or attributes are present', () => {
 				editor.setData( '<section class="foo bar"><p>foobar</p></section>' );
 
-				htmlSupport.addModelHtmlClass( 'section', 'baz', root.getChild( 0 ), 'htmlAttributes' );
-				htmlSupport.removeModelHtmlClass( 'section', 'bar', root.getChild( 0 ), 'htmlAttributes' );
+				htmlSupport.addModelHtmlClass( 'section', 'baz', root.getChild( 0 ), 'htmlSectionAttributes' );
+				htmlSupport.removeModelHtmlClass( 'section', 'bar', root.getChild( 0 ), 'htmlSectionAttributes' );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: { classes: [ 'foo', 'baz' ] }
 					}
@@ -2253,7 +2255,7 @@ describe( 'DataFilter', () => {
 				htmlSupport.removeModelHtmlClass( 'section', 'bar', root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: { classes: [ 'foo', 'baz' ] }
 					}
@@ -2288,7 +2290,7 @@ describe( 'DataFilter', () => {
 				htmlSupport.removeModelHtmlClass( 'section', 'bar', root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: {
 							attributes: {
@@ -2318,7 +2320,7 @@ describe( 'DataFilter', () => {
 				htmlSupport.removeModelHtmlClass( 'section', [ 'bar', 'baz' ], root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: {
 							attributes: {
@@ -2348,7 +2350,7 @@ describe( 'DataFilter', () => {
 				htmlSupport.removeModelHtmlClass( 'section', [ 'foo', 'bar', 'baz' ], root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: {
 							attributes: {
@@ -2375,7 +2377,7 @@ describe( 'DataFilter', () => {
 				htmlSupport.setModelHtmlAttributes( 'section', { 'data-foo': 'bar' }, root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: {
 							attributes: { 'data-foo': 'bar' }
@@ -2394,7 +2396,7 @@ describe( 'DataFilter', () => {
 				htmlSupport.setModelHtmlAttributes( 'section', { 'data-bar': 'baz' }, root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: {
 							attributes: {
@@ -2419,7 +2421,7 @@ describe( 'DataFilter', () => {
 				}, root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: {
 							attributes: {
@@ -2441,7 +2443,7 @@ describe( 'DataFilter', () => {
 				htmlSupport.removeModelHtmlAttributes( 'section', 'data-bar', root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: {
 							attributes: {
@@ -2479,7 +2481,7 @@ describe( 'DataFilter', () => {
 				htmlSupport.setModelHtmlAttributes( 'section', { 'data-bar': 'baz' }, root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: {
 							attributes: {
@@ -2512,7 +2514,7 @@ describe( 'DataFilter', () => {
 				htmlSupport.removeModelHtmlAttributes( 'section', 'data-bar', root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: {
 							attributes: {
@@ -2544,7 +2546,7 @@ describe( 'DataFilter', () => {
 				htmlSupport.removeModelHtmlAttributes( 'section', [ 'data-bar', 'data-foo' ], root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlSection htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
+					data: '<htmlSection htmlSectionAttributes="(1)"><paragraph>foobar</paragraph></htmlSection>',
 					attributes: {
 						1: {
 							classes: [ 'foo', 'bar' ],
@@ -3530,7 +3532,7 @@ describe( 'DataFilter', () => {
 			editor.setData( '<p data-foo="foo">foo</p>' );
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<paragraph htmlAttributes="(1)">foo</paragraph>',
+				data: '<paragraph htmlPAttributes="(1)">foo</paragraph>',
 				attributes: {
 					1: {
 						attributes: { 'data-foo': 'foo' }
@@ -3548,7 +3550,7 @@ describe( 'DataFilter', () => {
 			editor.setData( '<p class="foo">foo</p><p class="bar">bar</p>' );
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<paragraph htmlAttributes="(1)">foo</paragraph><paragraph htmlAttributes="(2)">bar</paragraph>',
+				data: '<paragraph htmlPAttributes="(1)">foo</paragraph><paragraph htmlPAttributes="(2)">bar</paragraph>',
 				attributes: {
 					1: {
 						classes: [ 'foo' ]
@@ -3569,7 +3571,7 @@ describe( 'DataFilter', () => {
 			editor.setData( '<p style="color:red;">foo</p>' );
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<paragraph htmlAttributes="(1)">foo</paragraph>',
+				data: '<paragraph htmlPAttributes="(1)">foo</paragraph>',
 				attributes: {
 					1: {
 						styles: { color: 'red' }
@@ -3588,7 +3590,7 @@ describe( 'DataFilter', () => {
 			editor.setData( '<p data-foo="foo">foo</p><p data-foo="bar">bar</p>' );
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<paragraph htmlAttributes="(1)">foo</paragraph><paragraph>bar</paragraph>',
+				data: '<paragraph htmlPAttributes="(1)">foo</paragraph><paragraph>bar</paragraph>',
 				attributes: {
 					1: {
 						attributes: {
@@ -3609,7 +3611,7 @@ describe( 'DataFilter', () => {
 			editor.setData( '<p style="color:blue;">foo</p><p style="color:red">bar</p>' );
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<paragraph htmlAttributes="(1)">foo</paragraph><paragraph>bar</paragraph>',
+				data: '<paragraph htmlPAttributes="(1)">foo</paragraph><paragraph>bar</paragraph>',
 				attributes: {
 					1: {
 						styles: {
@@ -3630,7 +3632,7 @@ describe( 'DataFilter', () => {
 			editor.setData( '<p class="foo bar">foo</p><p class="bar">bar</p>' );
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<paragraph htmlAttributes="(1)">foo</paragraph><paragraph>bar</paragraph>',
+				data: '<paragraph htmlPAttributes="(1)">foo</paragraph><paragraph>bar</paragraph>',
 				attributes: {
 					1: {
 						classes: [ 'foo' ]
diff --git a/packages/ckeditor5-html-support/tests/generalhtmlsupport.js b/packages/ckeditor5-html-support/tests/generalhtmlsupport.js
index 4e328811ad4..2a000a9aaa7 100644
--- a/packages/ckeditor5-html-support/tests/generalhtmlsupport.js
+++ b/packages/ckeditor5-html-support/tests/generalhtmlsupport.js
@@ -38,13 +38,13 @@ describe( 'GeneralHtmlSupport', () => {
 			dataSchema.registerInlineElement( { model: 'htmlObj', view: 'def5', isObject: true } );
 		} );
 
-		it( 'should return "htmlAttributes" for block elements', () => {
-			expect( generalHtmlSupport.getGhsAttributeNameForElement( 'def1' ) ).to.equal( 'htmlAttributes' );
-			expect( generalHtmlSupport.getGhsAttributeNameForElement( 'def2' ) ).to.equal( 'htmlAttributes' );
+		it( 'should return "htmlXAttributes" for block elements', () => {
+			expect( generalHtmlSupport.getGhsAttributeNameForElement( 'def1' ) ).to.equal( 'htmlDef1Attributes' );
+			expect( generalHtmlSupport.getGhsAttributeNameForElement( 'def2' ) ).to.equal( 'htmlDef2Attributes' );
 		} );
 
-		it( 'should return "htmlAttributes" for inline object elements', () => {
-			expect( generalHtmlSupport.getGhsAttributeNameForElement( 'def5' ) ).to.equal( 'htmlAttributes' );
+		it( 'should return "htmlXAttributes" for inline object elements', () => {
+			expect( generalHtmlSupport.getGhsAttributeNameForElement( 'def5' ) ).to.equal( 'htmlDef5Attributes' );
 		} );
 
 		it( 'should return model attribute name for inline elements with multiple view representations', () => {
@@ -53,19 +53,19 @@ describe( 'GeneralHtmlSupport', () => {
 		} );
 
 		it( 'should return model attribute name for block elements with multiple view representations', () => {
-			expect( generalHtmlSupport.getGhsAttributeNameForElement( 'td' ) ).to.equal( 'htmlAttributes' );
-			expect( generalHtmlSupport.getGhsAttributeNameForElement( 'th' ) ).to.equal( 'htmlAttributes' );
+			expect( generalHtmlSupport.getGhsAttributeNameForElement( 'td' ) ).to.equal( 'htmlTdAttributes' );
+			expect( generalHtmlSupport.getGhsAttributeNameForElement( 'th' ) ).to.equal( 'htmlThAttributes' );
 		} );
 
-		it( 'should return model attribute name for inline elements with multiple view representations', () => {
+		it( 'should return model attribute name for list elements with multiple view representations', () => {
 			expect( generalHtmlSupport.getGhsAttributeNameForElement( 'ul' ) ).to.equal( 'htmlListAttributes' );
 			expect( generalHtmlSupport.getGhsAttributeNameForElement( 'ol' ) ).to.equal( 'htmlListAttributes' );
 			expect( generalHtmlSupport.getGhsAttributeNameForElement( 'li' ) ).to.equal( 'htmlLiAttributes' );
 		} );
 
 		it( 'should return model attribute name for block elements', () => {
-			expect( generalHtmlSupport.getGhsAttributeNameForElement( 'div' ) ).to.equal( 'htmlAttributes' );
-			expect( generalHtmlSupport.getGhsAttributeNameForElement( 'p' ) ).to.equal( 'htmlAttributes' );
+			expect( generalHtmlSupport.getGhsAttributeNameForElement( 'div' ) ).to.equal( 'htmlDivAttributes' );
+			expect( generalHtmlSupport.getGhsAttributeNameForElement( 'p' ) ).to.equal( 'htmlPAttributes' );
 		} );
 
 		it( 'should return model attribute name for inline elements', () => {
diff --git a/packages/ckeditor5-html-support/tests/integrations/codeblock.js b/packages/ckeditor5-html-support/tests/integrations/codeblock.js
index 9cd761eb8cd..a8f5cee1f50 100644
--- a/packages/ckeditor5-html-support/tests/integrations/codeblock.js
+++ b/packages/ckeditor5-html-support/tests/integrations/codeblock.js
@@ -47,7 +47,7 @@ describe( 'CodeBlockElementSupport', () => {
 		editor.setData( '<pre data-foo="foo"><code data-foo="foo">foobar</code></pre>' );
 
 		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-			data: '<codeBlock htmlAttributes="(1)" htmlContentAttributes="(2)" language="plaintext">foobar</codeBlock>',
+			data: '<codeBlock htmlContentAttributes="(1)" htmlPreAttributes="(2)" language="plaintext">foobar</codeBlock>',
 			attributes: {
 				1: {
 					attributes: {
@@ -74,7 +74,7 @@ describe( 'CodeBlockElementSupport', () => {
 		editor.setData( '<pre class="foo"><code class="foo">foobar</code></pre>' );
 
 		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-			data: '<codeBlock htmlAttributes="(1)" htmlContentAttributes="(2)" language="plaintext">foobar</codeBlock>',
+			data: '<codeBlock htmlContentAttributes="(1)" htmlPreAttributes="(2)" language="plaintext">foobar</codeBlock>',
 			attributes: {
 				1: {
 					classes: [ 'foo' ]
@@ -98,16 +98,16 @@ describe( 'CodeBlockElementSupport', () => {
 		editor.setData( '<pre style="background:blue;"><code style="color:red;">foobar</code></pre>' );
 
 		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-			data: '<codeBlock htmlAttributes="(1)" htmlContentAttributes="(2)" language="plaintext">foobar</codeBlock>',
+			data: '<codeBlock htmlContentAttributes="(1)" htmlPreAttributes="(2)" language="plaintext">foobar</codeBlock>',
 			attributes: {
 				1: {
 					styles: {
-						background: 'blue'
+						color: 'red'
 					}
 				},
 				2: {
 					styles: {
-						color: 'red'
+						background: 'blue'
 					}
 				}
 			}
@@ -188,7 +188,7 @@ describe( 'CodeBlockElementSupport', () => {
 	} );
 
 	it( 'should not consume attributes already consumed (downcast)', () => {
-		[ 'htmlAttributes', 'htmlContentAttributes' ].forEach( attributeName => {
+		[ 'htmlPreAttributes', 'htmlContentAttributes' ].forEach( attributeName => {
 			editor.conversion.for( 'downcast' ).add( dispatcher => {
 				dispatcher.on( `attribute:${ attributeName }:codeBlock`, ( evt, data, conversionApi ) => {
 					conversionApi.consumable.consume( data.item, evt.name );
@@ -202,7 +202,7 @@ describe( 'CodeBlockElementSupport', () => {
 		editor.setData( '<pre data-foo><code data-foo>foobar</code></section>' );
 
 		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-			data: '<codeBlock htmlAttributes="(1)" htmlContentAttributes="(2)" language="plaintext">foobar</codeBlock>',
+			data: '<codeBlock htmlContentAttributes="(1)" htmlPreAttributes="(2)" language="plaintext">foobar</codeBlock>',
 			// At this point, attribute should still be in the model, as we are testing downcast conversion.
 			attributes: {
 				1: {
diff --git a/packages/ckeditor5-html-support/tests/integrations/customelement.js b/packages/ckeditor5-html-support/tests/integrations/customelement.js
index ce3e83fe5f9..612bef59006 100644
--- a/packages/ckeditor5-html-support/tests/integrations/customelement.js
+++ b/packages/ckeditor5-html-support/tests/integrations/customelement.js
@@ -263,8 +263,8 @@ describe( 'CustomElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true, excludeAttributes } ) ).to.deep.equal( {
 				data: '<htmlCustomElement' +
-					' htmlAttributes="(1)"' +
 					' htmlContent="<custom-foo-element data-foo="foo">bar</custom-foo-element>"' +
+					' htmlCustomElementAttributes="(1)"' +
 					' htmlElementName="custom-foo-element"></htmlCustomElement>',
 				attributes: {
 					1: {
@@ -286,8 +286,8 @@ describe( 'CustomElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true, excludeAttributes } ) ).to.deep.equal( {
 				data: '<htmlCustomElement' +
-					' htmlAttributes="(1)"' +
 					' htmlContent="<custom-foo-element foo="bar">baz</custom-foo-element>"' +
+					' htmlCustomElementAttributes="(1)"' +
 					' htmlElementName="custom-foo-element"></htmlCustomElement>',
 				attributes: {
 					1: {
@@ -311,8 +311,8 @@ describe( 'CustomElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true, excludeAttributes } ) ).to.deep.equal( {
 				data: '<htmlCustomElement' +
-					' htmlAttributes="(1)"' +
 					' htmlContent="<custom-foo-element data-foo="bar">baz</custom-foo-element>"' +
+					' htmlCustomElementAttributes="(1)"' +
 					' htmlElementName="custom-foo-element"></htmlCustomElement>',
 				attributes: {
 					1: {
@@ -337,8 +337,8 @@ describe( 'CustomElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true, excludeAttributes } ) ).to.deep.equal( {
 				data: '<htmlCustomElement' +
-					' htmlAttributes="(1)"' +
 					' htmlContent="<custom-foo-element class="foo">bar</custom-foo-element>"' +
+					' htmlCustomElementAttributes="(1)"' +
 					' htmlElementName="custom-foo-element"></htmlCustomElement>',
 				attributes: {
 					1: {
@@ -358,8 +358,8 @@ describe( 'CustomElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true, excludeAttributes } ) ).to.deep.equal( {
 				data: '<htmlCustomElement' +
-					' htmlAttributes="(1)"' +
 					' htmlContent="<custom-foo-element style="background:red;">bar</custom-foo-element>"' +
+					' htmlCustomElementAttributes="(1)"' +
 					' htmlElementName="custom-foo-element"></htmlCustomElement>',
 				attributes: {
 					1: {
diff --git a/packages/ckeditor5-html-support/tests/integrations/documentlist.js b/packages/ckeditor5-html-support/tests/integrations/documentlist.js
index bc1d0808123..3378ec6773b 100644
--- a/packages/ckeditor5-html-support/tests/integrations/documentlist.js
+++ b/packages/ckeditor5-html-support/tests/integrations/documentlist.js
@@ -341,7 +341,7 @@ describe( 'DocumentListElementSupport', () => {
 					'<paragraph htmlLiAttributes="(1)" htmlListAttributes="(2)" listIndent="0" listItemId="a00" listType="bulleted">' +
 						'Foo' +
 					'</paragraph>' +
-					'<div htmlAttributes="(3)">Bar</div>',
+					'<div htmlDivAttributes="(3)">Bar</div>',
 				attributes: {
 					1: {
 						attributes: { 'data-bar': 'A' }
diff --git a/packages/ckeditor5-html-support/tests/integrations/dualcontent.js b/packages/ckeditor5-html-support/tests/integrations/dualcontent.js
index e88efedf98d..7d4ed821fd3 100644
--- a/packages/ckeditor5-html-support/tests/integrations/dualcontent.js
+++ b/packages/ckeditor5-html-support/tests/integrations/dualcontent.js
@@ -158,8 +158,8 @@ describe( 'DualContentModelElementSupport', () => {
 		editor.setData( '<div data-foo><p>foobar</p></div><div data-foo>foobar</div>' );
 
 		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-			data: '<htmlDiv htmlAttributes="(1)"><paragraph>foobar</paragraph></htmlDiv>' +
-			'<htmlDivParagraph htmlAttributes="(2)">foobar</htmlDivParagraph>',
+			data: '<htmlDiv htmlDivAttributes="(1)"><paragraph>foobar</paragraph></htmlDiv>' +
+			'<htmlDivParagraph htmlDivAttributes="(2)">foobar</htmlDivParagraph>',
 			attributes: {
 				1: {
 					attributes: { 'data-foo': '' }
diff --git a/packages/ckeditor5-html-support/tests/integrations/heading.js b/packages/ckeditor5-html-support/tests/integrations/heading.js
index ad837d07820..13b12d222e9 100644
--- a/packages/ckeditor5-html-support/tests/integrations/heading.js
+++ b/packages/ckeditor5-html-support/tests/integrations/heading.js
@@ -112,11 +112,11 @@ describe( 'HeadingElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<heading1 htmlAttributes="(1)">one</heading1>' +
-					'<heading2 htmlAttributes="(2)">two</heading2>' +
-					'<htmlH3 htmlAttributes="(3)">three</htmlH3>' +
-					'<htmlH4 htmlAttributes="(4)">four</htmlH4>' +
-					'<otherHeading htmlAttributes="(5)">five</otherHeading>',
+					'<heading1 htmlH1Attributes="(1)">one</heading1>' +
+					'<heading2 htmlH2Attributes="(2)">two</heading2>' +
+					'<htmlH3 htmlH3Attributes="(3)">three</htmlH3>' +
+					'<htmlH4 htmlH4Attributes="(4)">four</htmlH4>' +
+					'<otherHeading htmlH5Attributes="(5)">five</otherHeading>',
 				attributes: {
 					1: {
 						attributes: {
@@ -159,7 +159,7 @@ describe( 'HeadingElementSupport', () => {
 			editor.execute( 'enter' );
 
 			expect( getModelDataWithAttributes( model ) ).to.deep.equal( {
-				data: '<heading2 htmlAttributes="(1)">foobar</heading2><paragraph>[]</paragraph>',
+				data: '<heading2 htmlH2Attributes="(1)">foobar</heading2><paragraph>[]</paragraph>',
 				attributes: {
 					1: {
 						classes: [
@@ -180,7 +180,7 @@ describe( 'HeadingElementSupport', () => {
 			editor.execute( 'enter' );
 
 			expect( getModelDataWithAttributes( model ) ).to.deep.equal( {
-				data: '<heading2 htmlAttributes="(1)">foo</heading2><heading2 htmlAttributes="(2)">[]bar</heading2>',
+				data: '<heading2 htmlH2Attributes="(1)">foo</heading2><heading2 htmlH2Attributes="(2)">[]bar</heading2>',
 				attributes: {
 					1: {
 						classes: [
@@ -212,7 +212,7 @@ describe( 'HeadingElementSupport', () => {
 				}, root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<heading1 htmlAttributes="(1)">foobar</heading1>',
+					data: '<heading1 htmlH1Attributes="(1)">foobar</heading1>',
 					attributes: {
 						1: {
 							styles: {
@@ -238,7 +238,7 @@ describe( 'HeadingElementSupport', () => {
 				htmlSupport.addModelHtmlClass( 'h2', 'foo', root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<heading2 htmlAttributes="(1)">foobar</heading2>',
+					data: '<heading2 htmlH2Attributes="(1)">foobar</heading2>',
 					attributes: {
 						1: {
 							classes: [ 'foo' ]
@@ -263,7 +263,7 @@ describe( 'HeadingElementSupport', () => {
 				}, root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<otherHeading htmlAttributes="(1)">foobar</otherHeading>',
+					data: '<otherHeading htmlH5Attributes="(1)">foobar</otherHeading>',
 					attributes: {
 						1: {
 							attributes: {
@@ -288,7 +288,7 @@ describe( 'HeadingElementSupport', () => {
 				htmlSupport.removeModelHtmlStyles( 'h1', 'color', root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<heading1 htmlAttributes="(1)">foobar</heading1>',
+					data: '<heading1 htmlH1Attributes="(1)">foobar</heading1>',
 					attributes: {
 						1: {
 							styles: {
@@ -313,7 +313,7 @@ describe( 'HeadingElementSupport', () => {
 				htmlSupport.removeModelHtmlClass( 'h2', 'bar', root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<heading2 htmlAttributes="(1)">foobar</heading2>',
+					data: '<heading2 htmlH2Attributes="(1)">foobar</heading2>',
 					attributes: {
 						1: {
 							classes: [ 'foo' ]
@@ -336,7 +336,7 @@ describe( 'HeadingElementSupport', () => {
 				htmlSupport.removeModelHtmlAttributes( 'h5', 'data-bar', root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<otherHeading htmlAttributes="(1)">foobar</otherHeading>',
+					data: '<otherHeading htmlH5Attributes="(1)">foobar</otherHeading>',
 					attributes: {
 						1: {
 							attributes: {
@@ -367,7 +367,7 @@ describe( 'HeadingElementSupport', () => {
 				htmlSupport.removeModelHtmlAttributes( 'h1', 'data-bar', root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<heading1 htmlAttributes="(1)">foobar</heading1>',
+					data: '<heading1 htmlH1Attributes="(1)">foobar</heading1>',
 					attributes: {
 						1: {
 							attributes: {
@@ -514,11 +514,11 @@ describe( 'HeadingElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<htmlH1 htmlAttributes="(1)">one</htmlH1>' +
-					'<htmlH2 htmlAttributes="(2)">two</htmlH2>' +
-					'<htmlH3 htmlAttributes="(3)">three</htmlH3>' +
-					'<htmlH4 htmlAttributes="(4)">four</htmlH4>' +
-					'<htmlH5 htmlAttributes="(5)">five</htmlH5>',
+					'<htmlH1 htmlH1Attributes="(1)">one</htmlH1>' +
+					'<htmlH2 htmlH2Attributes="(2)">two</htmlH2>' +
+					'<htmlH3 htmlH3Attributes="(3)">three</htmlH3>' +
+					'<htmlH4 htmlH4Attributes="(4)">four</htmlH4>' +
+					'<htmlH5 htmlH5Attributes="(5)">five</htmlH5>',
 				attributes: {
 					1: {
 						attributes: {
@@ -561,7 +561,7 @@ describe( 'HeadingElementSupport', () => {
 			editor.execute( 'enter' );
 
 			expect( getModelDataWithAttributes( model ) ).to.deep.equal( {
-				data: '<htmlH2 htmlAttributes="(1)">foo</htmlH2><htmlH2 htmlAttributes="(2)">[]bar</htmlH2>',
+				data: '<htmlH2 htmlH2Attributes="(1)">foo</htmlH2><htmlH2 htmlH2Attributes="(2)">[]bar</htmlH2>',
 				attributes: {
 					1: {
 						classes: [
@@ -587,7 +587,7 @@ describe( 'HeadingElementSupport', () => {
 			editor.execute( 'enter' );
 
 			expect( getModelDataWithAttributes( model ) ).to.deep.equal( {
-				data: '<htmlH2 htmlAttributes="(1)">foo</htmlH2><htmlH2 htmlAttributes="(2)">[]bar</htmlH2>',
+				data: '<htmlH2 htmlH2Attributes="(1)">foo</htmlH2><htmlH2 htmlH2Attributes="(2)">[]bar</htmlH2>',
 				attributes: {
 					1: {
 						classes: [
@@ -613,13 +613,13 @@ describe( 'HeadingElementSupport', () => {
 			it( 'adding new styles', () => {
 				editor.setData( '<h1>foobar</h1>' );
 
-				htmlSupport.setModelHtmlStyles( 'h2', {
+				htmlSupport.setModelHtmlStyles( 'h1', {
 					'background-color': 'blue',
 					color: 'red'
 				}, root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlH1 htmlAttributes="(1)">foobar</htmlH1>',
+					data: '<htmlH1 htmlH1Attributes="(1)">foobar</htmlH1>',
 					attributes: {
 						1: {
 							styles: {
@@ -645,7 +645,7 @@ describe( 'HeadingElementSupport', () => {
 				htmlSupport.addModelHtmlClass( 'h2', 'foo', root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlH2 htmlAttributes="(1)">foobar</htmlH2>',
+					data: '<htmlH2 htmlH2Attributes="(1)">foobar</htmlH2>',
 					attributes: {
 						1: {
 							classes: [ 'foo' ]
@@ -670,7 +670,7 @@ describe( 'HeadingElementSupport', () => {
 				}, root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlH3 htmlAttributes="(1)">foobar</htmlH3>',
+					data: '<htmlH3 htmlH3Attributes="(1)">foobar</htmlH3>',
 					attributes: {
 						1: {
 							attributes: {
@@ -692,10 +692,10 @@ describe( 'HeadingElementSupport', () => {
 			it( 'removing some styles', () => {
 				editor.setData( '<h1 style="background-color:blue;color:red;">foobar</h1>' );
 
-				htmlSupport.removeModelHtmlStyles( 'h3', 'color', root.getChild( 0 ) );
+				htmlSupport.removeModelHtmlStyles( 'h1', 'color', root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlH1 htmlAttributes="(1)">foobar</htmlH1>',
+					data: '<htmlH1 htmlH1Attributes="(1)">foobar</htmlH1>',
 					attributes: {
 						1: {
 							styles: {
@@ -720,7 +720,7 @@ describe( 'HeadingElementSupport', () => {
 				htmlSupport.removeModelHtmlClass( 'h2', 'bar', root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlH2 htmlAttributes="(1)">foobar</htmlH2>',
+					data: '<htmlH2 htmlH2Attributes="(1)">foobar</htmlH2>',
 					attributes: {
 						1: {
 							classes: [ 'foo' ]
@@ -743,7 +743,7 @@ describe( 'HeadingElementSupport', () => {
 				htmlSupport.removeModelHtmlAttributes( 'h3', 'data-bar', root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlH3 htmlAttributes="(1)">foobar</htmlH3>',
+					data: '<htmlH3 htmlH3Attributes="(1)">foobar</htmlH3>',
 					attributes: {
 						1: {
 							attributes: {
@@ -774,7 +774,7 @@ describe( 'HeadingElementSupport', () => {
 				htmlSupport.removeModelHtmlAttributes( 'h1', 'data-bar', root.getChild( 0 ) );
 
 				expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-					data: '<htmlH1 htmlAttributes="(1)">foobar</htmlH1>',
+					data: '<htmlH1 htmlH1Attributes="(1)">foobar</htmlH1>',
 					attributes: {
 						1: {
 							attributes: {
diff --git a/packages/ckeditor5-html-support/tests/integrations/image.js b/packages/ckeditor5-html-support/tests/integrations/image.js
index 340627d3490..ce351e07df4 100644
--- a/packages/ckeditor5-html-support/tests/integrations/image.js
+++ b/packages/ckeditor5-html-support/tests/integrations/image.js
@@ -62,16 +62,16 @@ describe( 'ImageElementSupport', () => {
 			editor.setData( expectedHtml );
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<imageBlock htmlAttributes="(1)" htmlFigureAttributes="(2)" src="/assets/sample.png"></imageBlock>',
+				data: '<imageBlock htmlFigureAttributes="(1)" htmlImgAttributes="(2)" src="/assets/sample.png"></imageBlock>',
 				attributes: {
 					1: {
 						attributes: {
-							'data-image': 'image'
+							'data-figure': 'figure'
 						}
 					},
 					2: {
 						attributes: {
-							'data-figure': 'figure'
+							'data-image': 'image'
 						}
 					}
 				}
@@ -94,7 +94,7 @@ describe( 'ImageElementSupport', () => {
 			editor.setData( expectedHtml );
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<imageBlock htmlAttributes="(1)" htmlFigureAttributes="(2)" src="/assets/sample.png"></imageBlock>',
+				data: '<imageBlock htmlFigureAttributes="(1)" htmlImgAttributes="(2)" src="/assets/sample.png"></imageBlock>',
 				attributes: range( 1, 3 ).reduce( ( attributes, index ) => {
 					attributes[ index ] = {
 						classes: [ 'foobar' ]
@@ -120,7 +120,7 @@ describe( 'ImageElementSupport', () => {
 			editor.setData( expectedHtml );
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-				data: '<imageBlock htmlAttributes="(1)" htmlFigureAttributes="(2)" src="/assets/sample.png"></imageBlock>',
+				data: '<imageBlock htmlFigureAttributes="(1)" htmlImgAttributes="(2)" src="/assets/sample.png"></imageBlock>',
 				attributes: range( 1, 3 ).reduce( ( attributes, index ) => {
 					attributes[ index ] = {
 						styles: {
@@ -239,19 +239,19 @@ describe( 'ImageElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<imageBlock htmlAttributes="(1)" htmlFigureAttributes="(2)" src="/assets/sample.png"></imageBlock>' +
-					'<htmlFigure htmlAttributes="(3)">' +
-						'<htmlFigcaption htmlAttributes="(4)">foobar</htmlFigcaption>' +
+					'<imageBlock htmlFigureAttributes="(1)" htmlImgAttributes="(2)" src="/assets/sample.png"></imageBlock>' +
+					'<htmlFigure htmlFigureAttributes="(3)">' +
+						'<htmlFigcaption htmlFigcaptionAttributes="(4)">foobar</htmlFigcaption>' +
 					'</htmlFigure>',
 				attributes: {
 					1: {
 						attributes: {
-							'data-image': 'image'
+							'data-figure': 'image'
 						}
 					},
 					2: {
 						attributes: {
-							'data-figure': 'image'
+							'data-image': 'image'
 						}
 					},
 					3: {
@@ -290,7 +290,7 @@ describe( 'ImageElementSupport', () => {
 
 		it( 'should not consume attributes already consumed (downcast)', () => {
 			[
-				'htmlAttributes',
+				'htmlImgAttributes',
 				'htmlFigureAttributes'
 			].forEach( attributeName => {
 				editor.conversion.for( 'downcast' ).add( dispatcher => {
@@ -389,7 +389,7 @@ describe( 'ImageElementSupport', () => {
 		// 	} );
 
 		// 	expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-		// 		data: '<imageBlock htmlAttributes="(1)" htmlFigureAttributes="(2)" src="/assets/sample.png"></imageBlock>',
+		// 		data: '<imageBlock htmlFigureAttributes="(1)" htmlImgAttributes="(2)" src="/assets/sample.png"></imageBlock>',
 		// 		attributes: {
 		// 			1: {
 		// 				attributes: {
@@ -496,18 +496,18 @@ describe( 'ImageElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<imageBlock htmlAttributes="(1)" htmlFigureAttributes="(2)" htmlLinkAttributes="(3)" ' +
+					'<imageBlock htmlFigureAttributes="(1)" htmlImgAttributes="(2)" htmlLinkAttributes="(3)" ' +
 						'linkHref="www.example.com" src="/assets/sample.png">' +
 					'</imageBlock>',
 				attributes: {
 					1: {
 						attributes: {
-							'data-image': 'image'
+							'data-figure': 'figure'
 						}
 					},
 					2: {
 						attributes: {
-							'data-figure': 'figure'
+							'data-image': 'image'
 						}
 					},
 					3: {
@@ -538,7 +538,7 @@ describe( 'ImageElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<imageBlock htmlAttributes="(1)" htmlFigureAttributes="(2)" htmlLinkAttributes="(3)" ' +
+					'<imageBlock htmlFigureAttributes="(1)" htmlImgAttributes="(2)" htmlLinkAttributes="(3)" ' +
 						'linkHref="www.example.com" src="/assets/sample.png">' +
 					'</imageBlock>',
 				attributes: range( 1, 4 ).reduce( ( attributes, index ) => {
@@ -569,7 +569,7 @@ describe( 'ImageElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<imageBlock htmlAttributes="(1)" htmlFigureAttributes="(2)" htmlLinkAttributes="(3)" ' +
+					'<imageBlock htmlFigureAttributes="(1)" htmlImgAttributes="(2)" htmlLinkAttributes="(3)" ' +
 						'linkHref="www.example.com" src="/assets/sample.png">' +
 					'</imageBlock>',
 				attributes: range( 1, 4 ).reduce( ( attributes, index ) => {
@@ -704,21 +704,21 @@ describe( 'ImageElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<imageBlock htmlAttributes="(1)" htmlFigureAttributes="(2)" htmlLinkAttributes="(3)" ' +
+					'<imageBlock htmlFigureAttributes="(1)" htmlImgAttributes="(2)" htmlLinkAttributes="(3)" ' +
 						'linkHref="www.example.com" src="/assets/sample.png">' +
 					'</imageBlock>' +
-					'<htmlFigure htmlAttributes="(4)">' +
-						'<htmlFigcaption htmlAttributes="(5)">foobar</htmlFigcaption>' +
+					'<htmlFigure htmlFigureAttributes="(4)">' +
+						'<htmlFigcaption htmlFigcaptionAttributes="(5)">foobar</htmlFigcaption>' +
 					'</htmlFigure>',
 				attributes: {
 					1: {
 						attributes: {
-							'data-image': 'image'
+							'data-figure': 'image'
 						}
 					},
 					2: {
 						attributes: {
-							'data-figure': 'image'
+							'data-image': 'image'
 						}
 					},
 					3: {
@@ -744,7 +744,7 @@ describe( 'ImageElementSupport', () => {
 
 		it( 'should not consume attributes already consumed (downcast)', () => {
 			[
-				'htmlAttributes',
+				'htmlImgAttributes',
 				'htmlFigureAttributes'
 			].forEach( attributeName => {
 				editor.conversion.for( 'downcast' ).add( dispatcher => {
@@ -793,16 +793,16 @@ describe( 'ImageElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<imageBlock htmlAttributes="(1)" htmlFigureAttributes="(2)" htmlLinkAttributes="(3)" ' +
+					'<imageBlock htmlFigureAttributes="(1)" htmlImgAttributes="(2)" htmlLinkAttributes="(3)" ' +
 						'linkHref="www.example.com" src="/assets/sample.png">' +
-						'<caption htmlAttributes="(4)">' +
+						'<caption htmlFigcaptionAttributes="(4)">' +
 							'<$text htmlA="(5)" linkHref="www.example.com/2">foobar</$text>' +
 						'</caption>' +
 					'</imageBlock>',
 				attributes: {
 					1: {
 						attributes: {
-							'data-image': 'image'
+							'data-figure': 'figure'
 						},
 						classes: [
 							'foobar'
@@ -813,7 +813,7 @@ describe( 'ImageElementSupport', () => {
 					},
 					2: {
 						attributes: {
-							'data-figure': 'figure'
+							'data-image': 'image'
 						},
 						classes: [
 							'foobar'
@@ -950,7 +950,7 @@ describe( 'ImageElementSupport', () => {
 
 		// 	expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 		// 		data:
-		// 			'<imageBlock htmlAttributes="(1)" htmlFigureAttributes="(2)" htmlLinkAttributes="(3)" ' +
+		// 			'<imageBlock htmlFigureAttributes="(1)" htmlImgAttributes="(2)" htmlLinkAttributes="(3)" ' +
 		// 				'linkHref="www.example.com" src="/assets/sample.png">' +
 		// 			'</imageBlock>',
 		// 		attributes: {
@@ -1082,18 +1082,18 @@ describe( 'ImageElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<imageBlock htmlAttributes="(1)" htmlFigureAttributes="(2)" src="/assets/sample.png">' +
-						'<caption htmlAttributes="(3)">A caption</caption>' +
+					'<imageBlock htmlFigureAttributes="(1)" htmlImgAttributes="(2)" src="/assets/sample.png">' +
+						'<caption htmlFigcaptionAttributes="(3)">A caption</caption>' +
 					'</imageBlock>',
 				attributes: {
 					1: {
 						attributes: {
-							'data-image': 'image'
+							'data-figure': 'figure'
 						}
 					},
 					2: {
 						attributes: {
-							'data-figure': 'figure'
+							'data-image': 'image'
 						}
 					},
 					3: {
@@ -1123,8 +1123,8 @@ describe( 'ImageElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<imageBlock htmlAttributes="(1)" htmlFigureAttributes="(2)" src="/assets/sample.png">' +
-						'<caption htmlAttributes="(3)">A caption</caption>' +
+					'<imageBlock htmlFigureAttributes="(1)" htmlImgAttributes="(2)" src="/assets/sample.png">' +
+						'<caption htmlFigcaptionAttributes="(3)">A caption</caption>' +
 					'</imageBlock>',
 				attributes: range( 1, 4 ).reduce( ( attributes, index ) => {
 					attributes[ index ] = {
@@ -1153,8 +1153,8 @@ describe( 'ImageElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<imageBlock htmlAttributes="(1)" htmlFigureAttributes="(2)" src="/assets/sample.png">' +
-						'<caption htmlAttributes="(3)">A caption</caption>' +
+					'<imageBlock htmlFigureAttributes="(1)" htmlImgAttributes="(2)" src="/assets/sample.png">' +
+						'<caption htmlFigcaptionAttributes="(3)">A caption</caption>' +
 					'</imageBlock>',
 				attributes: range( 1, 4 ).reduce( ( attributes, index ) => {
 					attributes[ index ] = {
@@ -1280,19 +1280,19 @@ describe( 'ImageElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<imageBlock htmlAttributes="(1)" htmlFigureAttributes="(2)" src="/assets/sample.png"></imageBlock>' +
-					'<htmlFigure htmlAttributes="(3)">' +
-						'<htmlFigcaption htmlAttributes="(4)">foobar</htmlFigcaption>' +
+					'<imageBlock htmlFigureAttributes="(1)" htmlImgAttributes="(2)" src="/assets/sample.png"></imageBlock>' +
+					'<htmlFigure htmlFigureAttributes="(3)">' +
+						'<htmlFigcaption htmlFigcaptionAttributes="(4)">foobar</htmlFigcaption>' +
 					'</htmlFigure>',
 				attributes: {
 					1: {
 						attributes: {
-							'data-image': 'image'
+							'data-figure': 'image'
 						}
 					},
 					2: {
 						attributes: {
-							'data-figure': 'image'
+							'data-image': 'image'
 						}
 					},
 					3: {
@@ -1313,7 +1313,7 @@ describe( 'ImageElementSupport', () => {
 
 		it( 'should not consume attributes already consumed (downcast)', () => {
 			[
-				'htmlAttributes',
+				'htmlImgAttributes',
 				'htmlFigureAttributes'
 			].forEach( attributeName => {
 				editor.conversion.for( 'downcast' ).add( dispatcher => {
@@ -1369,8 +1369,8 @@ describe( 'ImageElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<imageBlock htmlAttributes="(1)" htmlFigureAttributes="(2)" src="/assets/sample.png">' +
-						'<caption htmlAttributes="(3)">A caption</caption>' +
+					'<imageBlock htmlFigureAttributes="(1)" htmlImgAttributes="(2)" src="/assets/sample.png">' +
+						'<caption htmlFigcaptionAttributes="(3)">A caption</caption>' +
 					'</imageBlock>',
 				attributes: range( 1, 4 ).reduce( ( attributes, index ) => {
 					attributes[ index ] = {
@@ -1615,8 +1615,8 @@ describe( 'ImageElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<paragraph htmlAttributes="(1)">' +
-						'<imageInline htmlAttributes="(2)" src="/assets/sample.png"></imageInline>' +
+					'<paragraph htmlPAttributes="(1)">' +
+						'<imageInline htmlImgAttributes="(2)" src="/assets/sample.png"></imageInline>' +
 					'</paragraph>',
 				attributes: {
 					1: {
@@ -1647,8 +1647,8 @@ describe( 'ImageElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<paragraph htmlAttributes="(1)">' +
-						'<imageInline htmlAttributes="(2)" src="/assets/sample.png"></imageInline>' +
+					'<paragraph htmlPAttributes="(1)">' +
+						'<imageInline htmlImgAttributes="(2)" src="/assets/sample.png"></imageInline>' +
 					'</paragraph>',
 				attributes: range( 1, 3 ).reduce( ( attributes, index ) => {
 					attributes[ index ] = {
@@ -1673,8 +1673,8 @@ describe( 'ImageElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<paragraph htmlAttributes="(1)">' +
-						'<imageInline htmlAttributes="(2)" src="/assets/sample.png"></imageInline>' +
+					'<paragraph htmlPAttributes="(1)">' +
+						'<imageInline htmlImgAttributes="(2)" src="/assets/sample.png"></imageInline>' +
 					'</paragraph>',
 				attributes: range( 1, 3 ).reduce( ( attributes, index ) => {
 					attributes[ index ] = {
@@ -1770,7 +1770,7 @@ describe( 'ImageElementSupport', () => {
 
 		it( 'should not consume attributes already consumed (downcast)', () => {
 			[
-				'htmlAttributes',
+				'htmlImgAttributes',
 				'htmlFigureAttributes'
 			].forEach( attributeName => {
 				editor.conversion.for( 'downcast' ).add( dispatcher => {
@@ -1876,8 +1876,8 @@ describe( 'ImageElementSupport', () => {
 
 		// 	expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 		// 		data:
-		// 			'<paragraph htmlAttributes="(1)">' +
-		// 				'<imageInline htmlAttributes="(2)" src="/assets/sample.png"></imageInline>' +
+		// 			'<paragraph htmlPAttributes="(1)">' +
+		// 				'<imageInline htmlImgAttributes="(2)" src="/assets/sample.png"></imageInline>' +
 		// 			'</paragraph>',
 		// 		attributes: {
 		// 			1: {
@@ -1939,7 +1939,7 @@ describe( 'ImageElementSupport', () => {
 
 		// 	expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 		// 		data:
-		// 			'<paragraph htmlAttributes="(1)">' +
+		// 			'<paragraph htmlPAttributes="(1)">' +
 		// 				'<imageInline src="/assets/sample.png"></imageInline>' +
 		// 			'</paragraph>',
 		// 		attributes: {
@@ -1985,8 +1985,9 @@ describe( 'ImageElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<paragraph htmlAttributes="(1)">' +
-						'<imageInline htmlA="(2)" htmlAttributes="(3)" linkHref="www.example.com" src="/assets/sample.png"></imageInline>' +
+					'<paragraph htmlPAttributes="(1)">' +
+						'<imageInline htmlA="(2)" htmlImgAttributes="(3)" linkHref="www.example.com" src="/assets/sample.png">' +
+						'</imageInline>' +
 					'</paragraph>',
 				attributes: {
 					1: {
@@ -2027,8 +2028,9 @@ describe( 'ImageElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<paragraph htmlAttributes="(1)">' +
-						'<imageInline htmlA="(2)" htmlAttributes="(3)" linkHref="www.example.com" src="/assets/sample.png"></imageInline>' +
+					'<paragraph htmlPAttributes="(1)">' +
+						'<imageInline htmlA="(2)" htmlImgAttributes="(3)" linkHref="www.example.com" src="/assets/sample.png">' +
+						'</imageInline>' +
 					'</paragraph>',
 				attributes: range( 1, 4 ).reduce( ( attributes, index ) => {
 					attributes[ index ] = {
@@ -2058,8 +2060,9 @@ describe( 'ImageElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<paragraph htmlAttributes="(1)">' +
-						'<imageInline htmlA="(2)" htmlAttributes="(3)" linkHref="www.example.com" src="/assets/sample.png"></imageInline>' +
+					'<paragraph htmlPAttributes="(1)">' +
+						'<imageInline htmlA="(2)" htmlImgAttributes="(3)" linkHref="www.example.com" src="/assets/sample.png">' +
+						'</imageInline>' +
 					'</paragraph>',
 				attributes: range( 1, 4 ).reduce( ( attributes, index ) => {
 					attributes[ index ] = {
@@ -2159,7 +2162,7 @@ describe( 'ImageElementSupport', () => {
 
 		it( 'should not consume attributes already consumed (downcast)', () => {
 			[
-				'htmlAttributes',
+				'htmlImgAttributes',
 				'htmlFigureAttributes'
 			].forEach( attributeName => {
 				editor.conversion.for( 'downcast' ).add( dispatcher => {
@@ -2259,7 +2262,7 @@ describe( 'ImageElementSupport', () => {
 
 		// 	expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 		// 		data:
-		// 			'<paragraph htmlAttributes="(1)">' +
+		// 			'<paragraph htmlPAttributes="(1)">' +
 		// 				'<imageInline htmlA="(2)" htmlAttributes="(3)" linkHref="www.example.com" src="/assets/sample.png"></imageInline>' +
 		// 			'</paragraph>',
 		// 		attributes: {
@@ -2342,7 +2345,7 @@ describe( 'ImageElementSupport', () => {
 
 		// 	expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 		// 		data:
-		// 			'<paragraph htmlAttributes="(1)">' +
+		// 			'<paragraph htmlPAttributes="(1)">' +
 		// 				'<imageInline linkHref="www.example.com" src="/assets/sample.png"></imageInline>' +
 		// 			'</paragraph>',
 		// 		attributes: {
@@ -2403,7 +2406,7 @@ describe( 'ImageElementSupport', () => {
 						'src',
 						'srcset',
 						'linkHref',
-						'htmlAttributes',
+						'htmlImgAttributes',
 						'htmlFigureAttributes',
 						'htmlLinkAttributes'
 					] );
@@ -2438,7 +2441,7 @@ describe( 'ImageElementSupport', () => {
 						'src',
 						'srcset',
 						'htmlA',
-						'htmlAttributes'
+						'htmlImgAttributes'
 					] );
 
 					expect( schema.getDefinition( 'imageBlock' ) ).to.be.undefined;
@@ -2467,10 +2470,10 @@ describe( 'ImageElementSupport', () => {
 					editor.setData( '' );
 
 					expect( schema.getDefinition( 'imageBlock' ).allowAttributes ).to.deep.equal( [
-						'htmlAttributes'
+						'htmlImgAttributes'
 					] );
 					expect( schema.getDefinition( 'imageInline' ).allowAttributes ).to.deep.equal( [
-						'htmlAttributes'
+						'htmlImgAttributes'
 					] );
 				} );
 		} );
diff --git a/packages/ckeditor5-html-support/tests/integrations/mediaembed.js b/packages/ckeditor5-html-support/tests/integrations/mediaembed.js
index f06b8aa1ec9..de5c3677ab2 100644
--- a/packages/ckeditor5-html-support/tests/integrations/mediaembed.js
+++ b/packages/ckeditor5-html-support/tests/integrations/mediaembed.js
@@ -57,16 +57,17 @@ describe( 'MediaEmbedElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<media htmlAttributes="(1)" htmlFigureAttributes="(2)" url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"></media>',
+					'<media htmlFigureAttributes="(1)" htmlOembedAttributes="(2)" url="https://www.youtube.com/watch?v=ZVv7UMQPEWk">' +
+					'</media>',
 				attributes: {
 					1: {
 						attributes: {
-							'data-oembed': 'data-oembed-value'
+							'data-figure': 'data-figure-value'
 						}
 					},
 					2: {
 						attributes: {
-							'data-figure': 'data-figure-value'
+							'data-oembed': 'data-oembed-value'
 						}
 					}
 				}
@@ -90,7 +91,7 @@ describe( 'MediaEmbedElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-				'<media htmlAttributes="(1)" htmlFigureAttributes="(2)" url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"></media>',
+				'<media htmlFigureAttributes="(1)" htmlOembedAttributes="(2)" url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"></media>',
 				attributes: range( 1, 3 ).reduce( ( attributes, index ) => {
 					attributes[ index ] = {
 						classes: [ 'foobar' ]
@@ -117,7 +118,7 @@ describe( 'MediaEmbedElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-				'<media htmlAttributes="(1)" htmlFigureAttributes="(2)" url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"></media>',
+				'<media htmlFigureAttributes="(1)" htmlOembedAttributes="(2)" url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"></media>',
 				attributes: range( 1, 3 ).reduce( ( attributes, index ) => {
 					attributes[ index ] = {
 						styles: {
@@ -233,7 +234,7 @@ describe( 'MediaEmbedElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-				'<media htmlAttributes="(1)" url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"></media>',
+				'<media htmlOembedAttributes="(1)" url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"></media>',
 				attributes: {
 					1: {
 						attributes: {
@@ -270,8 +271,8 @@ describe( 'MediaEmbedElementSupport', () => {
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
 				'<media htmlFigureAttributes="(1)" url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"></media>' +
-				'<htmlFigure htmlAttributes="(2)">' +
-					'<htmlFigcaption htmlAttributes="(3)">foobar</htmlFigcaption>' +
+				'<htmlFigure htmlFigureAttributes="(2)">' +
+					'<htmlFigcaption htmlFigcaptionAttributes="(3)">foobar</htmlFigcaption>' +
 				'</htmlFigure>',
 				attributes: {
 					1: {
@@ -338,7 +339,7 @@ describe( 'MediaEmbedElementSupport', () => {
 
 		it( 'should not consume attributes already consumed (downcast)', () => {
 			[
-				'htmlAttributes',
+				'htmlOembedAttributes',
 				'htmlFigureAttributes'
 			].forEach( attributeName => {
 				editor.conversion.for( 'downcast' )
@@ -471,7 +472,12 @@ describe( 'MediaEmbedElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<media htmlAttributes="(1)" htmlFigureAttributes="(2)" url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"></media>',
+					'<media' +
+						' htmlCustomOembedAttributes="(1)"' +
+						' htmlFigureAttributes="(2)"' +
+						' url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"' +
+						'>' +
+					'</media>',
 				attributes: {
 					1: {
 						attributes: {
@@ -504,7 +510,12 @@ describe( 'MediaEmbedElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-				'<media htmlAttributes="(1)" htmlFigureAttributes="(2)" url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"></media>',
+					'<media' +
+						' htmlCustomOembedAttributes="(1)"' +
+						' htmlFigureAttributes="(2)"' +
+						' url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"' +
+					'>' +
+					'</media>',
 				attributes: range( 1, 3 ).reduce( ( attributes, index ) => {
 					attributes[ index ] = {
 						classes: [ 'foobar' ]
@@ -531,7 +542,12 @@ describe( 'MediaEmbedElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-				'<media htmlAttributes="(1)" htmlFigureAttributes="(2)" url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"></media>',
+					'<media' +
+						' htmlCustomOembedAttributes="(1)"' +
+						' htmlFigureAttributes="(2)"' +
+						' url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"' +
+						'>' +
+					'</media>',
 				attributes: range( 1, 3 ).reduce( ( attributes, index ) => {
 					attributes[ index ] = {
 						styles: {
@@ -647,7 +663,11 @@ describe( 'MediaEmbedElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-				'<media htmlAttributes="(1)" url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"></media>',
+					'<media' +
+						' htmlCustomOembedAttributes="(1)"' +
+						' url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"' +
+						'>' +
+					'</media>',
 				attributes: {
 					1: {
 						attributes: {
@@ -684,8 +704,8 @@ describe( 'MediaEmbedElementSupport', () => {
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
 				'<media htmlFigureAttributes="(1)" url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"></media>' +
-				'<htmlFigure htmlAttributes="(2)">' +
-					'<htmlFigcaption htmlAttributes="(3)">foobar</htmlFigcaption>' +
+				'<htmlFigure htmlFigureAttributes="(2)">' +
+					'<htmlFigcaption htmlFigcaptionAttributes="(3)">foobar</htmlFigcaption>' +
 				'</htmlFigure>',
 				attributes: {
 					1: {
@@ -734,7 +754,7 @@ describe( 'MediaEmbedElementSupport', () => {
 
 		it( 'should not consume attributes already consumed (downcast)', () => {
 			[
-				'htmlAttributes',
+				'htmlCustomOembedAttributes',
 				'htmlFigureAttributes'
 			].forEach( attributeName => {
 				editor.conversion.for( 'downcast' )
@@ -998,9 +1018,9 @@ describe( 'MediaEmbedElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-				'<htmlFigure htmlAttributes="(1)">' +
+				'<htmlFigure htmlFigureAttributes="(1)">' +
 					'<paragraph>' +
-						'<htmlOembed htmlAttributes="(2)" htmlContent=""></htmlOembed>' +
+						'<htmlOembed htmlContent="" htmlOembedAttributes="(2)"></htmlOembed>' +
 					'</paragraph>' +
 				'</htmlFigure>',
 				attributes: {
@@ -1009,12 +1029,12 @@ describe( 'MediaEmbedElementSupport', () => {
 							'data-figure': 'data-figure-value'
 						}
 					},
-					2: {
+					2: '',
+					3: {
 						attributes: {
 							'data-oembed': 'data-oembed-value'
 						}
-					},
-					3: ''
+					}
 				}
 			} );
 
@@ -1041,19 +1061,19 @@ describe( 'MediaEmbedElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-				'<htmlFigure htmlAttributes="(1)">' +
+				'<htmlFigure htmlFigureAttributes="(1)">' +
 					'<paragraph>' +
-						'<htmlOembed htmlAttributes="(2)" htmlContent=""></htmlOembed>' +
+						'<htmlOembed htmlContent="" htmlOembedAttributes="(2)"></htmlOembed>' +
 					'</paragraph>' +
 				'</htmlFigure>',
 				attributes: {
 					1: {
 						classes: [ 'media', 'foobar' ]
 					},
-					2: {
+					2: '',
+					3: {
 						classes: [ 'foobar' ]
-					},
-					3: ''
+					}
 				}
 			} );
 
@@ -1077,19 +1097,19 @@ describe( 'MediaEmbedElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-				'<htmlFigure htmlAttributes="(1)">' +
+				'<htmlFigure htmlFigureAttributes="(1)">' +
 					'<paragraph>' +
-						'<htmlOembed htmlAttributes="(2)" htmlContent=""></htmlOembed>' +
+						'<htmlOembed htmlContent="" htmlOembedAttributes="(2)"></htmlOembed>' +
 					'</paragraph>' +
 				'</htmlFigure>',
 				attributes: {
 					1: {
 						styles: { color: 'red' }
 					},
-					2: {
+					2: '',
+					3: {
 						styles: { color: 'red' }
-					},
-					3: ''
+					}
 				}
 			} );
 
@@ -1200,15 +1220,15 @@ describe( 'MediaEmbedElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-				'<paragraph><htmlOembed htmlAttributes="(1)" htmlContent=""></htmlOembed></paragraph>',
+				'<paragraph><htmlOembed htmlContent="" htmlOembedAttributes="(1)"></htmlOembed></paragraph>',
 				attributes: {
-					1: {
+					1: '',
+					2: {
 						attributes: {
 							'data-foo': 'foo',
 							'url': 'https://www.youtube.com/watch?v=ZVv7UMQPEWk'
 						}
-					},
-					2: ''
+					}
 				}
 			} );
 
@@ -1235,13 +1255,13 @@ describe( 'MediaEmbedElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-				'<htmlFigure htmlAttributes="(1)">' +
+				'<htmlFigure htmlFigureAttributes="(1)">' +
 					'<paragraph>' +
 						'<htmlOembed htmlContent=""></htmlOembed>' +
 					'</paragraph>' +
 				'</htmlFigure>' +
-				'<htmlFigure htmlAttributes="(2)">' +
-					'<htmlFigcaption htmlAttributes="(3)">foobar</htmlFigcaption>' +
+				'<htmlFigure htmlFigureAttributes="(2)">' +
+					'<htmlFigcaption htmlFigcaptionAttributes="(3)">foobar</htmlFigcaption>' +
 				'</htmlFigure>',
 				attributes: {
 					1: {
@@ -1277,20 +1297,20 @@ describe( 'MediaEmbedElementSupport', () => {
 
 		it( 'should not consume attributes already consumed (downcast)', () => {
 			[
-				'htmlAttributes',
+				'htmlOembedAttributes',
 				'htmlFigureAttributes'
 			].forEach( attributeName => {
-				editor.conversion.for( 'downcast' )
-					.add( dispatcher => {
-						dispatcher.on( `attribute:${ attributeName }:htmlOembed`, ( evt, data, conversionApi ) => {
-							conversionApi.consumable.consume( data.item, evt.name );
-						}, { priority: 'high' } );
-					} )
-					.add( dispatcher => {
-						dispatcher.on( `attribute:${ attributeName }:htmlFigure`, ( evt, data, conversionApi ) => {
-							conversionApi.consumable.consume( data.item, evt.name );
-						}, { priority: 'high' } );
-					} );
+				editor.conversion.for( 'downcast' ).add( dispatcher => {
+					dispatcher.on( `attribute:${ attributeName }:htmlOembed`, ( evt, data, conversionApi ) => {
+						conversionApi.consumable.consume( data.item, evt.name );
+					}, { priority: 'high' } );
+				} );
+			} );
+
+			editor.conversion.for( 'downcast' ).add( dispatcher => {
+				dispatcher.on( 'attribute:htmlFigureAttributes:htmlFigure', ( evt, data, conversionApi ) => {
+					conversionApi.consumable.consume( data.item, evt.name );
+				}, { priority: 'high' } );
 			} );
 
 			dataFilter.allowElement( /^(figure|oembed)$/ );
diff --git a/packages/ckeditor5-html-support/tests/integrations/script.js b/packages/ckeditor5-html-support/tests/integrations/script.js
index 70281ef6e6b..984f4fb2de5 100644
--- a/packages/ckeditor5-html-support/tests/integrations/script.js
+++ b/packages/ckeditor5-html-support/tests/integrations/script.js
@@ -59,15 +59,15 @@ describe( 'ScriptElementSupport', () => {
 		editor.setData( `<p>Foo</p><script type="c++" nonce="qwerty">${ CODE_CPP }</script>` );
 
 		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-			data: `<paragraph>Foo</paragraph><htmlScript htmlAttributes="(1)" htmlContent="${ CODE_CPP }"></htmlScript>`,
+			data: `<paragraph>Foo</paragraph><htmlScript htmlContent="${ CODE_CPP }" htmlScriptAttributes="(1)"></htmlScript>`,
 			attributes: {
-				1: {
+				1: CODE_CPP,
+				2: {
 					attributes: {
 						nonce: 'qwerty',
 						type: 'c++'
 					}
-				},
-				2: CODE_CPP
+				}
 			}
 		} );
 
@@ -81,14 +81,14 @@ describe( 'ScriptElementSupport', () => {
 		editor.setData( `<p>Foo</p><script type="c++" nonce="qwerty">${ CODE_CPP }</script>` );
 
 		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-			data: `<paragraph>Foo</paragraph><htmlScript htmlAttributes="(1)" htmlContent="${ CODE_CPP }"></htmlScript>`,
+			data: `<paragraph>Foo</paragraph><htmlScript htmlContent="${ CODE_CPP }" htmlScriptAttributes="(1)"></htmlScript>`,
 			attributes: {
-				1: {
+				1: CODE_CPP,
+				2: {
 					attributes: {
 						type: 'c++'
 					}
-				},
-				2: CODE_CPP
+				}
 			}
 		} );
 
@@ -154,7 +154,7 @@ describe( 'ScriptElementSupport', () => {
 		dataFilter.allowAttributes( { name: 'script', attributes: true } );
 
 		editor.conversion.for( 'downcast' ).add( dispatcher => {
-			dispatcher.on( 'attribute:htmlAttributes:htmlScript', ( evt, data, conversionApi ) => {
+			dispatcher.on( 'attribute:htmlScriptAttributes:htmlScript', ( evt, data, conversionApi ) => {
 				conversionApi.consumable.consume( data.item, evt.name );
 			}, { priority: 'high' } );
 		} );
@@ -162,10 +162,10 @@ describe( 'ScriptElementSupport', () => {
 		editor.setData( `<p>Foo</p><script nonce="qwerty">${ CODE }</script>` );
 
 		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-			data: `<paragraph>Foo</paragraph><htmlScript htmlAttributes="(1)" htmlContent="${ CODE }"></htmlScript>`,
+			data: `<paragraph>Foo</paragraph><htmlScript htmlContent="${ CODE }" htmlScriptAttributes="(1)"></htmlScript>`,
 			attributes: {
-				1: { attributes: { nonce: 'qwerty' } },
-				2: CODE
+				1: CODE,
+				2: { attributes: { nonce: 'qwerty' } }
 			}
 		} );
 
@@ -184,10 +184,10 @@ describe( 'ScriptElementSupport', () => {
 		editor.setData( `<p>Foo</p><script type="c++" nonce="qwerty">${ CODE_CPP }</script>` );
 
 		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-			data: `<paragraph>Foo</paragraph><htmlScript htmlAttributes="(1)" htmlContent="${ CODE_CPP }"></htmlScript>`,
+			data: `<paragraph>Foo</paragraph><htmlScript htmlContent="${ CODE_CPP }" htmlScriptAttributes="(1)"></htmlScript>`,
 			attributes: {
-				1: { attributes: { type: 'c++' } },
-				2: CODE_CPP
+				1: CODE_CPP,
+				2: { attributes: { type: 'c++' } }
 			}
 		} );
 	} );
diff --git a/packages/ckeditor5-html-support/tests/integrations/style.js b/packages/ckeditor5-html-support/tests/integrations/style.js
index 7a727e07bf4..2de7a1d1f27 100644
--- a/packages/ckeditor5-html-support/tests/integrations/style.js
+++ b/packages/ckeditor5-html-support/tests/integrations/style.js
@@ -58,15 +58,15 @@ describe( 'StyleElementSupport', () => {
 		editor.setData( `<p>Foo</p><style type="c++" nonce="qwerty">${ STYLE }</style>` );
 
 		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-			data: `<paragraph>Foo</paragraph><htmlStyle htmlAttributes="(1)" htmlContent="${ STYLE }"></htmlStyle>`,
+			data: `<paragraph>Foo</paragraph><htmlStyle htmlContent="${ STYLE }" htmlStyleAttributes="(1)"></htmlStyle>`,
 			attributes: {
-				1: {
+				1: STYLE,
+				2: {
 					attributes: {
 						nonce: 'qwerty',
 						type: 'c++'
 					}
-				},
-				2: STYLE
+				}
 			}
 		} );
 
@@ -80,14 +80,14 @@ describe( 'StyleElementSupport', () => {
 		editor.setData( `<p>Foo</p><style type="c++" nonce="qwerty">${ STYLE }</style>` );
 
 		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-			data: `<paragraph>Foo</paragraph><htmlStyle htmlAttributes="(1)" htmlContent="${ STYLE }"></htmlStyle>`,
+			data: `<paragraph>Foo</paragraph><htmlStyle htmlContent="${ STYLE }" htmlStyleAttributes="(1)"></htmlStyle>`,
 			attributes: {
-				1: {
+				1: STYLE,
+				2: {
 					attributes: {
 						type: 'c++'
 					}
-				},
-				2: STYLE
+				}
 			}
 		} );
 
@@ -153,7 +153,7 @@ describe( 'StyleElementSupport', () => {
 		dataFilter.allowAttributes( { name: 'style', attributes: true } );
 
 		editor.conversion.for( 'downcast' ).add( dispatcher => {
-			dispatcher.on( 'attribute:htmlAttributes:htmlStyle', ( evt, data, conversionApi ) => {
+			dispatcher.on( 'attribute:htmlStyleAttributes:htmlStyle', ( evt, data, conversionApi ) => {
 				conversionApi.consumable.consume( data.item, evt.name );
 			}, { priority: 'high' } );
 		} );
@@ -161,10 +161,10 @@ describe( 'StyleElementSupport', () => {
 		editor.setData( `<p>Foo</p><style nonce="qwerty">${ STYLE }</style>` );
 
 		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-			data: `<paragraph>Foo</paragraph><htmlStyle htmlAttributes="(1)" htmlContent="${ STYLE }"></htmlStyle>`,
+			data: `<paragraph>Foo</paragraph><htmlStyle htmlContent="${ STYLE }" htmlStyleAttributes="(1)"></htmlStyle>`,
 			attributes: {
-				1: { attributes: { nonce: 'qwerty' } },
-				2: STYLE
+				1: STYLE,
+				2: { attributes: { nonce: 'qwerty' } }
 			}
 		} );
 
@@ -183,10 +183,10 @@ describe( 'StyleElementSupport', () => {
 		editor.setData( `<p>Foo</p><style type="text/css" nonce="qwerty">${ STYLE }</style>` );
 
 		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-			data: `<paragraph>Foo</paragraph><htmlStyle htmlAttributes="(1)" htmlContent="${ STYLE }"></htmlStyle>`,
+			data: `<paragraph>Foo</paragraph><htmlStyle htmlContent="${ STYLE }" htmlStyleAttributes="(1)"></htmlStyle>`,
 			attributes: {
-				1: { attributes: { type: 'text/css' } },
-				2: STYLE
+				1: STYLE,
+				2: { attributes: { type: 'text/css' } }
 			}
 		} );
 	} );
diff --git a/packages/ckeditor5-html-support/tests/integrations/table.js b/packages/ckeditor5-html-support/tests/integrations/table.js
index a92e259a6a1..5bb9d654a61 100644
--- a/packages/ckeditor5-html-support/tests/integrations/table.js
+++ b/packages/ckeditor5-html-support/tests/integrations/table.js
@@ -84,38 +84,38 @@ describe( 'TableElementSupport', () => {
 
 		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 			data:
-				'<table headingRows="1" htmlAttributes="(1)" htmlFigureAttributes="(2)" ' +
+				'<table headingRows="1" htmlFigureAttributes="(1)" htmlTableAttributes="(2)" ' +
 					'htmlTbodyAttributes="(3)" htmlTheadAttributes="(4)">' +
-					'<tableRow htmlAttributes="(5)">' +
-						'<tableCell htmlAttributes="(6)">' +
+					'<tableRow htmlTrAttributes="(5)">' +
+						'<tableCell htmlThAttributes="(6)">' +
 							'<paragraph>1</paragraph>' +
 						'</tableCell>' +
-						'<tableCell htmlAttributes="(7)">' +
+						'<tableCell htmlThAttributes="(7)">' +
 							'<paragraph>2</paragraph>' +
 						'</tableCell>' +
-						'<tableCell htmlAttributes="(8)">' +
+						'<tableCell htmlThAttributes="(8)">' +
 							'<paragraph>3</paragraph>' +
 						'</tableCell>' +
 					'</tableRow>' +
-					'<tableRow htmlAttributes="(9)">' +
-						'<tableCell htmlAttributes="(10)">' +
+					'<tableRow htmlTrAttributes="(9)">' +
+						'<tableCell htmlTdAttributes="(10)">' +
 							'<paragraph>1.1</paragraph>' +
 						'</tableCell>' +
-						'<tableCell htmlAttributes="(11)">' +
+						'<tableCell htmlTdAttributes="(11)">' +
 							'<paragraph>1.2</paragraph>' +
 						'</tableCell>' +
-						'<tableCell htmlAttributes="(12)">' +
+						'<tableCell htmlTdAttributes="(12)">' +
 							'<paragraph>1.3</paragraph>' +
 						'</tableCell>' +
 					'</tableRow>' +
-					'<tableRow htmlAttributes="(13)">' +
-						'<tableCell htmlAttributes="(14)">' +
+					'<tableRow htmlTrAttributes="(13)">' +
+						'<tableCell htmlTdAttributes="(14)">' +
 							'<paragraph>2.1</paragraph>' +
 						'</tableCell>' +
-						'<tableCell htmlAttributes="(15)">' +
+						'<tableCell htmlTdAttributes="(15)">' +
 							'<paragraph>2.2</paragraph>' +
 						'</tableCell>' +
-						'<tableCell htmlAttributes="(16)">' +
+						'<tableCell htmlTdAttributes="(16)">' +
 							'<paragraph>2.3</paragraph>' +
 						'</tableCell>' +
 					'</tableRow>' +
@@ -123,12 +123,12 @@ describe( 'TableElementSupport', () => {
 			attributes: {
 				1: {
 					attributes: {
-						'data-table': 'table'
+						'data-figure': 'figure'
 					}
 				},
 				2: {
 					attributes: {
-						'data-figure': 'figure'
+						'data-table': 'table'
 					}
 				},
 				3: {
@@ -242,38 +242,38 @@ describe( 'TableElementSupport', () => {
 
 		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 			data:
-				'<table headingRows="1" htmlAttributes="(1)" htmlFigureAttributes="(2)" ' +
+				'<table headingRows="1" htmlFigureAttributes="(1)" htmlTableAttributes="(2)" ' +
 					'htmlTbodyAttributes="(3)" htmlTheadAttributes="(4)">' +
-					'<tableRow htmlAttributes="(5)">' +
-						'<tableCell htmlAttributes="(6)">' +
+					'<tableRow htmlTrAttributes="(5)">' +
+						'<tableCell htmlThAttributes="(6)">' +
 							'<paragraph>1</paragraph>' +
 						'</tableCell>' +
-						'<tableCell htmlAttributes="(7)">' +
+						'<tableCell htmlThAttributes="(7)">' +
 							'<paragraph>2</paragraph>' +
 						'</tableCell>' +
-						'<tableCell htmlAttributes="(8)">' +
+						'<tableCell htmlThAttributes="(8)">' +
 							'<paragraph>3</paragraph>' +
 						'</tableCell>' +
 					'</tableRow>' +
-					'<tableRow htmlAttributes="(9)">' +
-						'<tableCell htmlAttributes="(10)">' +
+					'<tableRow htmlTrAttributes="(9)">' +
+						'<tableCell htmlTdAttributes="(10)">' +
 							'<paragraph>1.1</paragraph>' +
 						'</tableCell>' +
-						'<tableCell htmlAttributes="(11)">' +
+						'<tableCell htmlTdAttributes="(11)">' +
 							'<paragraph>1.2</paragraph>' +
 						'</tableCell>' +
-						'<tableCell htmlAttributes="(12)">' +
+						'<tableCell htmlTdAttributes="(12)">' +
 							'<paragraph>1.3</paragraph>' +
 						'</tableCell>' +
 					'</tableRow>' +
-					'<tableRow htmlAttributes="(13)">' +
-						'<tableCell htmlAttributes="(14)">' +
+					'<tableRow htmlTrAttributes="(13)">' +
+						'<tableCell htmlTdAttributes="(14)">' +
 							'<paragraph>2.1</paragraph>' +
 						'</tableCell>' +
-						'<tableCell htmlAttributes="(15)">' +
+						'<tableCell htmlTdAttributes="(15)">' +
 							'<paragraph>2.2</paragraph>' +
 						'</tableCell>' +
-						'<tableCell htmlAttributes="(16)">' +
+						'<tableCell htmlTdAttributes="(16)">' +
 							'<paragraph>2.3</paragraph>' +
 						'</tableCell>' +
 					'</tableRow>' +
@@ -324,38 +324,38 @@ describe( 'TableElementSupport', () => {
 
 		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 			data:
-				'<table headingRows="1" htmlAttributes="(1)" htmlFigureAttributes="(2)" ' +
+				'<table headingRows="1" htmlFigureAttributes="(1)" htmlTableAttributes="(2)" ' +
 					'htmlTbodyAttributes="(3)" htmlTheadAttributes="(4)">' +
-					'<tableRow htmlAttributes="(5)">' +
-						'<tableCell htmlAttributes="(6)">' +
+					'<tableRow htmlTrAttributes="(5)">' +
+						'<tableCell htmlThAttributes="(6)">' +
 							'<paragraph>1</paragraph>' +
 						'</tableCell>' +
-						'<tableCell htmlAttributes="(7)">' +
+						'<tableCell htmlThAttributes="(7)">' +
 							'<paragraph>2</paragraph>' +
 						'</tableCell>' +
-						'<tableCell htmlAttributes="(8)">' +
+						'<tableCell htmlThAttributes="(8)">' +
 							'<paragraph>3</paragraph>' +
 						'</tableCell>' +
 					'</tableRow>' +
-					'<tableRow htmlAttributes="(9)">' +
-						'<tableCell htmlAttributes="(10)">' +
+					'<tableRow htmlTrAttributes="(9)">' +
+						'<tableCell htmlTdAttributes="(10)">' +
 							'<paragraph>1.1</paragraph>' +
 						'</tableCell>' +
-						'<tableCell htmlAttributes="(11)">' +
+						'<tableCell htmlTdAttributes="(11)">' +
 							'<paragraph>1.2</paragraph>' +
 						'</tableCell>' +
-						'<tableCell htmlAttributes="(12)">' +
+						'<tableCell htmlTdAttributes="(12)">' +
 							'<paragraph>1.3</paragraph>' +
 						'</tableCell>' +
 					'</tableRow>' +
-					'<tableRow htmlAttributes="(13)">' +
-						'<tableCell htmlAttributes="(14)">' +
+					'<tableRow htmlTrAttributes="(13)">' +
+						'<tableCell htmlTdAttributes="(14)">' +
 							'<paragraph>2.1</paragraph>' +
 						'</tableCell>' +
-						'<tableCell htmlAttributes="(15)">' +
+						'<tableCell htmlTdAttributes="(15)">' +
 							'<paragraph>2.2</paragraph>' +
 						'</tableCell>' +
-						'<tableCell htmlAttributes="(16)">' +
+						'<tableCell htmlTdAttributes="(16)">' +
 							'<paragraph>2.3</paragraph>' +
 						'</tableCell>' +
 					'</tableRow>' +
@@ -1015,7 +1015,7 @@ describe( 'TableElementSupport', () => {
 
 		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 			data:
-				'<table htmlAttributes="(1)">' +
+				'<table htmlTableAttributes="(1)">' +
 					'<tableRow>' +
 						'<tableCell>' +
 							'<paragraph>1.1</paragraph>' +
@@ -1089,8 +1089,8 @@ describe( 'TableElementSupport', () => {
 						'</tableCell>' +
 					'</tableRow>' +
 				'</table>' +
-				'<htmlFigure htmlAttributes="(2)">' +
-					'<htmlFigcaption htmlAttributes="(3)">foobar</htmlFigcaption>' +
+				'<htmlFigure htmlFigureAttributes="(2)">' +
+					'<htmlFigcaption htmlFigcaptionAttributes="(3)">foobar</htmlFigcaption>' +
 				'</htmlFigure>',
 			attributes: {
 				1: {
@@ -1140,7 +1140,7 @@ describe( 'TableElementSupport', () => {
 
 	it( 'should not consume attributes already consumed (downcast)', () => {
 		[
-			'htmlAttributes',
+			'htmlTableAttributes',
 			'htmlFigureAttributes',
 			'htmlTbodyAttributes',
 			'htmlTheadAttributes'
@@ -1736,7 +1736,7 @@ describe( 'TableElementSupport', () => {
 								'<paragraph>1.3</paragraph>' +
 							'</tableCell>' +
 						'</tableRow>' +
-						'<caption htmlAttributes="(1)">caption</caption>' +
+						'<caption htmlCaptionAttributes="(1)">caption</caption>' +
 					'</table>',
 				attributes: {
 					1: {
@@ -1867,7 +1867,7 @@ describe( 'TableElementSupport', () => {
 								'<paragraph>1.3</paragraph>' +
 							'</tableCell>' +
 						'</tableRow>' +
-						'<caption htmlAttributes="(1)">caption</caption>' +
+						'<caption htmlFigcaptionAttributes="(1)">caption</caption>' +
 					'</table>',
 				attributes: {
 					1: {
@@ -2003,37 +2003,37 @@ describe( 'TableElementSupport', () => {
 
 			expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
 				data:
-					'<table headingRows="1" htmlAttributes="(1)" htmlFigureAttributes="(2)" htmlTbodyAttributes="(3)" htmlTheadAttributes="(4)">' +
-						'<tableRow htmlAttributes="(5)">' +
-							'<tableCell htmlAttributes="(6)">' +
+					'<table headingRows="1" htmlFigureAttributes="(1)" htmlTableAttributes="(2)" htmlTbodyAttributes="(3)" htmlTheadAttributes="(4)">' +
+						'<tableRow htmlTrAttributes="(5)">' +
+							'<tableCell htmlThAttributes="(6)">' +
 								'<paragraph>1</paragraph>' +
 							'</tableCell>' +
-							'<tableCell htmlAttributes="(7)">' +
+							'<tableCell htmlThAttributes="(7)">' +
 								'<paragraph>2</paragraph>' +
 							'</tableCell>' +
-							'<tableCell htmlAttributes="(8)">' +
+							'<tableCell htmlThAttributes="(8)">' +
 								'<paragraph>3</paragraph>' +
 							'</tableCell>' +
 						'</tableRow>' +
-						'<tableRow htmlAttributes="(9)">' +
-							'<tableCell htmlAttributes="(10)">' +
+						'<tableRow htmlTrAttributes="(9)">' +
+							'<tableCell htmlTdAttributes="(10)">' +
 								'<paragraph>1.1</paragraph>' +
 							'</tableCell>' +
-							'<tableCell htmlAttributes="(11)">' +
+							'<tableCell htmlTdAttributes="(11)">' +
 								'<paragraph>1.2</paragraph>' +
 							'</tableCell>' +
-							'<tableCell htmlAttributes="(12)">' +
+							'<tableCell htmlTdAttributes="(12)">' +
 								'<paragraph>1.3</paragraph>' +
 							'</tableCell>' +
 						'</tableRow>' +
-						'<tableRow htmlAttributes="(13)">' +
-							'<tableCell htmlAttributes="(14)">' +
+						'<tableRow htmlTrAttributes="(13)">' +
+							'<tableCell htmlTdAttributes="(14)">' +
 								'<paragraph>2.1</paragraph>' +
 							'</tableCell>' +
-							'<tableCell htmlAttributes="(15)">' +
+							'<tableCell htmlTdAttributes="(15)">' +
 								'<paragraph>2.2</paragraph>' +
 							'</tableCell>' +
-							'<tableCell htmlAttributes="(16)">' +
+							'<tableCell htmlTdAttributes="(16)">' +
 								'<paragraph>2.3</paragraph>' +
 							'</tableCell>' +
 						'</tableRow>' +
diff --git a/packages/ckeditor5-style/tests/integrations/table.js b/packages/ckeditor5-style/tests/integrations/table.js
index 971c0078fde..945d86a41c4 100644
--- a/packages/ckeditor5-style/tests/integrations/table.js
+++ b/packages/ckeditor5-style/tests/integrations/table.js
@@ -98,7 +98,7 @@ describe( 'TableStyleSupport', () => {
 		command.execute( { styleName: 'Test table style' } );
 
 		expect( getData( model, { withoutSelection: true } ) ).to.equal(
-			'<table htmlAttributes="{"classes":["test-table-style"]}">' +
+			'<table htmlTableAttributes="{"classes":["test-table-style"]}">' +
 				'<tableRow>' +
 					'<tableCell>' +
 						'<paragraph>foo</paragraph>' +
@@ -333,7 +333,7 @@ describe( 'TableStyleSupport', () => {
 		expect( getData( model, { withoutSelection: true } ) ).to.equal(
 			'<table headingRows="1">' +
 				'<tableRow>' +
-					'<tableCell htmlAttributes="{"classes":["test-th-style"]}">' +
+					'<tableCell htmlThAttributes="{"classes":["test-th-style"]}">' +
 						'<paragraph>foo</paragraph>' +
 					'</tableCell>' +
 				'</tableRow>' +
@@ -400,7 +400,7 @@ describe( 'TableStyleSupport', () => {
 
 		expect( getData( model, { withoutSelection: true } ) ).to.equal(
 			'<table>' +
-				'<tableRow htmlAttributes="{"classes":["test-tr-style"]}">' +
+				'<tableRow htmlTrAttributes="{"classes":["test-tr-style"]}">' +
 					'<tableCell>' +
 						'<paragraph>foo</paragraph>' +
 					'</tableCell>' +
@@ -427,7 +427,7 @@ describe( 'TableStyleSupport', () => {
 		expect( getData( model, { withoutSelection: true } ) ).to.equal(
 			'<table>' +
 				'<tableRow>' +
-					'<tableCell htmlAttributes="{"classes":["test-td-style"]}">' +
+					'<tableCell htmlTdAttributes="{"classes":["test-td-style"]}">' +
 						'<paragraph>foo</paragraph>' +
 					'</tableCell>' +
 				'</tableRow>' +
@@ -457,7 +457,7 @@ describe( 'TableStyleSupport', () => {
 						'<paragraph>foo</paragraph>' +
 					'</tableCell>' +
 				'</tableRow>' +
-				'<caption htmlAttributes="{"classes":["test-caption-style"]}">abc</caption>' +
+				'<caption htmlCaptionAttributes="{"classes":["test-caption-style"]}">abc</caption>' +
 			'</table>'
 		);
 	} );
@@ -485,7 +485,11 @@ describe( 'TableStyleSupport', () => {
 						'<paragraph>foo</paragraph>' +
 					'</tableCell>' +
 				'</tableRow>' +
-				'<caption htmlAttributes="{"classes":["test-caption-style","test-figcaption-style"]}">abc</caption>' +
+				'<caption' +
+					' htmlCaptionAttributes="{"classes":["test-caption-style"]}"' +
+					' htmlFigcaptionAttributes="{"classes":["test-figcaption-style"]}"' +
+					'>' +
+					'abc</caption>' +
 			'</table>'
 		);
 	} );
@@ -516,7 +520,7 @@ describe( 'TableStyleSupport', () => {
 		expect( getData( model, { withoutSelection: true } ) ).to.equal(
 			'<table headingRows="1">' +
 				'<tableRow>' +
-					'<tableCell htmlAttributes="{"classes":["test-th-style"]}">' +
+					'<tableCell htmlThAttributes="{"classes":["test-th-style"]}">' +
 						'<paragraph>header</paragraph>' +
 					'</tableCell>' +
 				'</tableRow>' +
diff --git a/packages/ckeditor5-style/tests/stylecommand.js b/packages/ckeditor5-style/tests/stylecommand.js
index 00478ad270f..21ab5248951 100644
--- a/packages/ckeditor5-style/tests/stylecommand.js
+++ b/packages/ckeditor5-style/tests/stylecommand.js
@@ -187,9 +187,9 @@ describe( 'StyleCommand', () => {
 				command.execute( { styleName: 'Red paragraph' } );
 
 				expect( getData( model ) ).to.equal(
-					'<htmlSection><paragraph htmlAttributes="{"classes":["red"]}">[Foo</paragraph></htmlSection>' +
-					'<htmlSection><paragraph htmlAttributes="{"classes":["red"]}">Bar</paragraph></htmlSection>' +
-					'<htmlSection><paragraph htmlAttributes="{"classes":["red"]}">Baz]</paragraph></htmlSection>'
+					'<htmlSection><paragraph htmlPAttributes="{"classes":["red"]}">[Foo</paragraph></htmlSection>' +
+					'<htmlSection><paragraph htmlPAttributes="{"classes":["red"]}">Bar</paragraph></htmlSection>' +
+					'<htmlSection><paragraph htmlPAttributes="{"classes":["red"]}">Baz]</paragraph></htmlSection>'
 				);
 			} );
 
@@ -260,7 +260,7 @@ describe( 'StyleCommand', () => {
 
 			it( 'should not enable styles for blocks that disable GHS', () => {
 				model.schema.addAttributeCheck( ( context, attributeName ) => {
-					if ( context.endsWith( 'paragraph' ) && attributeName == 'htmlAttributes' ) {
+					if ( context.endsWith( 'paragraph' ) && attributeName == 'htmlPAttributes' ) {
 						return false;
 					}
 				} );
@@ -355,7 +355,7 @@ describe( 'StyleCommand', () => {
 				setData( model, '<paragraph>fo[]o</paragraph>' );
 
 				model.change( writer => {
-					writer.setAttribute( 'htmlAttributes', { classes: [ 'red' ] }, root.getChild( 0 ) );
+					writer.setAttribute( 'htmlPAttributes', { classes: [ 'red' ] }, root.getChild( 0 ) );
 				} );
 
 				expect( command.value ).to.have.members( [ 'Red paragraph' ] );
@@ -368,7 +368,7 @@ describe( 'StyleCommand', () => {
 				);
 
 				model.change( writer => {
-					writer.setAttribute( 'htmlAttributes', { classes: [ 'big-heading' ] }, root.getChild( 1 ) );
+					writer.setAttribute( 'htmlH2Attributes', { classes: [ 'big-heading' ] }, root.getChild( 1 ) );
 				} );
 
 				expect( command.value ).to.have.members( [ 'Big heading' ] );
@@ -381,8 +381,8 @@ describe( 'StyleCommand', () => {
 				);
 
 				model.change( writer => {
-					writer.setAttribute( 'htmlAttributes', { classes: [ 'red' ] }, root.getChild( 0 ) );
-					writer.setAttribute( 'htmlAttributes', { classes: [ 'red' ] }, root.getChild( 1 ) );
+					writer.setAttribute( 'htmlPAttributes', { classes: [ 'red' ] }, root.getChild( 0 ) );
+					writer.setAttribute( 'htmlH2Attributes', { classes: [ 'red' ] }, root.getChild( 1 ) );
 				} );
 
 				expect( command.value ).to.have.members( [ 'Red paragraph' ] );
@@ -404,7 +404,7 @@ describe( 'StyleCommand', () => {
 				);
 
 				model.change( writer => {
-					writer.setAttribute( 'htmlAttributes', { classes: [ 'side-quote' ] }, root.getChild( 1 ) );
+					writer.setAttribute( 'htmlBlockquoteAttributes', { classes: [ 'side-quote' ] }, root.getChild( 1 ) );
 				} );
 
 				expect( command.value ).to.have.members( [ 'Side quote' ] );
@@ -414,7 +414,7 @@ describe( 'StyleCommand', () => {
 				setData( model, '<codeBlock language="plaintext">foo[bar]baz</codeBlock>' );
 
 				model.change( writer => {
-					writer.setAttribute( 'htmlAttributes', { classes: [ 'vibrant-code' ] }, root.getChild( 0 ) );
+					writer.setAttribute( 'htmlPreAttributes', { classes: [ 'vibrant-code' ] }, root.getChild( 0 ) );
 				} );
 
 				expect( command.value ).to.have.members( [ 'Vibrant code block' ] );
@@ -434,9 +434,9 @@ describe( 'StyleCommand', () => {
 				);
 
 				model.change( writer => {
-					writer.setAttribute( 'htmlAttributes', { classes: [ 'side-quote' ] }, root.getChild( 0 ) );
-					writer.setAttribute( 'htmlAttributes', { classes: [ 'example' ] }, root.getNodeByPath( [ 0, 0 ] ) );
-					writer.setAttribute( 'htmlAttributes', { classes: [ 'red' ] }, root.getNodeByPath( [ 0, 0, 0, 0, 0 ] ) );
+					writer.setAttribute( 'htmlBlockquoteAttributes', { classes: [ 'side-quote' ] }, root.getChild( 0 ) );
+					writer.setAttribute( 'htmlTableAttributes', { classes: [ 'example' ] }, root.getNodeByPath( [ 0, 0 ] ) );
+					writer.setAttribute( 'htmlPAttributes', { classes: [ 'red' ] }, root.getNodeByPath( [ 0, 0, 0, 0, 0 ] ) );
 				} );
 
 				expect( command.value ).to.have.members( [ 'Red paragraph', 'Table style' ] );
@@ -456,9 +456,9 @@ describe( 'StyleCommand', () => {
 				);
 
 				model.change( writer => {
-					writer.setAttribute( 'htmlAttributes', { classes: [ 'side-quote' ] }, root.getChild( 0 ) );
-					writer.setAttribute( 'htmlAttributes', { classes: [ 'example' ] }, root.getNodeByPath( [ 0, 0 ] ) );
-					writer.setAttribute( 'htmlAttributes', { classes: [ 'red' ] }, root.getNodeByPath( [ 0, 0, 0, 0, 0 ] ) );
+					writer.setAttribute( 'htmlBlockquoteAttributes', { classes: [ 'side-quote' ] }, root.getChild( 0 ) );
+					writer.setAttribute( 'htmlTableAttributes', { classes: [ 'example' ] }, root.getNodeByPath( [ 0, 0 ] ) );
+					writer.setAttribute( 'htmlPAttributes', { classes: [ 'red' ] }, root.getNodeByPath( [ 0, 0, 0, 0, 0 ] ) );
 				} );
 
 				expect( command.value ).to.have.members( [ 'Table style' ] );
@@ -477,7 +477,7 @@ describe( 'StyleCommand', () => {
 
 				model.change( writer => {
 					writer.setAttribute( 'htmlFigureAttributes', { classes: [ 'fancy-figure' ] }, root.getChild( 0 ) );
-					writer.setAttribute( 'htmlAttributes', { classes: [ 'example' ] }, root.getChild( 0 ) );
+					writer.setAttribute( 'htmlTableAttributes', { classes: [ 'example' ] }, root.getChild( 0 ) );
 				} );
 
 				expect( command.value ).to.have.members( [
@@ -594,7 +594,7 @@ describe( 'StyleCommand', () => {
 
 			expect( getData( model, { withoutSelection: true } ) ).to.equal(
 				'<codeBlock ' +
-					'htmlAttributes="{"classes":["fancy-code","fancy-code-dark"]}" ' +
+					'htmlPreAttributes="{"classes":["fancy-code","fancy-code-dark"]}" ' +
 					'language="typescript"' +
 				'>' +
 				'</codeBlock>'
@@ -778,7 +778,7 @@ describe( 'StyleCommand', () => {
 				command.execute( { styleName: 'Big heading' } );
 
 				expect( getData( model ) ).to.equal(
-					'<heading1 htmlAttributes="{"classes":["big-heading"]}">foo[]bar</heading1>'
+					'<heading1 htmlH2Attributes="{"classes":["big-heading"]}">foo[]bar</heading1>'
 				);
 			} );
 
@@ -789,7 +789,7 @@ describe( 'StyleCommand', () => {
 				command.execute( { styleName: 'Red heading' } );
 
 				expect( getData( model ) ).to.equal(
-					'<heading1 htmlAttributes="{"classes":["big-heading","red"]}">foo[]bar</heading1>'
+					'<heading1 htmlH2Attributes="{"classes":["big-heading","red"]}">foo[]bar</heading1>'
 				);
 			} );
 
@@ -803,9 +803,9 @@ describe( 'StyleCommand', () => {
 				command.execute( { styleName: 'Red heading' } );
 
 				expect( getData( model ) ).to.equal(
-					'<heading1 htmlAttributes="{"classes":["red"]}">fo[o</heading1>' +
+					'<heading1 htmlH2Attributes="{"classes":["red"]}">fo[o</heading1>' +
 					'<paragraph>bar</paragraph>' +
-					'<heading1 htmlAttributes="{"classes":["red"]}">ba]z</heading1>'
+					'<heading1 htmlH2Attributes="{"classes":["red"]}">ba]z</heading1>'
 				);
 			} );
 
@@ -831,7 +831,7 @@ describe( 'StyleCommand', () => {
 						'<table>' +
 							'<tableRow>' +
 								'<tableCell>' +
-									'<blockQuote htmlAttributes="{"classes":["side-quote"]}">' +
+									'<blockQuote htmlBlockquoteAttributes="{"classes":["side-quote"]}">' +
 										'<paragraph>fo[]o</paragraph>' +
 									'</blockQuote>' +
 								'</tableCell>' +
@@ -864,7 +864,7 @@ describe( 'StyleCommand', () => {
 					'<table>' +
 						'<tableRow>' +
 							'<tableCell>' +
-								'<table htmlAttributes="{"classes":["example"]}">' +
+								'<table htmlTableAttributes="{"classes":["example"]}">' +
 									'<tableRow>' +
 										'<tableCell>' +
 											'<paragraph>fo[]o</paragraph>' +
@@ -949,15 +949,15 @@ describe( 'StyleCommand', () => {
 			it( 'should force adding style if the command was called with `forceValue=true`', () => {
 				setData( model,
 					'<heading1>foo</heading1>' +
-					'<heading1 htmlAttributes=\'{"classes":["red"]}\'>b[ar</heading1>' +
+					'<heading1 htmlH2Attributes=\'{"classes":["red"]}\'>b[ar</heading1>' +
 					'<heading1>ba]z</heading1>' );
 
 				command.execute( { styleName: 'Red heading', forceValue: true } );
 
 				expect( getData( model ) ).to.equal(
 					'<heading1>foo</heading1>' +
-					'<heading1 htmlAttributes="{"classes":["red"]}">b[ar</heading1>' +
-					'<heading1 htmlAttributes="{"classes":["red"]}">ba]z</heading1>'
+					'<heading1 htmlH2Attributes="{"classes":["red"]}">b[ar</heading1>' +
+					'<heading1 htmlH2Attributes="{"classes":["red"]}">ba]z</heading1>'
 				);
 			} );
 
@@ -979,7 +979,7 @@ describe( 'StyleCommand', () => {
 			it( 'should force removing style if the command was called with `forceValue=false`', () => {
 				setData( model,
 					'<heading1>f[oo</heading1>' +
-					'<heading1 htmlAttributes=\'{"classes":["red"]}\'>ba]r</heading1>' +
+					'<heading1 htmlH2Attributes=\'{"classes":["red"]}\'>ba]r</heading1>' +
 					'<heading1>baz</heading1>' );
 
 				command.execute( { styleName: 'Red heading', forceValue: false } );