Most web designers won't be transcribing complex mathematical formulas in their code. But it may surprise you how often the need for math-related characters can pop up. You may need the degree symbol to write the temperature. Or maybe you need to use fractions for measures of ingredients in a recipe. There are ampersand notations for that!
![young man teaching math](https://s3.amazonaws.com/content.accelerate-ed.com/Secondary/docs/BasicWebDesign_AE/images/shutterstock_2086521370.jpg)
Example: When writing a simple equation by hand, you would use an “x” for multiplication. In development, this can be confusing to the browser and to screen readers. If we write 6 “x” 2, a screen reader would read this as “six ex two”. The correct way to write this is to use the ampersand notation × in place of “x”. “6 × 2” would be read as “six times two.”
Below are tables of math symbols that are commonly used as well as a table of symbols that are less commonly used but still might look familiar. You don't need to memorize them. A quick web search for ampersand notation characters will easily get you a list of everything you need. Still, look over these examples to get a better idea of what types of symbols are available.
Most Common
Name | Notation | Notation |
---|---|---|
less than | < | < |
greater than | > | > |
less than or equal to | ≤ | ≤ |
greater than or equal to | ≥ | ≥ |
degree | ° | ° |
one half | ½ | ½ |
one fourth | ¼ | ¼ |
three fourths | ¾ | ¾ |
times | × | × |
divide | ÷ | ÷ |
plus or minus | ± | ± |
Less Common
Name | Notation | Notation |
---|---|---|
theta | θ | θ |
pi | π | π |
Sigma | Σ | Σ |
similar | ∼ | ∼ |
approximate | ≈ | ≈ |
congruent | ≅ | ≅ |
not equal to | ≠ | ≠ |
angle | ∠ | ∠ |
square root | √ | √ |
infinity | ∞ | ∞ |
therefore | ∴ | ∴ |
Question
Why is it best practice to use ampersand notations to replace special characters and symbols in your code?
Aside from being semantically correct, the use of proper notation benefits users who rely on screen readers when viewing the web. Screen readers are literal and will relay your code and content as it's written to a user with a visual impairment. Ensuring that your code can be accessed by all is an important part of being inclusive and is considered best practice.