Hajin Park - Personal Portfolio

This page demonstrates various HTML elements for educational purposes.

Picture Element Demo

The picture element allows for responsive images with multiple sources and formats:

Audio Element Demo

The audio element embeds sound content:

Note: Audio file placeholder - no actual audio file provided

Video Element Demo

The video element embeds video content:

Note: Video file placeholder - no actual video file provided

Canvas Element Demo

The canvas element is used for drawing graphics via JavaScript:

Template Element Demo

The template element holds HTML that is not rendered immediately:

Note: Template content is defined but not rendered (as per assignment rules, no JS to clone it)

SVG Element Demo

The SVG element is used for vector graphics:

Dialog Element Demo

The dialog element represents a dialog box or interactive component:

Note: Dialog is defined but not shown (requires JavaScript to open/close)

MathML Demo (Extra Credit)

The MathML element is used for displaying mathematical notation:

Einstein's famous mass-energy equivalence formula:

E = m c^{2}

Where $E$ is energy, $m$ is mass, and $c$ is the speed of light.

Why MathML Couldn't Be Used Until Recently (Extra Credit)

Despite being part of the HTML specification for a long time, MathML had limited practical use until recently due to poor browser support. According to caniuse.com, the main issues were:

Chrome/Chromium browsers removed MathML support in 2013 (Chrome 25) and only re-added it in Chrome 109 (January 2023), leaving a nearly 10-year gap where the most popular browser didn't support MathML at all.
Safari had partial support but with many rendering inconsistencies and bugs that made it unreliable for production use.
Internet Explorer and early Edge had no support for MathML, forcing developers to use JavaScript polyfills like MathJax or KaTeX instead.
The lack of consistent cross-browser support meant developers couldn't rely on native MathML and had to use alternative solutions, creating a chicken-and-egg problem where browsers didn't prioritize MathML because developers weren't using it.

Only in 2023, with Chrome 109's release and improved support in Firefox and Safari, did MathML become viable for widespread use. As of 2025, MathML has over 95% global browser support, making it finally practical for production websites.