Add Alternative Text in Image

Add Alternative Text in the Image

Add Alternative Text in Image

For user who has images turned off in their browsers, you can add alternative text that identifies the image on your page. Alternative text, sometimes called placeholder text, can describe what appears in an image and is an important addition to your web pages markup. Most search engines, because they process text but not images, use alternative text to better understand the cont of your page. This can help improve the placement of your website in search results.

Add Alternative text

Step 1: Click inside the <img> tag and type alt=”?” replacing? with alternative text describing the image.

If the user’s browser has images turned off, or if the image cannot be found on the web server, the browser displays the alternative text in lieu of the image.

Note: You can combine alt information with title information in the same image.

Result Output

<!DOCTYPE html>
<html>
    <Head>
        <Title>Coding thai</Title>
        <style>
            h1{
                text-align: center;
                text-transform: uppercase;
            }
            span.highlight{background-color: #ffcc99;}
            body{
                background-color: #ffffcc;
            }
            ul.horiz{
                list-style-type: none;
                padding: 0;
            }
            ul.horiz li{
                float: left;
                padding: 10px;
            }

        </style>
    </Head>
    <body>
        <h1>Types of Web Developer</h1> 
        <hr>
        <ul class="horiz">
            <li><a href="index.html">Home</a></li>
            <li><a href="index.html">About Us</a></li>
            <li><a href="index.html">Contact Us</a></li>
            <li><a href="index.html">Service</a></li>
        </ul>
        <br style="clear:both">
        <ol>
            <li>Frontend Developer</li>
            <li>Back-end Developer</li>
        </ol>
        <Section class="First">
            <p> <span class="highlight">A front end developer</span> has one general responsibility:
              to ensure that website visitors can easily interact with the page.
                and Back-end developers are the experts who build and maintain the mechanisms that
              process data and perform actions on websites.</p>
        </Section>
        <img src="codingtha.png" height="250" width="50%" alt="How to compile your scss to CSS">
        <hr>
       <small> &copy;Copyright 2022 Codingthai</small>
    </body>
</html>

Follow us on Social Media For More

FacebookInstagramPinterest