256 Kilobytes

Using Custom XML Tags within HTML: Is it Valid?

Articles in Web Development | By August R. Garcia

Published 6 months agoMon, 06 May 2019 04:45:13 -0700

While HTML is generally thought of as being limited to a specific set of tags, such p, h1, strong, em, and article, it is possible to create custom XML elements that can be used in any webpage.

191 views, 0 RAMs, and 0 comments

While HTML is generally thought of as being limited to a specific set of tags, such as <p>, <h1>, and so on, it is possible to create custom XML elements that can be used in any webpage. For example, consider this code snippet used by Twitter for embedding Tweets into external webpages:

<twitter-widget class="twitter-tweet twitter-tweet-rendered" id="twitter-widget-0" style="position: static; visibility: visible; display: block; transform: rotate(0deg); max-width: 100%; width: 500px; min-width: 220px; margin-top: 10px; margin-bottom: 10px;" data-tweet-id="1105906950661988359">[...]</twitter-widget>

This code is used in HTML documents, but there is no "twitter-widget" element defined in the HTML specification. This article covers how this type of custom XML tag works in HTML documents and how to how to display/embed XML in HTML.

What is the difference between HTML and XML?

All HTML is valid XML, but not all XML is valid HTML.

What is HTML5?

Hypertext Markup Language (HTML) consists of a set of specific elements with specific associated behavior and functionality. While most readers are probably familiar with HTML, here's an example of an HTML snippet:

  <h1>Some Post</h1>
  <p>What a great blog post.</p>
  <p><em>August Garcia</em></p>

Note that these tags--<article>, <h1>, <p>, and <em>--are all explicitly defined in the HTML standard.

What is XML?

Extensible Markup Language (XML) is a superset of HTML. As stated in the name, it is extensible, meaning that it can be extended with arbitrary tags. For example, a valid XML document might look like this:

  <heading>Some Post</heading>
  <paragraph>What a great blog post.</paragraph>
  <signature>August Garcia</signature>

As a side note, XML is used for many applications behind the scenes, such as in .docx, .pptx, and .xlsx files through the Open Office XML (OOXML) format.

How to Add a Custom XML Element to an HTML Document

To start with a basic example, consider this code snippet:

  <h1>Some Post</h1>
  <p>What a great blog post.</p>
  <signature>August Garcia</signature>

There is no <signature> element in the HTML standard. However, the HTML standard does specify how to handle unknown elements elements.

User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them.

Source:  https://www.w3.org/TR/html5/infrastructure.html#conforming-documents

And elaborated on here:

The HTMLUnknownElement interface must be used for HTML elements that are not defined by this specification (or other applicable specifications).

Source:  https://www.w3.org/TR/2011/WD-html5-20110525/elements.html

And if you follow this trail of documentation further:

The HTMLUnknownElement interface represents an invalid HTML element and derives from the HTMLElement interface, but without implementing any additional properties or methods.

Source: https://developer.mozilla.org/en-US/docs/Web/API/HTMLUnknownElement

Which means that the <signature> tag in the example above is technically invalid HTML. However, in practice it will work fine, being treated effectively as if the <signature> tag were a <span> element. And, further, being able to be modified and interacted with via CSS and JavaScript, such as the following:

  signature { font-style:italic; font-size:90%; display:block; }

  <h1>Some Post</h1>
  <p>What a great blog post.</p>
  <signature>August Garcia</signature>

  var signatures = document.getElementsByTagName("signature");
  // Do Something

This document will render exactly how you would expect.

Custom Elements: Advanced Uses of XML in HTML

While the previous example of using a <signature> tag is extremely straightforward and simple, there are much more intricate custom elements that can be created using Custom Elements. By using JavaScript, developers can define valid DOM elements with advanced functionality. The basic process is to:

  1. Register your custom HTML element using customElements.define()
  2. Add features to your custom element with Object.create()

This guide goes into more depth. An example of this can be seen in creating a custom "word count" element, as shown in the MDN GitHub.You can also progressively enhance natively-defined HTML elements, such as what is shown in this documentation.

Should You Create Custom XML Tags for Web Development?



  • Preventing scope conflicts. When writing code that may be embedded into other webpages, such as if writing an API, using a custom element may prevent conflicts with the CSS, JavaScript, and other code used by the site accessing your API/code. While a site might already have styles that would impact <div class='my-api">, they likely have no styles or code that would impact <my-api-body> tags.
  • Extensibility. Additional functionality can be built on top of the existing HTML standard without reinventing the wheel.
  • Maintainability and modularity. Code can be compartmentalized effectively.

Additional Resources

Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 6 months ago 🕓 Posted at 06 May, 2019 04:45 AM PDT

Post a New Comment

To leave a comment, login to your account or create an account.

Do you like having a good time?

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account
You can also login to an existing account or recover your password. All use of this site is subject to terms outlined in the terms of service and privacy policy.