Translate html magento 2

Question

I am developing my custom module. I have the html template look like this

<p>
  This is a <strong>text that I need to translate</strong>
</p>
<p>Read more: <a href="" target="_blank" rel="noopener noreferrer">google.com</a></p>

How can I translate these nested texts? I know how to use i18n to translate but I don't know how to translate the text in <p> tag that has <strong> tag in the middle

I used this but not work

  <p >{{trans "This is a"}} <strong>{{trans "text that I need to translate."}}</strong></p>

I can do this and it works but I really don't like the extra span tag

 <p ><span data-bind="i18n: 'This is a '"/><strong data-bind="i18n: 'text that I need to translate.'"/></p>

NOTE: My file is the js component template so it's HTML. It is not phtml file

Answer 1

Try it like this

first create a custom module using this link https://www.mageplaza.com/magento-2-module-development/

Now create Below directory

Vendor/Module/i18n/en_US.csv

Now in open en_US.csv in notepad and translate like below example

"Position","Featured"

here am changing Position with Featured

that's it you are done