How to Code Up a Square Root in HTML

You can use several entities and tags to code a square root in HTML.

A square root is a common entity in mathematical equations. However, HTML does not support formulas, so it is necessary to use HTML and CSS to code a square root in HTML. The use of an overline and the creation of a span of characters makes it possible for the square root entity to expand across the entire equation.

Things You'll Need

• List of HTML entities

Instructions

1. Code a square root symbol. The HTML entity for a square root is √. The square root of 49 would be coded as √49, and the output would be √49. In order for an overline to appear, extra coding must be added.

2. Code a square root with an overline. Create a span of characters using CSS style "text-decoration: overline." The square root of X + 1 would be coded as: <span style="white-space: nowrap; font-size:larger">√<span style="text-decoration:overline;"> X + 1 </span></span>

3. Code a square root with a formula containing a superscript. These may be coded using a table with two rows and two columns. The top row must include the entity   to be displayed over the square root symbol. The top row must also have enough underline characters to go over the formula. The number 2 in quotations in the following formula represents a superscript; the quotation marks are not part of the code. The square root of X"2" + 1 should be coded as: <table cellspacing="0" cellpadding="0" border="0" style="font-family:verdana;">

   <tr>

   <td>

    

   </td>

   <td>

   _______

   </td>

   </tr>

   <tr>

   <td style="font-size:larger">

   √

   </td>

   <td>

    X² + 1 

   </td>

   </tr>

   </table>

4. Code a square root with a superscript using the <span> tag. Using the <span> tag instead of the <sup> (superscript) tag helps to control the size and position of the superscripts so that they will not overlap with the overline. The numbers 2.7 and 8.6 in quotations in the following formula represent superscripts; the quotation marks are not part of the code. The square root of (a"2.7"+ b"8.6") would be coded as: √<span style="text-decoration:overline">

   (<i>a</i><span style="font-size: 10px;vertical-align:+25%;">2.7</span>+

   <i>b</i><span style="font-size: 10px;vertical-align:+25%;">8.6</span>) </span>

Tips & Warnings

• The table used for coding a square root with a superscript should use a common font family such as Verdana or Arial to avoid problems with rendering on other browsers.

References

• HTML Symbols for Entities and Greek Letters
• How to Code Square Root Symbol in HTML and CSS