HTML xmlns Attribute

Beginner
⏱️ 6 min read
📚 Updated: Jun 2026
🎯 3 Examples
Markup & Namespaces
HTML xmlns attribute tutorial — declaring XML namespaces in HTML documents
Overview

Introduction

The xmlns attribute stands for XML Namespace. It declares which vocabulary an element belongs to, so the browser or parser knows whether a tag like <title> is HTML, SVG, or something else.

HTML5 pages written as normal text/html do not require xmlns on <html>. You will most often see it on inline <svg> or <math> elements, or on the root when serving XHTML as XML.

What You’ll Learn

01

Namespace

What it means.

02

SVG xmlns

Inline graphics.

03

XHTML

Root on html.

04

URI values

Not fetched.

05

HTML5

When optional.

06

JavaScript

createElementNS.

Fundamentals

Purpose of xmlns Attribute

The purpose of xmlns is to define a namespace for elements and attributes in a document tree. Namespaces prevent collisions when multiple vocabularies share tag names. For example, both HTML and SVG can have a title element, but they mean different things in different namespaces.

In modern web development, the most practical use is embedding SVG or MathML inside HTML. The foreign root element gets an xmlns attribute so its children are parsed with the correct rules.

💡
HTML5 vs XHTML

Standard HTML5 documents do not need xmlns on <html>. Adding xmlns="http://www.w3.org/1999/xhtml" with <!DOCTYPE html> is optional and usually ignored for layout. True XHTML requires XML syntax and is served as application/xhtml+xml.

Foundation

📝 Syntax

Set xmlns to a namespace URI on the element that starts a foreign vocabulary:

xmlns.html
<!-- Inline SVG in HTML -->
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue"/>
</svg>

<!-- XHTML root (XML documents) -->
<html xmlns="http://www.w3.org/1999/xhtml">...</html>

Syntax Rules

  • Value is a namespace URI (string), not a file to download.
  • Default unprefixed form: xmlns="URI".
  • Prefixed form: xmlns:prefix="URI" then <prefix:tag>.
  • Child elements inside an SVG or MathML root inherit its namespace.
  • JavaScript: use document.createElementNS(uri, name) for namespaced elements.
  • Do not add random xmlns on HTML <div> expecting XML behavior in HTML parsers.
Reference

💎 Values

