HTML5 MathML
HTML5 MathML id Attribute
The id attribute gives a MathML element a unique identifier within the page, exactly like id on ordinary HTML. It enables CSS targeting, JavaScript access and in-page links to a specific part of a formula.
Definition and Usage
Assign a unique id to any MathML element. You can then style it with a CSS #id selector, select it with document.getElementById, or reference it. Each id must be unique across the whole document.
Syntax
Example
<mi id="result">x</mi>Example
This gives a term an id and styles it with CSS to show the id working.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MathML id attribute</title>
<style>
#answer { color: crimson; font-weight: bold; }
</style>
</head>
<body>
<math display="block">
<mrow>
<mi>x</mi><mo>=</mo>
<mn id="answer">42</mn>
</mrow>
</math>
</body>
</html>💡
ids are the reliable way to script or style a specific piece of a formula, since MathML integrates fully with the DOM and CSS.
Key Takeaways
- id uniquely identifies a MathML element in the page.
- It enables CSS #id styling and getElementById scripting.
- Each id must be unique across the document.