What is the right way to add invisible text for a resizeable logo <p>I want to do 2 things:</p> <ol> <li>Know that I am <strong>SEO friendly</strong> and that I inserted correctly the text (so search engines would know that this is "my logo"</li> <li><p>Learn how to <strong>resize the logo</strong> in case the screen is lower than a specific width (assuming that I know how to work with media-queries)</p> <pre><code>&lt;div id="myLogo"&gt; &lt;a href="#"&gt; &lt;img src="css/img/my_logo.png" alt="My Logo"&gt; &lt;/a&gt; &lt;/div&gt;&lt;!--End of #myLogo--&gt; </code></pre></li> </ol> <p>What should I do to achieve them both? What should be my CSS and did I wrote the code correctly?</p>