How to add options for different languages on an HTML page

HTML-CSS
1

I have this dropdown where I get the options of English and Spanish. I want to be able to add my own translations of Spanish when I click on the link in the dropdown menu.

I have the html language set to <html lang="eng" >
and I tried setting this

<span title="Spanish"><a class="dropdown-item" lang="es" href="file:///Users/faizankhan/Desktop/Faizan%20Portfolio/index.html#Projects.es">Español</a></span>```


<li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Language
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">English</a>
               
                    <span title="Spanish"><a class="dropdown-item" lang="es" href="file:///Users/faizankhan/Desktop/Faizan%20Portfolio/index.html#Projects.es">Español</a></span>
                  </div>
                </li>
2

I would think that a screen reader would pronounce the word “Espanol” correctly if it had the language installed. If the document you are linking to is completely in Spanish then <html lang = "es"> in the “linked to” document. What you did is for writing a portion of the document in Spanish. Does this clarify things?