The value of xmlns is a namespace URI. Common URIs on the web:

  • XHTML — http://www.w3.org/1999/xhtml (root element in XHTML documents)
  • SVG — http://www.w3.org/2000/svg (inline or standalone SVG)
  • MathML — http://www.w3.org/1998/Math/MathML (mathematical notation)
  • Custom — Any unique URI you control (e.g. https://example.com/ns/app) for XML vocabularies
xmlns-values.html
<html xmlns="http://www.w3.org/1999/xhtml">...</html>

<svg xmlns="http://www.w3.org/2000/svg">...</svg>

<math xmlns="http://www.w3.org/1998/Math/MathML">...</math>

How It Works

When the parser sees xmlns="http://www.w3.org/2000/svg" on <svg>, it treats nested elements like <circle> as SVG, not as unknown HTML tags. The URI is an identifier only; browsers do not fetch it over the network.

Cheat Sheet

⚡ Quick Reference

Contextxmlns valueRequired?
HTML5 text/htmlNone on htmlNo
Inline svghttp://www.w3.org/2000/svgYes (recommended)
Inline mathhttp://www.w3.org/1998/Math/MathMLYes (recommended)
XHTML XML documenthttp://www.w3.org/1999/xhtmlYes
JS APISame URI in createElementNSWhen building SVG/MathML
Scope

Applicable Elements

ElementTypical xmlnsNotes
<html>XHTML URIXHTML/XML documents only
<svg>SVG URIMost common HTML5 use case
<math>MathML URIEquations in HTML
Any XML rootCustom or standard URIDefines vocabulary scope
<div>, <p>Not usedHTML elements use the HTML namespace implicitly
Compare

HTML5 document vs XHTML vs inline SVG

FeatureHTML5XHTML (XML)Inline SVG
Root xmlnsNot requiredRequired on htmlN/A (svg is child)
MIME typetext/htmlapplication/xhtml+xmlInside HTML
Self-closing tagsOptional styleMust follow XML rulesSVG XML rules
Typical xmlnsOn foreign roots only1999/xhtml2000/svg
Hands-On

Examples Gallery

Declare SVG namespace inline, see XHTML root declaration, and build SVG with JavaScript namespaces.

👀 Live Preview

Inline SVG with the correct namespace on this page:

Implementation Example

Using xmlns on inline SVG inside an HTML document:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example Document</title>
</head>
<body>
  <h1>This is a Heading</h1>
  <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80">
    <circle cx="40" cy="40" r="30" fill="#3b82f6"/>
  </svg>
</body>
</html>
Try It Yourself

How It Works

The xmlns on <svg> puts that subtree in the SVG namespace so elements like <circle> render as vector graphics instead of invalid HTML tags.

Implementation Example — XHTML root

Declaring the XHTML namespace on the document root (for XML/XHTML, not typical HTML5):

xhtml-root.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Example Document</title>
</head>
<body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>
Try It Yourself

How It Works

On a true XHTML document served as XML, xmlns="http://www.w3.org/1999/xhtml" on <html> identifies the default vocabulary. On ordinary HTML5 pages it is optional and usually unnecessary.

Dynamic Values with JavaScript

Create namespaced SVG nodes with the DOM API (preferred over setAttribute('xmlns') on HTML elements):

dynamic-xmlns.html
<div id="canvas"></div>

<script>
  var SVG_NS = "http://www.w3.org/2000/svg";
  var svg = document.createElementNS(SVG_NS, "svg");
  svg.setAttribute("width", "120");
  var rect = document.createElementNS(SVG_NS, "rect");
  rect.setAttribute("fill", "#22c55e");
  svg.appendChild(rect);
  document.getElementById("canvas").appendChild(svg);
</script>
Try It Yourself

How It Works

createElementNS passes the namespace URI directly. The browser creates a proper SVG element tree without manually setting xmlns on each node.

A11y

♿ Accessibility

  • SVG needs labels — Use role="img" and aria-label (or <title> inside SVG) for meaningful graphics.
  • Decorative SVG — Mark with aria-hidden="true" when purely decorative.
  • MathML — Screen reader support varies; provide plain-text fallbacks for critical equations when needed.
  • Namespaces do not replace semantics — Correct xmlns does not automatically make content accessible.
  • Focus management — Interactive SVG elements need keyboard support like any control.

🧠 How xmlns Works

1

Declare xmlns

URI on root.

Markup
2

Parser assigns namespace

To descendants.

Parse
3

Correct rules apply

HTML vs SVG.

Vocabulary
=

No name clash

Mixed vocabularies work.

Compatibility

Browser Support

Namespace handling is built into all modern browsers. Inline SVG with xmlns works everywhere. XHTML-as-XML is niche; most sites use HTML5 text/html without root xmlns.

✅ Universal · SVG inline support

Namespaces work in all major browsers

Use SVG xmlns for inline graphics; skip root xmlns on typical HTML5 pages.

100% Modern browsers
Google Chrome Supported
Supported
Mozilla Firefox Supported
Supported
Apple Safari Supported
Supported
Microsoft Edge Supported
Supported
xmlns (SVG inline) Excellent

Bottom line: Safe for inline SVG and MathML; root XHTML xmlns only when serving true XHTML/XML.

Pro Tips

💡 Best Practices

✅ Do

  • Add SVG xmlns on inline <svg> roots
  • Use standard W3C namespace URIs
  • Use createElementNS when building SVG in JS
  • Skip root xmlns on normal HTML5 pages
  • Label SVG for accessibility

❌ Don’t

  • Assume every HTML page needs xmlns on html
  • Fetch xmlns URIs as APIs or files
  • Set xmlns on random HTML divs expecting XML behavior
  • Mix HTML5 doctype with strict XHTML rules without reason
  • Forget namespace when pasting standalone SVG into HTML
  • Use xmlns when integrating HTML with SVG, MathML, or other XML vocabularies.
  • Ensure the URI accurately identifies the intended namespace.
  • Remember HTML5 does not require XML namespaces for most everyday pages.
Wrap-Up

🎉 Conclusion

While xmlns is rarely needed on everyday HTML5 documents, it is essential for inline SVG, MathML, and XML-based workflows. It keeps vocabularies separate so mixed markup parses and renders correctly.

Understanding namespaces helps you embed graphics, work with XHTML when required, and use the right JavaScript APIs for namespaced content.

Summary

Key Takeaways

Knowledge Unlocked

4 truths every developer should know about xmlns

Bookmark these before your next xmlns implementation.

4
Core concepts
💡 01

xmlns declares an XML

xmlns declares an XML namespace URI for an element subtree.

Core
📝 02

HTML5 pages usually do

HTML5 pages usually do not need xmlns on <html>.

Syntax
⚙️ 03

Inline SVG needs http://www.w3.org/2000…

Inline SVG needs http://www.w3.org/2000/svg.

Usage
🔒 04

Use createElementNS in JavaScript

Use createElementNS in JavaScript for namespaced elements.

Dynamic
🎯 You’re ready to use xmlns effectively
Review Quick Reference →

❓ Frequently Asked Questions

No. Standard HTML5 documents served as text/html do not require it. Add xmlns when using XHTML as XML or on foreign roots like SVG.
No. The value is a unique identifier. It often looks like a URL but is not fetched as a resource.
Missing xmlns="http://www.w3.org/2000/svg" on the root svg element is a common cause when SVG is pasted into HTML.
Both declare namespaces. xmlns sets the default namespace; prefixed forms like xmlns:xlink bind a prefix to another URI for qualified names.
That does not turn HTML elements into another vocabulary in HTML parsers. For SVG, use createElementNS or insert a proper svg subtree.

Practice XML namespaces

Draw inline SVG with the correct xmlns declaration.

Try the SVG example →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

5 people found this page helpful

HTML wrap Attribute HTML Tags