How to draw circle in html page?

There are a few unicode circles you could use:

* { font-size: 50px; }

○
◌
◍
◎
●

More shapes here.

You can overlay text on the circles if you want to:

#container {
    position: relative;
}
#circle {
  font-size: 50px;
  color: #58f;
}
#text {
    z-index: 1;
    position: absolute;
    top: 21px;
    left: 11px;
}

<div id="container">
    <div id="circle">&#x25CF;</div>
    <div id="text">a</div>
</div>

You could also use a custom font (like this one) if you want to have a higher chance of it looking the same on different systems since not all computers/browsers have the same fonts installed.

You can't draw a circle per se. But you can make something identical to a circle.

You'd have to create a rectangle with rounded corners (via border-radius) that are one-half the width/height of the circle you want to make.

    #circle {
      width: 50px;
      height: 50px;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 25px;
      background: red;
    }

<div id="circle"></div>

border-radius:50% if you want the circle to adjust to whatever dimensions the container gets (e.g. if the text is variable length)

Don't forget the -moz- and -webkit- prefixes! (prefixing no longer needed)

div{
  border-radius: 50%;
  display: inline-block;
  background: lightgreen;
}

.a{
  padding: 50px;
}

.b{
  width: 100px;
  height: 100px;
}

<div class='a'></div>
<div class='b'></div>

It is quite possible in HTML 5. Your options are: Embedded SVG and <canvas> tag.

To draw circle in embedded SVG:

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" fill="red" />
</svg>

Circle in <canvas>:

var canvas = document.getElementById("circlecanvas");
var context = canvas.getContext("2d");
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fillStyle = "red";
context.fill()

<canvas id="circlecanvas" width="100" height="100"></canvas>