mathML is not rendering at all

I have written this math equation using MathML. I have tried both using .html and .xhtml. None of them fulfilled my desire. In html format it shows x y x y and in .xhtml format it shows the code. So how would I make it work?

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
  </head>
  <body>
<math display="inline" xmlns="http://www.w3.org/1998/Math/MathML" mode="display">
  <mfrac>
    <mi>x</mi>
    <mi>y</mi>
  </mfrac>
    </math>
    <math display="block" xmlns="http://www.w3.org/1998/Math/MathML" mode="inline">
  <mfrac>
    <mi>x</mi>
    <mi>y</mi>
      </mfrac>
    </math>
  </body>
</html>

Solution

Importing a javascript from mathjax solved my problem:

<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

complite code looks like this:

<!DOCTYPE html>
<html>
<head>
<title>MathJax MathML Test Page</title>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>

<math display="inline" xmlns="http://www.w3.org/1998/Math/MathML" mode="display">
  <mfrac>
    <mi>x</mi>
    <mi>y</mi>
  </mfrac>
    </math>
    <math display="block" xmlns="http://www.w3.org/1998/Math/MathML" mode="inline">
  <mfrac>
    <mi>x</mi>
    <mi>y</mi>
      </mfrac>
    </math>

</body>
</html>