Почему в html такой сильный отступ и как исправить

Дело в том, что картинка по умолчанию считается строчным элементом, как очень большая буква. Соответственно вторая строчка текста идет ниже картинки.

Если вам вместо этого нужно обтекание картинки текстом, тогда необходимо задать этой картинке CSS-атрибут:

 float: left; 

Как вариант, можно картинке задать его через атрибут style:

 <img src="..." style="float: left"/> 

P. S. Теги font уже устарели и не поддерживаются в современном HTML5.

Но если вам нужен конкретно HTML4 по старому принципу, тогда можете вместо style задать картинке атрибут align="left". По идее, он раньше давал такой же результат. Если браузер поддерживает HTML4, то это должно сработать.