How to create a textArea html5 that indicates the number of rows?

That can not be done with a text area element, I'm sorry to tell you that there is a lot more code than you think about that example. For starters, not only can you write in a input or in textarea , you can write in any element that supports the attribute contenteditable . And to add line number, you would have to do it by hand:

Here I give you a small example that does not work at all (as I say, there is a lot of work behind an editor like the one you want), but it allows you to get an idea.

const editor=document.getElementById('editable');
editor.addEventListener('keydown',function(event) {
  
  if (event.code==='Enter'){
    var c = document.createElement('code');
    editor.appendChild(c);
    c.focus();
  }
});

pre{
    counter-reset: line;
    
}
code{
    counter-increment: line;
    padding-left: 3px;
}



code:before{
    content: counter(line);
    margin-right: 5px;
    padding-right: 5px;
    background-color: lightgrey;
}

<pre id="editable" contenteditable="true">
<code>Este texto en varias líneas</code>
<code>es editable</code>
</pre>

My recommendation is that if you want an editor, use an existing library to add it to your website, such as Ace or < a href="https://codemirror.net/"> CodeMirror